Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overflow gets cancelled on login | BUG #184

Merged
merged 10 commits into from
Nov 26, 2023
Merged

Overflow gets cancelled on login | BUG #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
bff7367
init
achandrabalan Oct 20, 2023
b871717
fixing root cause
achandrabalan Oct 22, 2023
9914726
clean up
achandrabalan Oct 22, 2023
47cf123
remove unused props
achandrabalan Oct 22, 2023
d95a69a
fixing overflow issues
achandrabalan Oct 27, 2023
54d094a
merge conflicts
achandrabalan Nov 5, 2023
25601d8
removing absolute position abuse
achandrabalan Nov 5, 2023
b836494
login page width adjustment
achandrabalan Nov 9, 2023
4b80b30
consistency changes
achandrabalan Nov 16, 2023
79d6559
fixed merge conflicts
achandrabalan Nov 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions frontend/src/components/forms/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
129 changes: 67 additions & 62 deletions frontend/src/components/forms/Signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
achandrabalan marked this conversation as resolved.
Show resolved Hide resolved
<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">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/theme/forms/inputStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading