From 38f28586ae6e68aa9b48e6686b1e54668136f8df Mon Sep 17 00:00:00 2001
From: isra el <vernu1997@gmail.com>
Date: Tue, 16 May 2023 11:13:10 +0300
Subject: [PATCH] chore: improve auth pages layout

---
 web/components/Navbar.tsx |  2 +-
 web/pages/login.tsx       | 43 ++++++++++++++++++++---------------
 web/pages/register.tsx    | 48 +++++++++++++++++++++++----------------
 3 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/web/components/Navbar.tsx b/web/components/Navbar.tsx
index e7f65e4..02ea415 100644
--- a/web/components/Navbar.tsx
+++ b/web/components/Navbar.tsx
@@ -27,7 +27,7 @@ export default function Navbar() {
 
   return (
     <>
-      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
+      <Box bg={useColorModeValue('gray.100', 'gray.700')} px={4} shadow='lg' mb={1}>
         <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
           <Link href='/' passHref>
             <Flex alignItems={'center'}>
diff --git a/web/pages/login.tsx b/web/pages/login.tsx
index 9e46515..c647f3c 100644
--- a/web/pages/login.tsx
+++ b/web/pages/login.tsx
@@ -55,17 +55,16 @@ export default function LoginPage() {
 
   return (
     <Flex
-      minH={'100vh'}
+      minH={'90vh'}
       align={'center'}
       justify={'center'}
       bg={useColorModeValue('gray.50', 'gray.800')}
     >
       <Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
         <Stack align={'center'}>
-          <Heading fontSize={'4xl'} textAlign={'center'}>
-            Login
+          <Heading fontSize={'2xl'} textAlign={'center'}>
+            Login to access your dashboard
           </Heading>
-          <Text fontSize={'lg'} color={'gray.600'}></Text>
         </Stack>
         <Box
           rounded={'lg'}
@@ -113,20 +112,28 @@ export default function LoginPage() {
                 {authState.loading ? 'Please Wait...' : 'Login'}
               </Button>
             </Stack>
-            <GoogleLogin
-              onSuccess={({ credential: idToken }) => {
-                dispatch(loginWithGoogle({ idToken }))
-              }}
-              onError={() => {
-                toast({
-                  title: 'Error',
-                  description: 'Something went wrong',
-                  status: 'error',
-                })
-              }}
-              useOneTap={!authState.user}
-              width='100%'
-            />
+
+            <Box display='flex' justifyContent='center'>
+              <GoogleLogin
+                onSuccess={({ credential: idToken }) => {
+                  dispatch(loginWithGoogle({ idToken }))
+                }}
+                onError={() => {
+                  toast({
+                    title: 'Error',
+                    description: 'Something went wrong',
+                    status: 'error',
+                  })
+                }}
+                useOneTap={!authState.user}
+                width='300'
+                size='large'
+                shape='pill'
+                locale='en'
+                theme='outline'
+                text='continue_with'
+              />
+            </Box>
             <Stack pt={6}>
               <Text align={'center'}>
                 Don&apos;t have an account?{' '}
diff --git a/web/pages/register.tsx b/web/pages/register.tsx
index 621fdba..c9b3649 100644
--- a/web/pages/register.tsx
+++ b/web/pages/register.tsx
@@ -53,19 +53,16 @@ export default function RegisterPage() {
 
   return (
     <Flex
-      minH={'100vh'}
+      minH={'90vh'}
       align={'center'}
       justify={'center'}
       bg={useColorModeValue('gray.50', 'gray.800')}
     >
       <Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
         <Stack align={'center'}>
-          <Heading fontSize={'4xl'} textAlign={'center'}>
-            Register
+          <Heading fontSize={'2xl'} textAlign={'center'}>
+            Register now and start using your android device as an SMS Gateway
           </Heading>
-          <Text fontSize={'lg'} color={'gray.600'}>
-            and start using ur phone as an SMS Gateway
-          </Text>
         </Stack>
         <Box
           rounded={'lg'}
@@ -117,20 +114,31 @@ export default function RegisterPage() {
                 {authState.loading ? 'Please wait...' : 'Register'}
               </Button>
             </Stack>
-            <GoogleLogin
-              onSuccess={({ credential: idToken }) => {
-                dispatch(loginWithGoogle({ idToken }))
-              }}
-              onError={() => {
-                toast({
-                  title: 'Error',
-                  description: 'Something went wrong',
-                  status: 'error',
-                })
-              }}
-              useOneTap={true}
-              width='100%'
-            />
+
+            <Heading fontSize={'md'} textAlign={'center'}>
+              OR
+            </Heading>
+            <Box display='flex' justifyContent='center'>
+              <GoogleLogin
+                onSuccess={({ credential: idToken }) => {
+                  dispatch(loginWithGoogle({ idToken }))
+                }}
+                onError={() => {
+                  toast({
+                    title: 'Error',
+                    description: 'Something went wrong',
+                    status: 'error',
+                  })
+                }}
+                useOneTap={!authState.user}
+                width='300'
+                size='large'
+                shape='pill'
+                locale='en'
+                theme='outline'
+                text='continue_with'
+              />
+            </Box>
             <Stack pt={6}>
               <Text align={'center'}>
                 Already a user? <Link href='/login'>Login</Link>