From d9b49ca93284670d3b2048ad4832ef79757fd6d4 Mon Sep 17 00:00:00 2001
From: "akash.dutta" <akash.dutta@glosity.club>
Date: Sat, 7 May 2022 22:18:04 +0530
Subject: [PATCH] login page responsive

---
 dashboard/src/layouts/AuthLayout.tsx | 29 +++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/dashboard/src/layouts/AuthLayout.tsx b/dashboard/src/layouts/AuthLayout.tsx
index dbe51ff..4c2a5c6 100644
--- a/dashboard/src/layouts/AuthLayout.tsx
+++ b/dashboard/src/layouts/AuthLayout.tsx
@@ -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 { useQuery } from 'urql';
 import { MetaQuery } from '../graphql/queries';
 
 export function AuthLayout({ children }: { children: React.ReactNode }) {
 	const [{ fetching, data }] = useQuery({ query: MetaQuery });
+	  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
 	return (
 		<Flex
-			flexWrap="wrap"
-			h="100%"
-			bg="gray.100"
-			alignItems="center"
-			justifyContent="center"
-			flexDirection="column"
+			 flexWrap="wrap"
+             h="100%"
+             bg="gray.100"
+             alignItems="center"
+             justifyContent="center"
+             flexDirection="column"
 		>
 			<Flex alignItems="center">
 				<Image
@@ -20,7 +21,10 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
 					alt="logo"
 					height="50"
 				/>
-				<Text fontSize="x-large" ml="3" letterSpacing="3">
+				<Text    
+				    fontSize={isNotSmallerScreen ? "x-large" : "large"}
+                    ml="3"
+                   letterSpacing="3">
 					AUTHORIZER
 				</Text>
 			</Flex>
@@ -29,7 +33,14 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
 				<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}
 					</Box>
 					<Text color="gray.600" fontSize="sm">