Skip to content

Commit fc16664

Browse files
jkestering-modusjkestering-modus
committed
Refactor ResetPassword and SignUp components for improved styling and functionality
- Updated ResetPasswordPage and SignUpPage to enhance layout and visual consistency. - Introduced new logo and background styling for both pages. - Refactored ResetPasswordForm and SignUpForm to include password guidelines and improved input handling. - Integrated i18n for user-facing text in ResetPassword and SignUp forms. - Added global input styles for consistent error handling across forms. - Enhanced user experience with toast notifications for successful registration.
1 parent f2e9fd8 commit fc16664

File tree

13 files changed

+683
-336
lines changed

13 files changed

+683
-336
lines changed

‎frontend/src/pages/Auth/ResetPassword/ResetPasswordPage.scss‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,47 @@
11
.ls-reset-password-page {
2-
&__container {
2+
--ion-background-color: var(--ion-color-background);
3+
4+
&__background {
5+
width: 100%;
6+
height: 100%;
37
display: flex;
48
flex-direction: column;
5-
height: 100%;
9+
align-items: center;
10+
padding: 2rem 1.5rem;
11+
background: var(--ion-color-background);
12+
}
13+
14+
&__logo-container {
15+
display: flex;
16+
align-items: center;
617
justify-content: center;
7-
background: radial-gradient(
8-
circle at 50% 50%,
9-
rgba(12, 15, 34, 0.8) 0%,
10-
rgba(32, 44, 75, 0.83) 77.64%,
11-
rgba(23, 33, 86, 0.6) 100%
12-
);
18+
margin-bottom: 2.5rem;
19+
}
20+
21+
&__logo {
22+
width: 3.5rem;
23+
height: auto;
24+
margin-right: 0.75rem;
25+
}
26+
27+
&__logo-text {
28+
color: #435FF0;
29+
font-size: 1.75rem;
30+
font-weight: 600;
31+
}
32+
33+
&__card {
34+
width: 100%;
35+
max-width: 30rem;
36+
background-color: white;
37+
border-radius: 1.5rem;
38+
padding: 2.5rem 2rem;
39+
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
1340
}
1441

1542
&__form {
1643
width: 100%;
17-
max-width: 31.25rem;
18-
margin: 0 auto;
44+
margin: 0;
1945
}
2046

2147
ion-content {

‎frontend/src/pages/Auth/ResetPassword/ResetPasswordPage.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { IonPage, IonContent } from '@ionic/react';
1+
import { IonPage, IonContent, IonImg } from '@ionic/react';
2+
import { useTranslation } from 'react-i18next';
23

34
import './ResetPasswordPage.scss';
45
import { BaseComponentProps } from 'common/components/types';
5-
import Container from 'common/components/Content/Container';
6+
import logo from 'assets/logo_ls.png';
67
import ProgressProvider from 'common/providers/ProgressProvider';
78
import ResetPasswordForm from './components/ResetPasswordForm';
8-
99
/**
1010
* Properties for the `ResetPasswordPage` component.
1111
*/
@@ -17,14 +17,22 @@ interface ResetPasswordPageProps extends BaseComponentProps {}
1717
* @returns {JSX.Element} JSX
1818
*/
1919
const ResetPasswordPage = ({ testid = 'page-reset-password' }: ResetPasswordPageProps): JSX.Element => {
20+
const { t } = useTranslation();
2021

2122
return (
2223
<IonPage className="ls-reset-password-page" data-testid={testid}>
2324
<ProgressProvider>
2425
<IonContent fullscreen>
25-
<Container className="ls-reset-password-page__container" fixed>
26-
<ResetPasswordForm className="ls-reset-password-page__form" />
27-
</Container>
26+
<div className="ls-reset-password-page__background">
27+
<div className="ls-reset-password-page__logo-container">
28+
<IonImg src={logo} alt="Logo" className="ls-signup-page__logo" />
29+
<span className="ls-signup-page__logo-text">{t('app.name', { ns: 'common' })}</span>
30+
</div>
31+
32+
<div className="ls-reset-password-page__card">
33+
<ResetPasswordForm className="ls-reset-password-page__form" />
34+
</div>
35+
</div>
2836
</IonContent>
2937
</ProgressProvider>
3038
</IonPage>

‎frontend/src/pages/Auth/ResetPassword/components/ResetPasswordForm.scss‎

Lines changed: 89 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,120 @@
11
.ls-reset-password-form {
2-
padding: 1rem;
3-
background-color: #fafaff;
4-
border-radius: 27px;
5-
box-shadow: 0 0 40px rgba(215, 219, 236, 0.32);
6-
padding: 2rem;
2+
width: 100%;
73

8-
&__input {
9-
margin-bottom: 1.5rem;
4+
&__title {
5+
font-size: 1.75rem;
6+
font-weight: 600;
7+
color: #313e4c;
8+
text-align: center;
9+
margin-bottom: 0.5rem;
10+
}
11+
12+
&__subtitle {
13+
font-size: 1rem;
14+
color: #5c6d80;
15+
text-align: center;
16+
margin-bottom: 2rem;
17+
}
18+
19+
&__field {
20+
margin-bottom: 1.25rem;
21+
}
22+
23+
&__label {
24+
display: block;
25+
font-size: 0.875rem;
26+
color: #313e4c;
27+
margin-bottom: 0.5rem;
28+
font-weight: 500;
29+
}
1030

11-
ion-input {
12-
--border-radius: 12px;
13-
--border-color: #313C4C;
14-
--padding-start: 16px;
15-
--padding-end: 16px;
16-
--padding-top: 12px;
17-
--padding-bottom: 12px;
18-
font-size: 14px;
31+
&__input {
32+
width: 100%;
33+
border: 1px solid #838b94;
34+
border-radius: 0.75rem;
35+
--padding-start: 1rem;
36+
--padding-end: 1rem;
37+
--padding-top: 0.75rem;
38+
--padding-bottom: 0.75rem;
39+
--highlight-color: var(--ion-color-primary);
40+
font-size: 0.875rem;
41+
height: 3rem;
42+
43+
&::part(native) {
44+
padding: 0;
1945
}
2046
}
2147

2248
&__button {
2349
margin-top: 1.5rem;
24-
--background: #4361F0;
25-
--border-radius: 10px;
26-
height: 60px;
27-
font-size: 18px;
50+
--border-radius: 0.75rem;
51+
--padding-top: 1.125rem;
52+
--padding-bottom: 1.125rem;
2853
font-weight: 600;
54+
--background: #435ff0;
55+
--background-activated: #3a56d4;
56+
--background-hover: #3a56d4;
57+
font-size: 1.125rem;
58+
height: 3.5rem;
2959
letter-spacing: 0.36px;
60+
box-shadow: 0 0.5rem 1rem rgba(67, 95, 240, 0.12);
3061
text-transform: none;
31-
box-shadow: 0 9.5px 12.3px rgba(67, 97, 240, 0.08);
32-
}
33-
34-
&__message {
35-
margin-bottom: 1.5rem;
36-
display: flex;
37-
flex-direction: column;
38-
gap: 0.5rem;
39-
text-align: center;
40-
margin-top: 1rem;
41-
}
42-
43-
&__email {
44-
color: var(--ion-color-dark);
62+
63+
&:disabled {
64+
--background: #d7dbec;
65+
--color: #abbccd;
66+
}
4567
}
46-
47-
&__success {
48-
margin-bottom: 1rem;
68+
69+
&__signup-login {
70+
margin-top: 1.75rem;
4971
text-align: center;
50-
}
72+
font-size: 0.875rem;
73+
color: #000000;
74+
font-weight: 600;
5175

52-
&__icon {
53-
width: 80px;
54-
height: 80px;
55-
margin: 0 auto;
56-
background-color: rgba(252, 75, 149, 0.05);
57-
border-radius: 50%;
58-
display: flex;
59-
align-items: center;
60-
justify-content: center;
61-
margin-bottom: 1.5rem;
76+
a {
77+
color: #435ff0;
78+
text-decoration: none;
79+
font-weight: 600;
6280

63-
ion-icon {
64-
color: #FC4B95;
65-
font-size: 48px;
81+
&:hover {
82+
text-decoration: underline;
83+
}
6684
}
6785
}
6886

69-
&__title {
70-
font-size: 18px;
71-
font-weight: 600;
72-
color: #313C4C;
87+
&__success {
88+
background-color: rgba(54, 166, 86, 0.08);
89+
border: 1px solid #36a656;
90+
border-radius: 0.5rem;
91+
padding: 1rem;
92+
display: flex;
93+
align-items: flex-start;
94+
margin: 1rem 0;
7395
text-align: center;
74-
margin-bottom: 1rem;
7596
}
7697

7798
&__back-link {
7899
text-align: center;
79100
margin-top: 2rem;
80101

81102
a {
82-
color: #313C4C;
103+
color: #313e4c;
83104
text-decoration: none;
84-
font-size: 14px;
105+
font-size: 0.875rem;
106+
display: flex;
107+
align-items: center;
108+
justify-content: center;
109+
font-weight: 500;
110+
111+
ion-icon {
112+
margin-right: 0.25rem;
113+
font-size: 1rem;
114+
}
85115

86-
span {
87-
color: #4361F0;
88-
font-weight: 600;
116+
&:hover {
117+
text-decoration: underline;
89118
}
90119
}
91120
}

0 commit comments

Comments
 (0)