Release 2026-08-18

packages/apps/human-app/frontend/src/api/auth-service.ts

@@ -1,5 +1,5 @@
 import { jwtDecode } from 'jwt-decode';
-import { type SignInDto } from '@/modules/signin/worker/schemas';
+import { type SignInDto } from '@/modules/signin/schemas';
 import { browserAuthProvider } from '@/shared/contexts/browser-auth-provider';
 import {
   type AuthTokensSuccessResponse,

packages/apps/human-app/frontend/src/api/authorized-http-api-client.ts

@@ -6,7 +6,7 @@ import {
 } from './http-api-client';
 import { AuthService, type AuthProvider } from './auth-service';
 
-export class AuthorizedHttpApiClient extends HttpApiClient {
+class AuthorizedHttpApiClient extends HttpApiClient {
   constructor(
     baseUrl: string,
     private readonly authProvider: AuthProvider

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,27 +1,27 @@
-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, Typography } 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,
       }}
     >
-      <Button
+      {/* <Button
         component={Link}
         to={routerPaths.signUp}
         variant="contained"
@@ -30,7 +30,7 @@ export function SignInSection() {
         fullWidth
       >
         {t('homepage.signUp')}
-      </Button>
+      </Button> */}
       <Button
         component={Link}
         to={routerPaths.signIn}
@@ -41,6 +41,9 @@ export function SignInSection() {
       >
         {t('homepage.signIn')}
       </Button>
+      <Typography variant="body2" sx={{ textAlign: 'center' }}>
+        {t('homepage.signUpClosed')}
+      </Typography>
     </Paper>
   );
 }

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/worker/sign-in-form.tsx → packages/apps/human-app/frontend/src/modules/signin/components/sign-in-form.tsx

@@ -1,19 +1,17 @@
 import { type SubmitEvent } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { Box, Divider, Grid, Link as MuiLink, Typography } from '@mui/material';
+import { Box, Grid, Link as MuiLink } from '@mui/material';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import { Input } from '@/shared/components/data-entry/input';
 import { Button } from '@/shared/components/ui/button';
 import { Password } from '@/shared/components/data-entry/password';
-import { useColorMode } from '@/shared/contexts/color-mode/use-color-mode';
 import { useResetMutationErrors } from '@/shared/hooks/use-reset-mutation-errors';
 import { HCaptchaForm } from '@/shared/components/hcaptcha';
 import { routerPaths } from '@/router/router-paths';
-
-import { type SignInDto, signInDtoSchema } from './schemas';
+import { type SignInDto, signInDtoSchema } from '../schemas';
 
 interface SignInFormProps {
   onSubmit: (data: SignInDto) => void;
@@ -29,7 +27,6 @@ export function SignInForm({
   resetMutation,
 }: SignInFormProps) {
   const { t } = useTranslation();
-  const { colorPalette } = useColorMode();
 
   const methods = useForm({
     defaultValues: {
@@ -50,30 +47,23 @@ export function SignInForm({
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit}>
         <Grid container sx={{ gap: 3 }}>
-          <Input
-            fullWidth
-            label={t('worker.signInForm.fields.email')}
-            name="email"
-          />
+          <Input fullWidth label={t('signInForm.fields.email')} name="email" />
           <Password
             fullWidth
-            label={t('worker.signInForm.fields.password')}
+            label={t('signInForm.fields.password')}
             name="password"
           />
           <Box sx={{ width: '100%' }}>
             <MuiLink
               component={Link}
               to={routerPaths.sendResetLink}
-              variant="body1"
+              variant="body2"
               sx={{
-                color: colorPalette.text.primary,
-                fontSize: '14px',
-                lineHeight: '150%',
                 fontWeight: 600,
                 textDecoration: 'underline',
               }}
             >
-              {t('worker.signInForm.forgotPassword')}
+              {t('signInForm.forgotPassword')}
             </MuiLink>
           </Box>
           <HCaptchaForm error={error} name="h_captcha_token" />
@@ -84,25 +74,22 @@ export function SignInForm({
             fullWidth
             loading={isLoading}
           >
-            {t('worker.signInForm.submitBtn')}
+            {t('signInForm.submitBtn')}
           </Button>
-          <Box sx={{ position: 'relative', width: '100%' }}>
-            <Divider sx={{ bgcolor: '#c9c9c9' }} />
+          {/* <Box sx={{ position: 'relative', width: '100%' }}>
+            <Divider sx={{ bgcolor: 'border.main' }} />
             <Typography
+              variant="body2"
               sx={{
-                fontSize: '12px',
-                fontWeight: 700,
-                lineHeight: '125%',
-                letterSpacing: '0.25px',
-                color: colorPalette.text.primary,
                 position: 'absolute',
                 top: '50%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
-                bgcolor: colorPalette.background.paper,
+                bgcolor: 'background.paper',
+                fontWeight: 700,
               }}
             >
-              {t('worker.signInForm.or')}
+              {t('signInForm.or')}
             </Typography>
           </Box>
           <Box
@@ -116,32 +103,22 @@ export function SignInForm({
               },
             }}
           >
-            <Typography
-              sx={{
-                fontSize: '14px',
-                fontWeight: 500,
-                lineHeight: '26px',
-                letterSpacing: '0.1px',
-                color: colorPalette.text.auxiliary200,
-              }}
-            >
-              {t('worker.signInForm.dontHaveAccount')}
+            <Typography variant="body2" sx={{ color: 'text.auxiliary200' }}>
+              {t('signInForm.dontHaveAccount')}
             </Typography>{' '}
             <MuiLink
               component={Link}
               to={routerPaths.signUp}
+              variant="body2"
               sx={{
-                color: colorPalette.accent.main,
-                fontSize: '14px',
+                color: 'accent.main',
                 fontWeight: 600,
-                lineHeight: '26px',
-                letterSpacing: '0.1px',
                 textDecoration: 'underline',
               }}
             >
-              {t('worker.signInForm.signUp')}
+              {t('signInForm.signUp')}
             </MuiLink>
-          </Box>
+          </Box> */}
         </Grid>
       </form>
     </FormProvider>

packages/apps/human-app/frontend/src/modules/signin/worker/use-sign-in-mutation.ts → packages/apps/human-app/frontend/src/modules/signin/hooks/use-sign-in-mutation.ts

@@ -2,7 +2,7 @@ import { useMutation } from '@tanstack/react-query';
 import { env } from '@/shared/env';
 import { AuthService, HttpApiClient } from '@/api';
 import { useAuth } from '@/modules/auth/hooks/use-auth';
-import { type SignInDto } from './schemas';
+import { type SignInDto } from '../schemas';
 
 function signInMutationFn(data: SignInDto) {
   const httpClient = new HttpApiClient(env.VITE_API_URL);