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

login page responsive

Browse Source
This commit is contained in:
akash.dutta 2022-05-07 22:18:04 +05:30
parent 7c5aab7bf3
commit d9b49ca932
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,19 @@
import { Box, Flex, Image, Text, Spinner } 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)");
return ( return (
<Flex <Flex
flexWrap="wrap" flexWrap="wrap"
h="100%" h="100%"
bg="gray.100" bg="gray.100"
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
flexDirection="column" flexDirection="column"
> >
<Flex alignItems="center"> <Flex alignItems="center">
<Image <Image
@ -20,7 +21,10 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
alt="logo" alt="logo"
height="50" height="50"
/> />
<Text fontSize="x-large" ml="3" letterSpacing="3"> <Text
fontSize={isNotSmallerScreen ? "x-large" : "large"}
ml="3"
letterSpacing="3">
AUTHORIZER AUTHORIZER
</Text> </Text>
</Flex> </Flex>
@ -29,7 +33,14 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
<Spinner /> <Spinner />
) : ( ) : (
<> <>
<Box p="6" m="5" rounded="5" bg="white" w="500px" shadow="xl"> <Box
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">