fix(auth): center home and login layouts with full viewport height

- Remove content margins when logged out in App
- Switch Home to minH 100dvh full width
- Center LoginForm vertically in full-height flex layout
- Tidy Create Game button padding and border

src/App.tsx

@@ -58,7 +58,7 @@ function App() {
     <>
       <ToastContainer position='bottom-right' hideProgressBar />
       {loggedIn ? <Header /> : ''}
-      <Box mt={loadedPreferences.get().stickyNav ? "20" : "4"} mb={'4'}>
+      <Box mt={loggedIn ? (loadedPreferences.get().stickyNav ? "20" : "4") : "0"} mb={loggedIn ? '4' : '0'}>
         {/*<Box mt={loadedPreferences.get().stickyNav ? isSmallerThan768 ? "15%" : "9%" : "4"} mb={'4'}>*/}
         <Routes>
           <Route path='/*' element={loggedIn ? <Navigate to='games' /> : <Home />} />

src/components/Header.tsx

@@ -191,7 +191,8 @@ export default function NavBar() {
                         colorPalette={'blue'}
                         size={'md'}
                         asChild
-                        w={'70%'}
+                        px={4}
+                        borderWidth={0}
                       >
                         <RouteLink to="/games/create"><LuPlus/><Text mt="1">Create Game</Text></RouteLink>
                       </Button>

src/components/Home.tsx

@@ -4,7 +4,7 @@ import { VStack, Image, Button, Heading, Flex, Center } from '@chakra-ui/react'
 
 const Home = () => {
   return (
-    <Flex align={'center'} bgImage={'linear-gradient(to bottom right, #314755, #26a0da)'} height={'100vh'}>
+    <Flex align={'center'} bgImage={'linear-gradient(to bottom right, #314755, #26a0da)'} minH={'100dvh'} w={'100%'}>
       <Center w={'100%'}>
         <VStack gap={4} align={'center'} margin={'auto'}>
           <Image src="/assets/Logo.svg" alt="Games Database Logo"/>

src/components/authComponents/LoginForm.tsx

@@ -5,7 +5,7 @@ import { login } from '../../stateManagement/userState'
 import {
   Container,
   Button,
-  Input, HStack, Center,
+  Input, Center, Flex,
 } from '@chakra-ui/react'
 import {Field} from '../ui/field'
 import {useColorModeValue} from '../ui/color-mode'
@@ -35,7 +35,8 @@ export default function LoginForm() {
   )
 
   return (
-    <Container style={{ marginTop: '7rem', paddingBottom: '5rem' }}>
+    <Flex minH={'100dvh'} w={'100%'} align={'center'} justify={'center'}>
+    <Container maxW={'md'} w={'full'} py={'4'}>
       <form onSubmit={onSubmit}>
         <Field label="Email" invalid={Boolean(errors.email)} errorText={errors.email?.type === 'required' ? errors.email.message?.toString() : errors.email?.type === 'pattern' ? 'Invalid Email Address' : undefined} mb={'3'}>
           <Input
@@ -65,8 +66,7 @@ export default function LoginForm() {
             {...register('password', { required: 'You must specify a password' })}
           />
         </Field>
-        <br/>
-        <HStack>
+        <Center mt={'6'}>
           <Button
             type="submit"
             colorPalette="blue"
@@ -75,11 +75,12 @@ export default function LoginForm() {
           >
             Submit
           </Button>
-        </HStack>
+        </Center>
         <Center mt={'5rem'}>
           <Button asChild variant="outline"><Link to={'/forgotpassword'}>Forgot Password</Link></Button>
         </Center>
       </form>
     </Container>
+    </Flex>
   )
 }