Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Commit 0efd659

Browse files
kartik-gupta-ijkartik-gupta-ij
committed
Login Page redesign
1 parent ea2807e commit 0efd659

File tree

2 files changed

+94
-65
lines changed

2 files changed

+94
-65
lines changed

‎src/pages/Login/index.tsx‎

Lines changed: 81 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -13,75 +13,93 @@ const Login: FC = () => {
1313
const { getInputProps, isValid, loading, handleSubmit, error } = useLoginForm();
1414

1515
const { classes } = useLoginStyles();
16-
const { container, formContainer, titleStyle, formInput, loginBtnStyle, errorStyle } = classes;
16+
const { container, formContainer, titleStyle, formInput, loginBtnStyle, errorStyle, sideContainer } = classes;
1717

1818
return (
19-
<Transition mounted transition="fade" duration={10000} timingFunction="ease">
20-
{(styles) => (
21-
<Box style={styles} className={container}>
22-
<form className={formContainer} onSubmit={handleSubmit()}>
23-
<Loading visible={loading} variant="oval" position="absolute" />
24-
<Image maw={230} mx="auto" src={logo} alt="Parseable Logo" />
25-
<Text mt="xl" className={titleStyle}>
26-
Welcome to Parseable
27-
</Text>
28-
29-
{/* <Text mt="xs" className={descriptionStyle}>
30-
Add your credentials to login
31-
</Text> */}
32-
33-
{error && (
34-
<Text mt="xs" className={errorStyle}>
35-
{error}
19+
<Box
20+
sx={{
21+
display: 'flex',
22+
flexDirection: 'row',
23+
width: '100vw',
24+
}}>
25+
<Box className={sideContainer}>
26+
<Image width={300} src={logo} />
27+
<Box
28+
sx={{
29+
height: '100%',
30+
display: 'flex',
31+
flexDirection: 'column',
32+
justifyContent: 'center',
33+
alignItems: 'center',
34+
}}>
35+
<Text size={'xl'}>Find revenue opportunities in your open source data</Text>
36+
<Text color="dimmed" size={'md'}>
37+
Centralize community, product, and customer data to understand which companies are engaging with your open
38+
source project.
39+
</Text>
40+
</Box>
41+
</Box>
42+
<Transition mounted transition="fade" duration={10000} timingFunction="ease">
43+
{(styles) => (
44+
<Box style={styles} className={container}>
45+
<form className={formContainer} onSubmit={handleSubmit()}>
46+
<Loading visible={loading} variant="oval" position="absolute" />
47+
<Text mt="xl" className={titleStyle} >
48+
👋 Welcome back
3649
</Text>
37-
)}
38-
<TextInput
39-
mt="xl"
40-
className={formInput}
41-
placeholder="J.Doe"
42-
label="Username"
43-
withAsterisk
44-
{...getInputProps('username')}
45-
/>
46-
<PasswordInput
47-
mt="xl"
48-
className={formInput}
49-
placeholder="**********"
50-
label="Password"
51-
withAsterisk
52-
{...getInputProps('password')}
53-
/>
54-
<Button type="submit" my="xl" className={loginBtnStyle} disabled={!isValid()}>
55-
Login
56-
</Button>
50+
<Text mt="xl" size={"sm"} color="dimmed">Please enter your credentials</Text>
5751

58-
{/* <ForgotPassword /> */}
52+
{error && (
53+
<Text mt="xs" className={errorStyle}>
54+
{error}
55+
</Text>
56+
)}
57+
<TextInput
58+
mt="xl"
59+
className={formInput}
60+
placeholder="J.Doe"
61+
label="Username"
62+
withAsterisk
63+
{...getInputProps('username')}
64+
/>
65+
<PasswordInput
66+
mt="xl"
67+
className={formInput}
68+
placeholder="**********"
69+
label="Password"
70+
withAsterisk
71+
{...getInputProps('password')}
72+
/>
73+
<Button type="submit" my="xl" className={loginBtnStyle} disabled={!isValid()}>
74+
Login
75+
</Button>
5976

60-
<Divider label=" Or " labelPosition="center" my="md" sx={{ width: '100%' }} />
77+
{/* <ForgotPassword /> */}
6178

62-
<Button
63-
mt={rem(10)}
64-
component="a"
65-
href={`${baseURL}api/v1/o/login?redirect=${window.location.origin}`}
66-
variant="outline"
67-
color='brandPrimary.0'
68-
69-
sx={({ colors }) => ({
70-
color: colors.brandPrimary[0],
71-
borderColor: colors.brandPrimary[0],
72-
'&:hover': {
73-
borderColor: colors.brandSecondary[0],
74-
color: colors.brandSecondary[0],
75-
background: 'transparent',
76-
},
77-
})}
78-
>
79-
Login with OAuth
80-
</Button>
81-
</form>
82-
</Box>
83-
)}
84-
</Transition>
79+
<Divider label=" Or " labelPosition="center" my="md" sx={{ width: '100%' }} />
80+
81+
<Button
82+
mt={rem(10)}
83+
component="a"
84+
href={`${baseURL}api/v1/o/login?redirect=${window.location.origin}`}
85+
variant="outline"
86+
color="brandPrimary.0"
87+
sx={({ colors }) => ({
88+
color: colors.brandPrimary[0],
89+
borderColor: colors.brandPrimary[0],
90+
'&:hover': {
91+
borderColor: colors.brandSecondary[0],
92+
color: colors.brandSecondary[0],
93+
background: 'transparent',
94+
},
95+
})}>
96+
Login with OAuth
97+
</Button>
98+
</form>
99+
</Box>
100+
)}
101+
</Transition>
102+
</Box>
85103
);
86104
};
87105

‎src/pages/Login/styles.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// import loginBg from '@/assets/images/login-bg.svg';
2-
import { createStyles } from '@mantine/core';
2+
import { createStyles, rem } from '@mantine/core';
33

44
export const useLoginStyles = createStyles((theme) => {
55
const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme;
@@ -11,6 +11,17 @@ export const useLoginStyles = createStyles((theme) => {
1111
const defaultRadius = radius[theme.defaultRadius as string];
1212

1313
return {
14+
sideContainer:{
15+
display: 'flex',
16+
flexDirection: 'column',
17+
width: '30vw',
18+
background: 'radial-gradient(circle at 78.7% 87.8%, rgb(250, 250, 250) 70%, rgb(225, 234, 238) 60%)',
19+
padding: rem(20),
20+
[theme.fn.smallerThan('md')]: {
21+
display: 'none',
22+
},
23+
},
24+
1425
container: {
1526
position: 'relative',
1627
flex: 1,
@@ -51,7 +62,7 @@ export const useLoginStyles = createStyles((theme) => {
5162
titleStyle: {
5263
color: pColor,
5364
fontWeight: fontWeights.bold,
54-
fontSize: fontSizes.sm,
65+
fontSize: fontSizes.xl,
5566
},
5667

5768
descriptionStyle: {

0 commit comments

Comments
 (0)