[Human App Frontend] Update theme

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

@@ -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/modules/governance-banner/components/governance-banner.tsx

@@ -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/homepage/components/logo-section.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/homepage/components/sign-in-section.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/views/home.page.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/signin/hooks/index.ts

@@ -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/worker/hooks/use-register-address.ts → packages/apps/human-app/frontend/src/modules/signin/hooks/use-register-address.ts

@@ -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 {

packages/apps/human-app/frontend/src/modules/worker/profile/components/identity-verification-control.tsx → packages/apps/human-app/frontend/src/modules/signin/worker/identity-verification-control.tsx

@@ -4,15 +4,15 @@ import { Box, keyframes, Link, Stack, Typography } from '@mui/material';
 import { jwtDecode } from 'jwt-decode';
 
 import { useStartIdv } from '../hooks';
-import { KycStatus } from '../types';
-import { useColorMode } from '@/shared/contexts/color-mode';
+import { KycStatus } from '@/shared/types/entity.type';
 import { env } from '@/shared/env';
 import { HourglassIcon, VeriffIcon } from '@/shared/components/ui/icons';
 import { Button } from '@/shared/components/ui/button';
 import { useAccessTokenRefresh } from '@/api/hooks/use-access-token-refresh';
 import { browserAuthProvider } from '@/shared/contexts/browser-auth-provider';
 import { UserData } from '@/modules/auth/context/auth-context';
 import { useAuth } from '@/modules/auth/hooks/use-auth';
+import { useColorMode } from '@/shared/contexts/color-mode/use-color-mode';
 
 const hourglassSpin = keyframes`
   0% {
@@ -29,8 +29,7 @@ const hourglassSpin = keyframes`
   }
 `;
 
-// TODO: Extend to 30 seconds
-const CHECK_STATUS_COOLDOWN_TIME = 10000;
+const CHECK_STATUS_COOLDOWN_TIME = 30000;
 
 export function IdentityVerificationControl({
   kycStatus,
@@ -45,14 +44,15 @@ export function IdentityVerificationControl({
   const cooldownTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   const { t } = useTranslation();
+  const { isDarkMode } = useColorMode();
+
   const { isIdvAlreadyInProgress, idvStarted, idvStartIsPending, startIdv } =
     useStartIdv();
   const {
     mutateAsync: refreshAccessTokenAsync,
     isPending: isRefreshingAccessToken,
   } = useAccessTokenRefresh();
   const { updateUserData } = useAuth();
-  const { colorPalette } = useColorMode();
 
   const handleCheckVerificationStatus = useCallback(async () => {
     if (isRefreshingAccessToken || isCheckStatusCoolingDown) {
@@ -107,7 +107,7 @@ export function IdentityVerificationControl({
     return (
       <Typography
         variant="body1"
-        sx={{ color: colorPalette.text.auxiliary200 }}
+        sx={{ color: isDarkMode ? 'text.auxiliary100' : 'text.auxiliary200' }}
       >
         <Trans
           components={{
@@ -131,20 +131,16 @@ export function IdentityVerificationControl({
             p: 2.5,
             borderRadius: '10px',
             border: '1px solid',
-            borderColor: colorPalette.border.main,
+            borderColor: 'border.main',
           }}
         >
-          <Typography
-            variant="h6"
-            sx={{ color: colorPalette.text.primary, fontWeight: 600, mb: 1 }}
-          >
+          <Typography variant="h6" sx={{ color: 'text.primary', mb: 1 }}>
             {t('worker.profile.verificationOpenedInNewTab')}
           </Typography>
           <Typography
-            variant="body1"
+            variant="body4"
             sx={{
-              color: colorPalette.text.auxiliary200,
-              fontWeight: 400,
+              color: 'text.auxiliary200',
               mb: 2,
             }}
           >
@@ -161,10 +157,9 @@ export function IdentityVerificationControl({
               <HourglassIcon />
             </Box>
             <Typography
-              variant="body1"
+              variant="body4"
               sx={{
-                color: colorPalette.text.auxiliary200,
-                fontWeight: 400,
+                color: 'text.auxiliary200',
                 fontStyle: 'italic',
               }}
             >
@@ -190,8 +185,8 @@ export function IdentityVerificationControl({
   return (
     <Stack>
       <Typography
-        variant="body1"
-        sx={{ color: colorPalette.text.auxiliary200, mb: { xs: 3, md: 5 } }}
+        variant="body4"
+        sx={{ color: 'text.auxiliary200', mb: { xs: 3, md: 5 } }}
       >
         {t('worker.profile.veriffCopy')}
       </Typography>
@@ -205,13 +200,8 @@ export function IdentityVerificationControl({
       >
         <Typography
           component="span"
-          sx={{
-            color: colorPalette.text.auxiliary200,
-            fontSize: 12,
-            fontWeight: 400,
-            letterSpacing: 0.15,
-            lineHeight: '150%',
-          }}
+          variant="body5"
+          sx={{ color: isDarkMode ? 'text.auxiliary100' : 'text.auxiliary200' }}
         >
           {t('worker.profile.poweredBy')}
         </Typography>

packages/apps/human-app/frontend/src/modules/worker/profile/components/buttons/register-address-btn.tsx → packages/apps/human-app/frontend/src/modules/signin/worker/register-address-btn.tsx

@@ -1,7 +1,8 @@
 import { t } from 'i18next';
+
 import { Button } from '@/shared/components/ui/button';
-import { useRegisterAddress } from '@/modules/worker/hooks/use-register-address';
-import { useRegisterAddressNotifications } from '@/modules/worker/hooks/use-register-address-notifications';
+import { useRegisterAddress } from '../hooks/use-register-address';
+import { useRegisterAddressNotifications } from '../hooks/use-register-address-notifications';
 
 export function RegisterAddressBtn() {
   const { onSuccess, onError } = useRegisterAddressNotifications();