Skip to content

Commit 3b91dcd

Browse files
mpblockympblocky
authored
[HUMAN App] refactor: separated components form welcome page (#3160)
1 parent fe3962e commit 3b91dcd

4 files changed

Lines changed: 122 additions & 115 deletions

File tree

‎packages/apps/human-app/frontend/src/modules/homepage/components/index.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
11
export * from './home-container';
2-
export * from './welcome';
3-
export * from './choose-sign-up-account-type';

‎packages/apps/human-app/frontend/src/modules/homepage/components/logo-section.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { Grid, Stack, Typography } from '@mui/material';
2+
import { useTranslation } from 'react-i18next';
3+
import {
4+
MobileHomeIcons,
5+
HomepageWorkIcon,
6+
HomepageUserIcon,
7+
HomepageLogoIcon,
8+
} from '@/shared/components/ui/icons';
9+
import { useIsMobile } from '@/shared/hooks/use-is-mobile';
10+
11+
export function LogoSection() {
12+
const { t } = useTranslation();
13+
const logoText: string = t('homepage.humanApp');
14+
const logoTextSplit: string[] = logoText.split(' ');
15+
const isMobile = useIsMobile('lg');
16+
17+
return (
18+
<Grid container direction="column" justifyContent="center">
19+
{isMobile ? (
20+
<Stack
21+
alignItems="center"
22+
direction="row"
23+
justifyContent="center"
24+
sx={{ svg: { margin: '-1.4rem' } }}
25+
>
26+
<MobileHomeIcons />
27+
</Stack>
28+
) : (
29+
<Stack
30+
direction="row"
31+
maxHeight="80px"
32+
mb="1.5rem"
33+
sx={{ transform: 'translateX(-4.5%)' }}
34+
>
35+
<Grid sx={{ mx: '24px' }}>
36+
<HomepageWorkIcon />
37+
</Grid>
38+
<Grid sx={{ mx: '24px' }}>
39+
<HomepageUserIcon />
40+
</Grid>
41+
<Grid sx={{ mx: '24px' }}>
42+
<HomepageLogoIcon />
43+
</Grid>
44+
</Stack>
45+
)}
46+
<Stack
47+
direction="row"
48+
justifyContent={isMobile ? 'center' : 'flex-start'}
49+
sx={{ marginTop: '0' }}
50+
>
51+
<Typography variant="h1">{logoTextSplit[0]}</Typography>
52+
<Typography
53+
sx={{ fontWeight: '400', marginLeft: '1.25rem' }}
54+
variant="h1"
55+
>
56+
{logoTextSplit[1]}
57+
</Typography>
58+
</Stack>
59+
<Typography
60+
sx={{
61+
marginTop: '1.875rem',
62+
marginBottom: '3.8125rem',
63+
typography: { md: 'h5' },
64+
}}
65+
textAlign={isMobile ? 'center' : 'left'}
66+
variant="h6"
67+
>
68+
{t('homepage.completeJobs')}
69+
</Typography>
70+
</Grid>
71+
);
72+
}

‎packages/apps/human-app/frontend/src/modules/homepage/components/sign-in-section.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Paper, Button, Divider } from '@mui/material';
2+
import { useTranslation } from 'react-i18next';
3+
import { useColorMode } from '@/shared/contexts/color-mode';
4+
import { useHomePageState } from '@/shared/contexts/homepage-state';
5+
import { useIsMobile } from '@/shared/hooks/use-is-mobile';
6+
import { OperatorSignIn } from './operator-sign-in';
7+
import { WorkerSignIn } from './worker-sign-in';
8+
9+
export function SignInSection() {
10+
const isMobile = useIsMobile('lg');
11+
const { colorPalette } = useColorMode();
12+
const { setPageView } = useHomePageState();
13+
const { t } = useTranslation();
14+
15+
return (
16+
<Paper
17+
sx={{
18+
px: isMobile ? '16px' : '4.1875rem',
19+
py: isMobile ? '32px' : '4.8125rem',
20+
backgroundColor: colorPalette.paper.light,
21+
boxShadow: 'none',
22+
borderRadius: '20px',
23+
}}
24+
>
25+
<Button
26+
color="secondary"
27+
fullWidth
28+
onClick={() => {
29+
setPageView('chooseSignUpAccountType');
30+
}}
31+
size="large"
32+
sx={{ mb: '1.5625rem' }}
33+
variant="contained"
34+
>
35+
{t('homepage.signUp')}
36+
</Button>
37+
<Divider component="div" sx={{ mb: '1.5625rem' }} variant="middle" />
38+
<WorkerSignIn />
39+
<OperatorSignIn />
40+
</Paper>
41+
);
42+
}

‎packages/apps/human-app/frontend/src/modules/homepage/components/welcome.tsx‎

Lines changed: 8 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,33 @@
1-
import { Divider, Grid, Paper, Stack, Typography } from '@mui/material';
2-
import { useTranslation } from 'react-i18next';
1+
import { Grid } from '@mui/material';
32
import { useEffect } from 'react';
4-
import {
5-
HomepageLogoIcon,
6-
HomepageUserIcon,
7-
HomepageWorkIcon,
8-
MobileHomeIcons,
9-
} from '@/shared/components/ui/icons';
10-
import { Button } from '@/shared/components/ui/button';
113
import { useIsMobile } from '@/shared/hooks/use-is-mobile';
12-
import { WorkerSignIn } from '@/modules/homepage/components/worker-sign-in';
134
import { useColorMode } from '@/shared/contexts/color-mode';
14-
import { useHomePageState } from '@/shared/contexts/homepage-state';
155
import { useBackgroundContext } from '@/shared/contexts/background';
16-
import { OperatorSignIn } from './operator-sign-in';
6+
import { SignInSection } from './sign-in-section';
7+
import { LogoSection } from './logo-section';
178

189
export function Welcome() {
19-
const { colorPalette, isDarkMode } = useColorMode();
10+
const { isDarkMode } = useColorMode();
2011
const { setWhiteBackground } = useBackgroundContext();
21-
const { setPageView } = useHomePageState();
22-
const { t } = useTranslation();
23-
const logoText: string = t('homepage.humanApp');
24-
const logoTextSplit: string[] = logoText.split(' ');
2512
const isMobile = useIsMobile('lg');
2613

2714
useEffect(() => {
2815
if (!isDarkMode) {
2916
setWhiteBackground();
3017
}
31-
// eslint-disable-next-line react-hooks/exhaustive-deps
32-
}, []);
18+
}, [isDarkMode, setWhiteBackground]);
3319

3420
return (
3521
<Grid
3622
container
3723
spacing={isMobile ? 0 : 10}
38-
sx={{
39-
paddingBottom: isMobile ? '44px' : 0,
40-
}}
24+
sx={{ paddingBottom: isMobile ? '44px' : 0 }}
4125
>
4226
<Grid container item justifyContent="center" xs={isMobile ? 12 : 6}>
43-
<Grid container direction="column" justifyContent="center">
44-
{isMobile ? (
45-
<Stack
46-
alignItems="center"
47-
direction="row"
48-
justifyContent="center"
49-
sx={{ svg: { margin: '-1.4rem' } }}
50-
>
51-
<MobileHomeIcons />
52-
</Stack>
53-
) : (
54-
<Stack
55-
direction="row"
56-
maxHeight="80px"
57-
mb="1.5rem"
58-
sx={{ transform: 'translateX(-4.5%)' }}
59-
>
60-
<Grid sx={{ mx: '24px' }}>
61-
<HomepageWorkIcon />
62-
</Grid>
63-
<Grid sx={{ mx: '24px' }}>
64-
<HomepageUserIcon />
65-
</Grid>
66-
<Grid sx={{ mx: '24px' }}>
67-
<HomepageLogoIcon />
68-
</Grid>
69-
</Stack>
70-
)}
71-
<Stack
72-
direction="row"
73-
justifyContent={isMobile ? 'center' : 'flex-start'}
74-
sx={{
75-
marginTop: '0',
76-
}}
77-
>
78-
<Typography variant="h1">{logoTextSplit[0]}</Typography>
79-
<Typography
80-
sx={{
81-
fontWeight: '400',
82-
marginLeft: '1.25rem',
83-
}}
84-
variant="h1"
85-
>
86-
{logoTextSplit[1]}
87-
</Typography>
88-
</Stack>
89-
<Typography
90-
sx={{
91-
marginTop: '1.875rem',
92-
marginBottom: '3.8125rem',
93-
typography: { md: 'h5' },
94-
}}
95-
textAlign={isMobile ? 'center' : 'left'}
96-
variant="h6"
97-
>
98-
{t('homepage.completeJobs')}
99-
</Typography>
100-
</Grid>
27+
<LogoSection />
10128
</Grid>
10229
<Grid item justifyContent="flex-end" xs={isMobile ? 12 : 6}>
103-
<Paper
104-
sx={{
105-
px: isMobile ? '16px' : '4.1875rem',
106-
py: isMobile ? '32px' : '4.8125rem',
107-
backgroundColor: colorPalette.paper.light,
108-
boxShadow: 'none',
109-
borderRadius: '20px',
110-
}}
111-
>
112-
<Button
113-
color="secondary"
114-
fullWidth
115-
onClick={() => {
116-
setPageView('chooseSignUpAccountType');
117-
}}
118-
size="large"
119-
sx={{
120-
mb: '1.5625rem',
121-
}}
122-
variant="contained"
123-
>
124-
{t('homepage.signUp')}
125-
</Button>
126-
<Divider
127-
component="div"
128-
sx={{
129-
mb: '1.5625rem',
130-
}}
131-
variant="middle"
132-
/>
133-
<WorkerSignIn />
134-
<OperatorSignIn />
135-
</Paper>
30+
<SignInSection />
13631
</Grid>
13732
</Grid>
13833
);

0 commit comments

Comments
 (0)