devstack/authorizer
4
0
Fork 0
Code Pull Requests Actions Activity

login page fixed

Browse Source
This commit is contained in:
akash.dutta 2022-05-09 15:46:42 +05:30
parent a7fa988bf0
commit de44c40de5
1 changed files with 8 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
dashboard/src/layouts/AuthLayout.tsx
View File

@ -1,30 +1,16 @@
import { Box, Flex, Image, Text, Spinner, useMediaQuery, } from '@chakra-ui/react'; import { Box, Flex, Image, Text, Spinner, useMediaQuery } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { useQuery } from 'urql'; import { useQuery } from 'urql';
import { MetaQuery } from '../graphql/queries'; import { MetaQuery } from '../graphql/queries';
export function AuthLayout({ children }: { children: React.ReactNode }) { export function AuthLayout({ children }: { children: React.ReactNode }) {
const [{ fetching, data }] = useQuery({ query: MetaQuery }); const [{ fetching, data }] = useQuery({ query: MetaQuery });
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)"); const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
return ( return (
<Flex <Flex flexWrap='wrap' h='100vh' bg='gray.100' alignItems='center' justifyContent='center' flexDirection='column'>
flexWrap="wrap" <Flex alignItems='center'>
h="100%" <Image src='https://authorizer.dev/images/logo.png' alt='logo' height='50' />
bg="gray.100" <Text fontSize='x-large' ml='3' letterSpacing='3'>
alignItems="center"
justifyContent="center"
flexDirection="column"
>
<Flex alignItems="center">
<Image
src="https://authorizer.dev/images/logo.png"
alt="logo"
height="50"
/>
<Text
fontSize={isNotSmallerScreen ? "x-large" : "large"}
ml="3"
letterSpacing="3">
AUTHORIZER AUTHORIZER
</Text> </Text>
</Flex> </Flex>
@ -33,17 +19,10 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
<Spinner /> <Spinner />
) : ( ) : (
<> <>
<Box <Box p='6' m='5' rounded='5' bg='white' w={isNotSmallerScreen ? '500px' : '450px'} shadow='xl'>
p="6"
m="5"
rounded="5"
bg="white"
w={isNotSmallerScreen ? "450px" : "400px"}
shadow="xl"
>
{children} {children}
</Box> </Box>
<Text color="gray.600" fontSize="sm"> <Text color='gray.600' fontSize='sm'>
Current Version: {data.meta.version} Current Version: {data.meta.version}
</Text> </Text>
</> </>