Overflow gets cancelled on login | BUG (#184)

* init * fixing root cause * clean up * remove unused props * fixing overflow issues * removing absolute position abuse * login page width adjustment * consistency changes
uwblueprint · Nov 26, 2023 · c0d7a1d · c0d7a1d
1 parent d710f08
commit c0d7a1d
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 76 deletions.
diff --git a/frontend/src/components/forms/Login.tsx b/frontend/src/components/forms/Login.tsx
@@ -103,18 +103,16 @@ const Login = ({
   }
 
   if (toggle) {
-    // Lock scroll
-    document.body.style.overflow = "hidden";
     return (
-      <Flex h="100vh">
+      <Flex>
         <Box w="47%">
           <Flex
-            marginTop="270px"
+            height="100vh"
             display="flex"
             align="center"
             justify="center"
           >
-            <Flex width="76%" align="flex-start" direction="column" gap="28px">
+            <Flex width="80%" align="flex-start" direction="column" gap="28px">
               <Text variant="login" paddingBottom="12px">
                 Log In
               </Text>
@@ -153,14 +151,16 @@ const Login = ({
               >
                 Log In
               </Button>
-              <Flex paddingTop="29px" alignContent="center">
-                <Text variant="loginSecondary" paddingRight="17px">
-                  Not a member yet?
-                </Text>
-                <Text variant="loginTertiary" onClick={onSignUpClick}>
-                  Sign Up Now
-                </Text>
-              </Flex>
+              <Box w="80%">
+                <Flex gap="10px">
+                  <Text variant="loginSecondary" paddingRight="17px">
+                    Not a member yet?
+                  </Text>
+                  <Text variant="loginTertiary" onClick={onSignUpClick}>
+                    Sign Up Now
+                  </Text>
+                </Flex>
+              </Box>
             </Flex>
           </Flex>
         </Box>

diff --git a/frontend/src/components/forms/Signup.tsx b/frontend/src/components/forms/Signup.tsx
@@ -143,84 +143,89 @@ const Signup = ({
     return <Redirect to={HOME_PAGE} />;
   }
 
-  if (toggle) {
+  if (toggle) {   
     return (
       <Flex h="100vh">
         <Box w="47%">
-          <Flex 
-            marginTop="172px" 
-            display="flex" 
-            align="center" 
-            justify="center"
+          <Flex
+            h="100%"
+            direction="column"
+            justifyContent="center"
+            alignItems="center"
+            gap="28px"
           >
-            <Flex
-              width="76%"
-              align="flex-start"
-              direction="column"
-              gap="28px"
-            >
-              <Text variant="login" paddingBottom="12px">
-                Sign Up
-              </Text>
-              <Input
-                variant="login"
-                placeholder="Your first name"
-                value={firstName}
-                onChange={(event) => setFirstName(event.target.value)}
-              />
-              <Input
-                variant="login"
-                placeholder="Your last name"
-                value={lastName}
-                onChange={(event) => setLastName(event.target.value)}
-              />
-              <FormControl isRequired isInvalid={emailError}>
+              <Box w="80%" textAlign="left">
+                <Text variant="login">
+                  Sign Up
+                </Text>
+              </Box>
+              <Box w="80%">
                 <Input
                   variant="login"
-                  placeholder="Your email"
-                  value={email}
-                  onChange={handleEmailChange}
+                  placeholder="Your first name"
+                  value={firstName}
+                  onChange={(event) => setFirstName(event.target.value)}
                 />
-                <FormErrorMessage>{emailErrorStr}</FormErrorMessage>
-              </FormControl>
-              <FormControl isRequired isInvalid={passwordError}>
+              </Box>
+              <Box w="80%">
                 <Input
                   variant="login"
-                  type="password"
-                  placeholder="Your password"
-                  value={password}
-                  onChange={handlePasswordChange}
+                  placeholder="Your last name"
+                  value={lastName}
+                  onChange={(event) => setLastName(event.target.value)}
                 />
-                <FormErrorMessage>{passwordErrorStr}</FormErrorMessage>
-              </FormControl>
-              <Button
-                variant="login"
-                disabled={isCreateAccountBtnDisabled()}
-                _hover={
-                  email && password && firstName && lastName
-                    ? {
-                        background: "teal.500",
-                        transition:
-                          "transition: background-color 0.5s ease !important",
-                      }
-                    : {}
-                }
-                onClick={onSignupClick}
-              >
-                Create Account
-              </Button>
-              <Flex
-                paddingTop="29px"
-                alignContent="center"
-              >
-                <Text variant="loginSecondary" paddingRight="17px">
+              </Box>
+              <Box w="80%">
+                <FormControl isRequired isInvalid={emailError}>
+                  <Input
+                    variant="login"
+                    placeholder="Your email"
+                    value={email}
+                    onChange={handleEmailChange}
+                  />
+                  <FormErrorMessage>{emailErrorStr}</FormErrorMessage>
+                </FormControl>
+              </Box>
+              <Box w="80%">
+                <FormControl isRequired isInvalid={passwordError}>
+                  <Input
+                    variant="login"
+                    type="password"
+                    placeholder="Your password"
+                    value={password}
+                    onChange={handlePasswordChange}
+                  />
+                  <FormErrorMessage>{passwordErrorStr}</FormErrorMessage>
+                </FormControl>
+              </Box>
+              <Box w="80%">
+                <Button
+                  variant="login"
+                  disabled={isCreateAccountBtnDisabled()}
+                  _hover={
+                    email && password && firstName && lastName
+                      ? {
+                          background: "teal.500",
+                          transition:
+                            "transition: background-color 0.5s ease !important",
+                        }
+                      : {}
+                  }
+                  onClick={onSignupClick}
+                >
+                  Create Account
+                </Button>
+              </Box>
+            <Box w="80%">
+              <Flex gap="10px">
+                <Text variant="loginSecondary" paddingRight="1.1vw">
                   Already have an account?
                 </Text>
                 <Text variant="loginTertiary" onClick={onLogInClick}>
                   Log In Now
                 </Text>
               </Flex>
-            </Flex>
+            </Box>
           </Flex>
         </Box>
         <Box flex="1" bg="teal.400">

diff --git a/frontend/src/theme/forms/inputStyles.tsx b/frontend/src/theme/forms/inputStyles.tsx
@@ -39,7 +39,7 @@ const Input: ComponentStyleConfig = {
         border: "1px solid",
         borderColor: "gray.100",
         borderRadius: "4px",
-        height: "7vh",
+        height: "8vh",
         fontWeight: "400",
         fontSize: "22px",
         fontFamily: "DM Sans",