[HUM-154]: chore: separated components form welcome page

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

@@ -1,3 +1 @@
 export * from './home-container';
-export * from './welcome';
-export * from './choose-sign-up-account-type';

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

@@ -0,0 +1,72 @@
+import { Grid, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import {
+  MobileHomeIcons,
+  HomepageWorkIcon,
+  HomepageUserIcon,
+  HomepageLogoIcon,
+} from '@/shared/components/ui/icons';
+import { useIsMobile } from '@/shared/hooks/use-is-mobile';
+
+export function LogoSection() {
+  const { t } = useTranslation();
+  const logoText: string = t('homepage.humanApp');
+  const logoTextSplit: string[] = logoText.split(' ');
+  const isMobile = useIsMobile('lg');
+
+  return (
+    <Grid container direction="column" justifyContent="center">
+      {isMobile ? (
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="center"
+          sx={{ svg: { margin: '-1.4rem' } }}
+        >
+          <MobileHomeIcons />
+        </Stack>
+      ) : (
+        <Stack
+          direction="row"
+          maxHeight="80px"
+          mb="1.5rem"
+          sx={{ transform: 'translateX(-4.5%)' }}
+        >
+          <Grid sx={{ mx: '24px' }}>
+            <HomepageWorkIcon />
+          </Grid>
+          <Grid sx={{ mx: '24px' }}>
+            <HomepageUserIcon />
+          </Grid>
+          <Grid sx={{ mx: '24px' }}>
+            <HomepageLogoIcon />
+          </Grid>
+        </Stack>
+      )}
+      <Stack
+        direction="row"
+        justifyContent={isMobile ? 'center' : 'flex-start'}
+        sx={{ marginTop: '0' }}
+      >
+        <Typography variant="h1">{logoTextSplit[0]}</Typography>
+        <Typography
+          sx={{ fontWeight: '400', marginLeft: '1.25rem' }}
+          variant="h1"
+        >
+          {logoTextSplit[1]}
+        </Typography>
+      </Stack>
+      <Typography
+        sx={{
+          marginTop: '1.875rem',
+          marginBottom: '3.8125rem',
+          typography: { md: 'h5' },
+        }}
+        textAlign={isMobile ? 'center' : 'left'}
+        variant="h6"
+      >
+        {t('homepage.completeJobs')}
+      </Typography>
+    </Grid>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { Paper, Button, Divider } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useColorMode } from '@/shared/contexts/color-mode';
+import { useHomePageState } from '@/shared/contexts/homepage-state';
+import { useIsMobile } from '@/shared/hooks/use-is-mobile';
+import { OperatorSignIn } from './operator-sign-in';
+import { WorkerSignIn } from './worker-sign-in';
+
+export function SignInSection() {
+  const isMobile = useIsMobile('lg');
+  const { colorPalette } = useColorMode();
+  const { setPageView } = useHomePageState();
+  const { t } = useTranslation();
+
+  return (
+    <Paper
+      sx={{
+        px: isMobile ? '16px' : '4.1875rem',
+        py: isMobile ? '32px' : '4.8125rem',
+        backgroundColor: colorPalette.paper.light,
+        boxShadow: 'none',
+        borderRadius: '20px',
+      }}
+    >
+      <Button
+        color="secondary"
+        fullWidth
+        onClick={() => {
+          setPageView('chooseSignUpAccountType');
+        }}
+        size="large"
+        sx={{ mb: '1.5625rem' }}
+        variant="contained"
+      >
+        {t('homepage.signUp')}
+      </Button>
+      <Divider component="div" sx={{ mb: '1.5625rem' }} variant="middle" />
+      <WorkerSignIn />
+      <OperatorSignIn />
+    </Paper>
+  );
+}

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

@@ -1,138 +1,33 @@
-import { Divider, Grid, Paper, Stack, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
+import { Grid } from '@mui/material';
 import { useEffect } from 'react';
-import {
-  HomepageLogoIcon,
-  HomepageUserIcon,
-  HomepageWorkIcon,
-  MobileHomeIcons,
-} from '@/shared/components/ui/icons';
-import { Button } from '@/shared/components/ui/button';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
-import { WorkerSignIn } from '@/modules/homepage/components/worker-sign-in';
 import { useColorMode } from '@/shared/contexts/color-mode';
-import { useHomePageState } from '@/shared/contexts/homepage-state';
 import { useBackgroundContext } from '@/shared/contexts/background';
-import { OperatorSignIn } from './operator-sign-in';
+import { SignInSection } from './sign-in-section';
+import { LogoSection } from './logo-section';
 
 export function Welcome() {
-  const { colorPalette, isDarkMode } = useColorMode();
+  const { isDarkMode } = useColorMode();
   const { setWhiteBackground } = useBackgroundContext();
-  const { setPageView } = useHomePageState();
-  const { t } = useTranslation();
-  const logoText: string = t('homepage.humanApp');
-  const logoTextSplit: string[] = logoText.split(' ');
   const isMobile = useIsMobile('lg');
 
   useEffect(() => {
     if (!isDarkMode) {
       setWhiteBackground();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isDarkMode, setWhiteBackground]);
 
   return (
     <Grid
       container
       spacing={isMobile ? 0 : 10}
-      sx={{
-        paddingBottom: isMobile ? '44px' : 0,
-      }}
+      sx={{ paddingBottom: isMobile ? '44px' : 0 }}
     >
       <Grid container item justifyContent="center" xs={isMobile ? 12 : 6}>
-        <Grid container direction="column" justifyContent="center">
-          {isMobile ? (
-            <Stack
-              alignItems="center"
-              direction="row"
-              justifyContent="center"
-              sx={{ svg: { margin: '-1.4rem' } }}
-            >
-              <MobileHomeIcons />
-            </Stack>
-          ) : (
-            <Stack
-              direction="row"
-              maxHeight="80px"
-              mb="1.5rem"
-              sx={{ transform: 'translateX(-4.5%)' }}
-            >
-              <Grid sx={{ mx: '24px' }}>
-                <HomepageWorkIcon />
-              </Grid>
-              <Grid sx={{ mx: '24px' }}>
-                <HomepageUserIcon />
-              </Grid>
-              <Grid sx={{ mx: '24px' }}>
-                <HomepageLogoIcon />
-              </Grid>
-            </Stack>
-          )}
-          <Stack
-            direction="row"
-            justifyContent={isMobile ? 'center' : 'flex-start'}
-            sx={{
-              marginTop: '0',
-            }}
-          >
-            <Typography variant="h1">{logoTextSplit[0]}</Typography>
-            <Typography
-              sx={{
-                fontWeight: '400',
-                marginLeft: '1.25rem',
-              }}
-              variant="h1"
-            >
-              {logoTextSplit[1]}
-            </Typography>
-          </Stack>
-          <Typography
-            sx={{
-              marginTop: '1.875rem',
-              marginBottom: '3.8125rem',
-              typography: { md: 'h5' },
-            }}
-            textAlign={isMobile ? 'center' : 'left'}
-            variant="h6"
-          >
-            {t('homepage.completeJobs')}
-          </Typography>
-        </Grid>
+        <LogoSection />
       </Grid>
       <Grid item justifyContent="flex-end" xs={isMobile ? 12 : 6}>
-        <Paper
-          sx={{
-            px: isMobile ? '16px' : '4.1875rem',
-            py: isMobile ? '32px' : '4.8125rem',
-            backgroundColor: colorPalette.paper.light,
-            boxShadow: 'none',
-            borderRadius: '20px',
-          }}
-        >
-          <Button
-            color="secondary"
-            fullWidth
-            onClick={() => {
-              setPageView('chooseSignUpAccountType');
-            }}
-            size="large"
-            sx={{
-              mb: '1.5625rem',
-            }}
-            variant="contained"
-          >
-            {t('homepage.signUp')}
-          </Button>
-          <Divider
-            component="div"
-            sx={{
-              mb: '1.5625rem',
-            }}
-            variant="middle"
-          />
-          <WorkerSignIn />
-          <OperatorSignIn />
-        </Paper>
+        <SignInSection />
       </Grid>
     </Grid>
   );