Skip to content

Commit 676bec1

Browse files
KirillKirillKirillKirill
committed
refactor: rework PageCard component and use it on different pages
1 parent 064f3d3 commit 676bec1

11 files changed

Lines changed: 65 additions & 280 deletions

File tree

‎packages/apps/human-app/frontend/src/modules/signin/worker/sign-in.page.tsx‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { useEffect } from 'react';
22
import { t } from 'i18next';
33
import { useNavigate } from 'react-router-dom';
4-
import { Box, Grid, Paper, Typography } from '@mui/material';
4+
import { Box, Grid, Typography } from '@mui/material';
5+
56
import { getErrorMessageForError } from '@/shared/errors';
67
import { ApiClientError } from '@/api';
78
import { useSignIn } from './use-sign-in';
89
import { SignInForm } from './sign-in-form';
9-
1010
import signInImage from '@/assets/background-images/signin-background.png';
1111
import {
1212
TopNotificationType,
@@ -17,6 +17,7 @@ import { useAuth } from '@/modules/auth/hooks/use-auth';
1717
import { routerPaths } from '@/router/router-paths';
1818
import { useIsUserVerified } from '@/shared/hooks';
1919
import { browserAuthProvider } from '@/shared/contexts/browser-auth-provider';
20+
import { PageCard } from '@/shared/components/ui/page-card';
2021

2122
function formattedSignInErrorMessage(
2223
unknownError: unknown
@@ -77,24 +78,10 @@ export function SignInPage() {
7778
};
7879

7980
return (
80-
<Paper
81-
elevation={0}
81+
<PageCard
8282
sx={{
83-
display: 'flex',
84-
flex: 1,
85-
alignSelf: 'stretch',
8683
alignItems: 'center',
8784
justifyContent: 'center',
88-
my: { xs: 0, md: 4 },
89-
borderRadius: '30px',
90-
borderBottomLeftRadius: { xs: 0, md: '30px' },
91-
borderBottomRightRadius: { xs: 0, md: '30px' },
92-
border: { xs: 'none', md: '1px solid' },
93-
borderColor: (theme) => ({
94-
xs: 'none',
95-
md: theme.palette.border.main,
96-
}),
97-
overflow: 'hidden',
9885
}}
9986
>
10087
<Grid
@@ -158,6 +145,6 @@ export function SignInPage() {
158145
/>
159146
</Grid>
160147
</Grid>
161-
</Paper>
148+
</PageCard>
162149
);
163150
}

‎packages/apps/human-app/frontend/src/modules/signin/worker/verify-user.page.tsx‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { useEffect } from 'react';
22
import { Navigate, useNavigate } from 'react-router-dom';
3-
import { Paper, Stack } from '@mui/material';
3+
import { Stack } from '@mui/material';
44

55
import { useAuth } from '@/modules/auth/hooks/use-auth';
66
import { KycStatus } from '@/modules/worker/profile/types';
77
import { routerPaths } from '@/router/router-paths';
88
import { useIsUserVerified } from '@/shared/hooks';
99
import { VerificationFlow } from './verification-flow';
1010
import { Loader } from '@/shared/components/ui/loader';
11+
import { PageCard } from '@/shared/components/ui/page-card';
1112

1213
export function VerifyUserPage() {
1314
const navigate = useNavigate();
@@ -43,27 +44,13 @@ export function VerifyUserPage() {
4344
}
4445

4546
return (
46-
<Paper
47-
elevation={0}
47+
<PageCard
4848
sx={{
49-
display: 'flex',
50-
flex: 1,
51-
alignSelf: 'stretch',
5249
alignItems: {
5350
xs: 'flex-start',
5451
md: 'center',
5552
},
5653
justifyContent: 'center',
57-
my: { xs: 0, md: 4 },
58-
borderRadius: '30px',
59-
borderBottomLeftRadius: { xs: 0, md: '30px' },
60-
borderBottomRightRadius: { xs: 0, md: '30px' },
61-
border: { xs: 'none', md: '1px solid' },
62-
borderColor: (theme) => ({
63-
xs: 'none',
64-
md: theme.palette.border.main,
65-
}),
66-
overflow: 'hidden',
6754
}}
6855
>
6956
{isLoading ? (
@@ -81,6 +68,6 @@ export function VerifyUserPage() {
8168
isKycApproved={user?.kyc_status === KycStatus.APPROVED}
8269
/>
8370
)}
84-
</Paper>
71+
</PageCard>
8572
);
8673
}

‎packages/apps/human-app/frontend/src/modules/signup/worker/views/sign-up-worker.page.tsx‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
22
import { FormProvider, useForm } from 'react-hook-form';
33
import { Link as RouterLink, useNavigate } from 'react-router-dom';
44
import { zodResolver } from '@hookform/resolvers/zod';
5-
import { Box, Divider, Grid, Link, Paper, Typography } from '@mui/material';
5+
import { Box, Divider, Grid, Link, Typography } from '@mui/material';
66
import { Trans } from 'react-i18next';
77
import { t } from 'i18next';
88

@@ -23,6 +23,7 @@ import {
2323
TopNotificationType,
2424
useNotification,
2525
} from '@/shared/hooks/use-notification';
26+
import { PageCard } from '@/shared/components/ui/page-card';
2627

2728
function handleSignupError(unknownError: unknown) {
2829
if (unknownError instanceof ApiClientError && unknownError.status === 409) {
@@ -65,23 +66,7 @@ export function SignUpPage() {
6566
};
6667

6768
return (
68-
<Paper
69-
elevation={0}
70-
sx={{
71-
display: 'flex',
72-
alignSelf: 'stretch',
73-
my: { xs: 0, md: 4 },
74-
borderRadius: '30px',
75-
borderBottomLeftRadius: { xs: 0, md: '30px' },
76-
borderBottomRightRadius: { xs: 0, md: '30px' },
77-
border: { xs: 'none', md: '1px solid' },
78-
borderColor: (theme) => ({
79-
xs: 'none',
80-
md: theme.palette.border.main,
81-
}),
82-
overflow: 'hidden',
83-
}}
84-
>
69+
<PageCard>
8570
<Grid
8671
container
8772
sx={{
@@ -244,6 +229,6 @@ export function SignUpPage() {
244229
/>
245230
</Grid>
246231
</Grid>
247-
</Paper>
232+
</PageCard>
248233
);
249234
}

‎packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-form-container.tsx‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { useEffect } from 'react';
22
import { Trans, useTranslation } from 'react-i18next';
33
import { useNavigate } from 'react-router-dom';
44
import { FormProvider } from 'react-hook-form';
5-
import { Box, Paper, Stack, Typography } from '@mui/material';
5+
import { Box, Stack, Typography } from '@mui/material';
66

7-
import { PageCardLoader } from '@/shared/components/ui/page-card';
7+
import { PageCard, PageCardLoader } from '@/shared/components/ui/page-card';
88
import { getErrorMessageForError } from '@/shared/errors';
99
import {
1010
TopNotificationType,
@@ -53,26 +53,10 @@ export function EmailVerificationFormContainer() {
5353
}
5454

5555
return (
56-
<Paper
57-
elevation={0}
56+
<PageCard
5857
sx={{
59-
display: 'flex',
60-
alignSelf: 'stretch',
61-
flex: 1,
6258
justifyContent: 'center',
6359
alignItems: 'center',
64-
my: { xs: 0, md: 4 },
65-
py: { xs: 8, md: 0 },
66-
px: { xs: 2, md: 0 },
67-
borderRadius: '30px',
68-
borderBottomLeftRadius: { xs: 0, md: '30px' },
69-
borderBottomRightRadius: { xs: 0, md: '30px' },
70-
border: { xs: 'none', md: '1px solid' },
71-
borderColor: (theme) => ({
72-
xs: 'none',
73-
md: theme.palette.border.main,
74-
}),
75-
overflow: 'hidden',
7660
}}
7761
>
7862
<FormProvider {...methods}>
@@ -144,6 +128,6 @@ export function EmailVerificationFormContainer() {
144128
</Stack>
145129
</form>
146130
</FormProvider>
147-
</Paper>
131+
</PageCard>
148132
);
149133
}

‎packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-success-message.tsx‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,18 @@
11
import { t } from 'i18next';
22
import { Link } from 'react-router-dom';
3-
import { Paper, Stack, Typography } from '@mui/material';
3+
import { Stack, Typography } from '@mui/material';
44

55
import { Button } from '@/shared/components/ui/button';
66
import { SuccessIcon } from '@/shared/components/ui/icons';
77
import { routerPaths } from '@/router/router-paths';
8+
import { PageCard } from '@/shared/components/ui/page-card';
89

910
export function EmailVerificationSuccessMessage() {
1011
return (
11-
<Paper
12-
elevation={0}
12+
<PageCard
1313
sx={{
14-
display: 'flex',
15-
flex: 1,
16-
alignSelf: 'stretch',
1714
alignItems: 'center',
1815
justifyContent: 'center',
19-
my: { xs: 0, md: 4 },
20-
borderRadius: '30px',
21-
borderBottomLeftRadius: { xs: 0, md: '30px' },
22-
borderBottomRightRadius: { xs: 0, md: '30px' },
23-
border: { xs: 'none', md: '1px solid' },
24-
borderColor: (theme) => ({
25-
xs: 'none',
26-
md: theme.palette.border.main,
27-
}),
2816
}}
2917
>
3018
<Stack sx={{ gap: 2.5, alignItems: 'center' }}>
@@ -49,6 +37,6 @@ export function EmailVerificationSuccessMessage() {
4937
{t('worker.emailVerification.btn')}
5038
</Button>
5139
</Stack>
52-
</Paper>
40+
</PageCard>
5341
);
5442
}

‎packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password-success.page.tsx‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { useEffect } from 'react';
22
import { t } from 'i18next';
33
import { Link } from 'react-router-dom';
4-
import { Paper, Stack, Typography } from '@mui/material';
4+
import { Stack, Typography } from '@mui/material';
55
import CheckCircle from '@mui/icons-material/CheckCircle';
66

77
import { Button } from '@/shared/components/ui/button';
88
import { routerPaths } from '@/router/router-paths';
99
import { useAuth } from '@/modules/auth/hooks/use-auth';
10+
import { PageCard } from '@/shared/components/ui/page-card';
1011

1112
export function ResetPasswordSuccessPage() {
1213
const { signOut, user } = useAuth();
@@ -18,26 +19,12 @@ export function ResetPasswordSuccessPage() {
1819
}, [user, signOut]);
1920

2021
return (
21-
<Paper
22-
elevation={0}
22+
<PageCard
2323
sx={{
24-
display: 'flex',
25-
flex: 1,
26-
alignSelf: 'stretch',
2724
justifyContent: 'center',
2825
alignItems: 'center',
29-
my: { xs: 0, md: 4 },
3026
py: { xs: 3, md: 0 },
3127
px: { xs: 2, md: 0 },
32-
borderRadius: '30px',
33-
borderBottomLeftRadius: { xs: 0, md: '30px' },
34-
borderBottomRightRadius: { xs: 0, md: '30px' },
35-
border: { xs: 'none', md: '1px solid' },
36-
borderColor: (theme) => ({
37-
xs: 'none',
38-
md: theme.palette.border.main,
39-
}),
40-
overflow: 'hidden',
4128
}}
4229
>
4330
<Stack
@@ -72,6 +59,6 @@ export function ResetPasswordSuccessPage() {
7259
</Button>
7360
</Stack>
7461
</Stack>
75-
</Paper>
62+
</PageCard>
7663
);
7764
}

‎packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password.page.tsx‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect } from 'react';
22
import { FormProvider, useForm } from 'react-hook-form';
33
import { zodResolver } from '@hookform/resolvers/zod';
4-
import { Box, Paper, Stack, Typography } from '@mui/material';
4+
import { Box, Stack, Typography } from '@mui/material';
55
import { t } from 'i18next';
66
import omit from 'lodash/omit';
77
import { useLocation, useNavigate } from 'react-router-dom';
@@ -21,6 +21,7 @@ import {
2121
TopNotificationType,
2222
useNotification,
2323
} from '@/shared/hooks/use-notification';
24+
import { PageCard } from '@/shared/components/ui/page-card';
2425

2526
export function ResetPasswordPage() {
2627
const location = useLocation();
@@ -67,26 +68,12 @@ export function ResetPasswordPage() {
6768
}, [isResetPasswordWorkerError, resetPasswordWorkerError, showNotification]);
6869

6970
return (
70-
<Paper
71-
elevation={0}
71+
<PageCard
7272
sx={{
73-
display: 'flex',
74-
flex: 1,
75-
alignSelf: 'stretch',
7673
justifyContent: 'center',
7774
alignItems: { xs: 'flex-start', md: 'center' },
78-
my: { xs: 0, md: 4 },
7975
py: { xs: 3, md: 0 },
8076
px: { xs: 2, md: 0 },
81-
borderRadius: '30px',
82-
borderBottomLeftRadius: { xs: 0, md: '30px' },
83-
borderBottomRightRadius: { xs: 0, md: '30px' },
84-
border: { xs: 'none', md: '1px solid' },
85-
borderColor: (theme) => ({
86-
xs: 'none',
87-
md: theme.palette.border.main,
88-
}),
89-
overflow: 'hidden',
9077
}}
9178
>
9279
<Stack sx={{ width: { xs: '100%', md: '400px' } }}>
@@ -142,6 +129,6 @@ export function ResetPasswordPage() {
142129
</form>
143130
</FormProvider>
144131
</Stack>
145-
</Paper>
132+
</PageCard>
146133
);
147134
}

0 commit comments

Comments
 (0)