[Human App Frontend] refactor: update theme (#4003)

Author: KirillKirill

packages/apps/human-app/frontend/src/assets/background-images/signin-background-mobile.png

@@ -1,6 +1,7 @@
 import { z } from 'zod';
+
 import { createAuthProvider } from '@/shared/contexts/generic-auth-context';
-import { KycStatus } from '@/modules/worker/profile/types';
+import { KycStatus } from '@/shared/types/entity.type';
 
 const userDataSchema = z.object({
   site_key: z.string().optional().nullable(),

packages/apps/human-app/frontend/src/assets/background-images/signup-background-mobile.png

@@ -1,9 +1,9 @@
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import { Box, Grid, Link as MuiLink, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { Box, Grid, Link as MuiLink, Typography } from '@mui/material';
+
 import { env } from '@/shared/env';
-import { useColorMode } from '@/shared/contexts/color-mode';
 import { useProposalQuery } from '../hooks/use-proposal-query';
 import { formatCountdown } from '../../../shared/utils/time';
 import { type ProposalResponse } from '../services/governance.service';
@@ -20,8 +20,6 @@ function getProposalStatus(proposal: ProposalResponse): ProposalStatus {
 export function GovernanceBanner() {
   const { t } = useTranslation();
   const { data: proposal, isLoading, isError } = useProposalQuery();
-  const { colorPalette } = useColorMode();
-  const { text, background } = colorPalette.banner;
   const [timeRemaining, setTimeRemaining] = useState('00:00:00');
 
   useEffect(() => {
@@ -55,8 +53,8 @@ export function GovernanceBanner() {
       sx={{
         alignItems: { xs: 'flex-start', sm: 'center' },
         justifyContent: { xs: 'flex-start', sm: 'space-between' },
-        bgcolor: background.primary,
-        color: text.secondary,
+        bgcolor: 'primary.main',
+        color: 'common.white',
         borderRadius: '8px',
         p: 2,
         gap: 2,
@@ -75,13 +73,13 @@ export function GovernanceBanner() {
       >
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <AccessTimeIcon sx={{ mr: 1 }} />
-          <Typography variant="body2" sx={{ color: text.secondary }}>
+          <Typography variant="body2" sx={{ color: 'common.white' }}>
             {status === 'pending'
               ? t('governance.timeToStart', 'Voting starts in')
               : t('governance.timeToReveal', 'Time to reveal vote')}
             :
           </Typography>
-          <Typography variant="body1" sx={{ ml: 1, color: text.primary }}>
+          <Typography variant="body1" sx={{ ml: 1, color: 'text.primary' }}>
             {timeRemaining}
           </Typography>
         </Box>
@@ -90,8 +88,8 @@ export function GovernanceBanner() {
             variant="body1"
             sx={{
               ml: { xs: 0, md: 8 },
-              color: text.primary,
-              bgcolor: background.secondary,
+              color: 'text.primary',
+              bgcolor: 'background.paper',
               borderRadius: '8px',
               p: '4px 8px',
             }}
@@ -113,9 +111,9 @@ export function GovernanceBanner() {
           href={env.VITE_GOVERNANCE_URL}
           target="_blank"
           rel="noopener noreferrer"
+          variant="body1"
           sx={{
-            color: text.secondary,
-            fontWeight: 500,
+            color: 'common.white',
             textDecoration: 'none',
             '&:hover': {
               textDecoration: 'underline',

packages/apps/human-app/frontend/src/modules/auth/context/auth-context.tsx

@@ -1,43 +1,40 @@
-import { Grid, Stack, Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
 export function LogoSection() {
   const { t } = useTranslation();
-  const logoText: string = t('homepage.humanApp');
-  const logoTextSplit: string[] = logoText.split(' ');
+
+  const logoText = t('homepage.humanApp');
+  const logoTextSplit = logoText.split(' ');
 
   return (
-    <Grid
-      container
+    <Stack
       sx={{
-        flexDirection: 'column',
         justifyContent: 'center',
         alignItems: { xs: 'center', lg: 'flex-start' },
+        gap: 4,
       }}
     >
       <Stack
         direction="row"
         sx={{
           justifyContent: { xs: 'center', md: 'flex-start' },
-          mt: 0,
         }}
       >
-        <Typography variant="h1">{logoTextSplit[0]}</Typography>
-        <Typography variant="h1" sx={{ fontWeight: '400', ml: 2.5 }}>
-          {logoTextSplit[1]}
+        <Typography variant="h1">
+          {logoTextSplit[0]}
+          <Typography
+            component="span"
+            variant="h1"
+            sx={{ fontWeight: '400', ml: 2.5 }}
+          >
+            {logoTextSplit[1]}
+          </Typography>
         </Typography>
       </Stack>
-      <Typography
-        variant="h6"
-        sx={{
-          mt: 4,
-          mb: 8,
-          typography: { md: 'h5' },
-          textAlign: { xs: 'center', md: 'left' },
-        }}
-      >
+      <Typography variant="h5" sx={{ textAlign: { xs: 'center', md: 'left' } }}>
         {t('homepage.completeJobs')}
       </Typography>
-    </Grid>
+    </Stack>
   );
 }

packages/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx

@@ -1,21 +1,21 @@
-import { Paper, Button } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { useColorMode } from '@/shared/contexts/color-mode';
+import { Paper, Button } from '@mui/material';
+
 import { routerPaths } from '@/router/router-paths';
 
 export function SignInSection() {
-  const { colorPalette } = useColorMode();
   const { t } = useTranslation();
 
   return (
     <Paper
+      elevation={0}
       sx={{
         display: 'flex',
         flexDirection: 'column',
         px: { xs: 2, lg: 8 },
         py: { xs: 4, lg: 10 },
-        backgroundColor: colorPalette.paper.light,
+        bgcolor: 'background.light',
         boxShadow: 'none',
         borderRadius: '20px',
         gap: 2,

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

@@ -1,14 +1,14 @@
 import { Box, Container, Grid, Paper } from '@mui/material';
 import { Navigate } from 'react-router-dom';
 
-import { routerPaths } from '@/router/router-paths';
-import { useColorMode } from '@/shared/contexts/color-mode';
 import { LogoSection } from '../components/logo-section';
 import { SignInSection } from '../components/sign-in-section';
+import { routerPaths } from '@/router/router-paths';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { useIsUserVerified } from '@/shared/hooks';
 
 export function HomePage() {
-  const { colorPalette } = useColorMode();
+  const { isDarkMode } = useColorMode();
   const isUserVerified = useIsUserVerified();
 
   if (isUserVerified) {
@@ -22,7 +22,7 @@ export function HomePage() {
         sx={{
           position: 'relative',
           mx: { xs: 0, md: 4 },
-          bgcolor: colorPalette.backgroundColor,
+          bgcolor: isDarkMode ? 'background.default' : 'common.white',
         }}
       >
         <Container>
@@ -31,7 +31,10 @@ export function HomePage() {
             spacing={{ xs: 0, lg: 10 }}
             sx={{ width: '100%', alignItems: 'center', pb: { xs: 5, lg: 0 } }}
           >
-            <Grid size={{ xs: 12, lg: 6 }} sx={{ justifyContent: 'center' }}>
+            <Grid
+              size={{ xs: 12, lg: 6 }}
+              sx={{ justifyContent: 'center', mb: { xs: 4, sm: 8, lg: 0 } }}
+            >
               <LogoSection />
             </Grid>
             <Grid size={{ xs: 12, lg: 6 }} sx={{ justifyContent: 'flex-end' }}>

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

@@ -0,0 +1,4 @@
+export * from './use-start-idv';
+export * from './use-start-idv-mutation';
+export * from './use-register-address';
+export * from './use-register-address-notifications';

packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx

@@ -5,7 +5,7 @@ import type { ResponseError } from '@/shared/types/global.type';
 import { useWalletConnect } from '@/shared/contexts/wallet-connect';
 import { usePrepareSignature } from '@/shared/hooks';
 import { PrepareSignatureType } from '@/shared/services/signature.service';
-import * as profileService from '../profile/services/profile.service';
+import * as profileService from '../services/profile.service';
 import { useAuth } from '@/modules/auth/hooks/use-auth';
 
 interface RegisterAddressCallbacks {