Sign up visual adjustments

Author: draymond63

frontend/src/components/auth/Login.tsx

@@ -20,6 +20,7 @@ import {
   VStack,
   Input,
   Center,
+  Show,
   Spinner,
   Alert,
   AlertDescription,
@@ -406,7 +407,9 @@ const Login = (): React.ReactElement => {
           {getLoginForm(loginState)}
         </VStack>
       </Center>
-      <Image maxH="100vh" w="50vw" objectFit="cover" src={BackgroundImage} />
+      <Show above="md">
+        <Image width="50vw" h="100vh" objectFit="cover" src={BackgroundImage} />
+      </Show>
     </Flex>
   );
 };

frontend/src/components/auth/Signup.tsx

@@ -13,6 +13,7 @@ import {
   Flex,
   VStack,
   Image,
+  Show,
 } from "@chakra-ui/react";
 
 import authAPIClient from "../../APIClients/AuthAPIClient";
@@ -80,7 +81,7 @@ const Signup = (): React.ReactElement => {
   return (
     <Flex>
       <Center flex="1">
-        <VStack marginLeft="30vh" marginRight="30vh">
+        <VStack w="40rem" maxW="100vw" p="0 1rem">
           <Image
             height="13vh"
             marginBottom="2.5vh"
@@ -153,7 +154,7 @@ const Signup = (): React.ReactElement => {
                 value={town}
                 placeholder="Shaughnessy"
                 onChange={(event: React.FormEvent<HTMLInputElement>) =>
-                  setTown(event.currentTarget.value)
+                  setTown(event.currentTarget.value.toLowerCase())
                 }
                 marginBottom="2vh"
               />
@@ -168,7 +169,7 @@ const Signup = (): React.ReactElement => {
               <Input
                 type="password"
                 value={password}
-                placeholder="●●●●●●●●"
+                placeholder="Password"
                 onChange={(event: React.FormEvent<HTMLInputElement>) =>
                   setPassword(event.currentTarget.value)
                 }
@@ -185,7 +186,7 @@ const Signup = (): React.ReactElement => {
               <Input
                 type="password"
                 value={currentPassword}
-                placeholder="●●●●●●●●"
+                placeholder="Rewrite your password"
                 onChange={(event: React.FormEvent<HTMLInputElement>) =>
                   setCurrentPassword(event.currentTarget.value)
                 }
@@ -227,7 +228,9 @@ const Signup = (): React.ReactElement => {
           </Box>
         </VStack>
       </Center>
-      <Image width="50vw" objectFit="cover" src={BackgroundImage} />
+      <Show above="md">
+        <Image width="50vw" h="100vh" objectFit="cover" src={BackgroundImage} />
+      </Show>
     </Flex>
   );
 };