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

login page vertically responsive

Browse Source
This commit is contained in:
akash.dutta 2022-05-12 15:10:24 +05:30
parent 0433d64737
commit 28bed69b2e
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Box, Flex, Image, Text, Spinner, useMediaQuery } from '@chakra-ui/react';
import { Box, Flex, Image, Text, Spinner, useMediaQuery, Stack } from '@chakra-ui/react';
import React from 'react';
import { useQuery } from 'urql';
import { MetaQuery } from '../graphql/queries';
@ -6,8 +6,16 @@ import { MetaQuery } from '../graphql/queries';
export function AuthLayout({ children }: { children: React.ReactNode }) {
const [{ fetching, data }] = useQuery({ query: MetaQuery });
const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
const [isVerticalRes] = useMediaQuery('(max-height:600px)');
return (
<Flex flexWrap='wrap' h='100vh' bg='gray.100' alignItems='center' justifyContent='center' flexDirection='column'>
<Stack
h='100vh'
bg='gray.100'
alignItems='center'
justifyContent='center'
direction={['column', 'column']}
spacing={6}
>
<Flex alignItems='center'>
<Image src='https://authorizer.dev/images/logo.png' alt='logo' height='50' />
<Text fontSize='x-large' ml='3' letterSpacing='3'>
@ -27,6 +35,6 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
</Text>
</>
)}
</Flex>
</Stack>
);
}