Release 2025-04-27

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

@@ -27,13 +27,10 @@ export function HomePage() {
 
   const paperBackgroundColor = (() => {
     if (isDarkMode) {
-      if (isMobile) {
-        return colorPalette.backgroundColor;
-      }
       return colorPalette.paper.main;
     }
 
-    return colorPalette.white;
+    return colorPalette.backgroundColor;
   })();
 
   return (

packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-process.tsx

@@ -1,29 +1,29 @@
+import { useEffect } from 'react';
 import {
   PageCardError,
   PageCardLoader,
 } from '@/shared/components/ui/page-card';
 import { getErrorMessageForError } from '@/shared/errors';
-import { useVerifyEmailQuery } from '../hooks';
+import { useVerifyEmailMutation } from '../hooks';
 import { EmailVerificationSuccessMessage } from './email-verification-success-message';
 
 interface EmailVerificationProcessProps {
   token: string;
 }
 
-function useEmailVerification(token: string) {
-  const { error, isError, isPending } = useVerifyEmailQuery({ token });
-
-  return {
+export function EmailVerificationProcess({
+  token,
+}: Readonly<EmailVerificationProcessProps>) {
+  const {
     error,
     isError,
     isPending,
-  };
-}
+    mutate: verifyEmailMutation,
+  } = useVerifyEmailMutation({ token });
 
-export function EmailVerificationProcess({
-  token,
-}: Readonly<EmailVerificationProcessProps>) {
-  const { error, isError, isPending } = useEmailVerification(token);
+  useEffect(() => {
+    verifyEmailMutation();
+  }, [token, verifyEmailMutation]);
 
   if (isError) {
     return <PageCardError errorMessage={getErrorMessageForError(error)} />;

packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/index.ts

@@ -1,4 +1,4 @@
-export * from './use-email-verification-query';
+export * from './use-email-verification-mutation';
 export * from './use-email-verification-token';
 export * from './use-resend-email';
 export * from './use-resend-email-router-params';

packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/use-email-verification-mutation.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+import { useMutation } from '@tanstack/react-query';
+import * as emailVerificationService from '../services/email-verification.service';
+
+export const verifyEmailDtoSchema = z.object({
+  token: z.string(),
+});
+
+export const VerifyEmailSuccessResponseSchema = z.unknown();
+
+export function useVerifyEmailMutation({ token }: { token: string }) {
+  return useMutation({
+    mutationFn: () => emailVerificationService.verifyEmail(token),
+  });
+}

packages/apps/human-app/frontend/src/modules/worker/email-verification/services/email-verification.service.ts

@@ -7,9 +7,11 @@ const apiPaths = {
 
 async function verifyEmail(token: string) {
   try {
-    await authorizedHumanAppApiClient.get(
-      `${apiPaths.verifyEmail}?token=${token}`
-    );
+    await authorizedHumanAppApiClient.post(apiPaths.verifyEmail, {
+      body: {
+        token,
+      },
+    });
   } catch (error) {
     if (error instanceof ApiClientError) {
       throw error;

packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table-item-mobile.tsx

@@ -31,7 +31,7 @@ export function OraclesTableItemMobile({
   const { selectOracle } = useSelectOracleNavigation();
 
   return (
-    <Paper sx={{ ...styles, backgroundColor: colorPalette.white }}>
+    <Paper sx={{ ...styles, backgroundColor: colorPalette.backgroundColor }}>
       <Grid item>
         <ListItem label={t('worker.oraclesTable.oracleAddress')}>
           <EvmAddress address={oracle.address} />

packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/available-jobs-filter-modal.tsx

@@ -37,7 +37,7 @@ export function AvailableJobsFilterModal({
             px: '50px',
             width: '100vw',
             zIndex: '9999999',
-            background: colorPalette.white,
+            background: colorPalette.backgroundColor,
           },
         }}
         variant="persistent"
@@ -51,7 +51,7 @@ export function AvailableJobsFilterModal({
             position: 'absolute',
             left: '0',
             top: '0',
-            background: colorPalette.white,
+            background: colorPalette.backgroundColor,
             display: 'flex',
             width: '100%',
             px: '44px',
@@ -68,7 +68,7 @@ export function AvailableJobsFilterModal({
             sx={{
               zIndex: '99999999',
               marginRight: '15px',
-              backgroundColor: colorPalette.white,
+              backgroundColor: colorPalette.backgroundColor,
             }}
           >
             <CloseIcon />

packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/status-chip.tsx

@@ -1,6 +1,5 @@
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import { colorPalette as lightModeColorPalette } from '@/shared/styles/color-palette';
 import { useColorMode } from '@/shared/contexts/color-mode';
 import { getChipStatusColor } from '../../utils';
 import { type MyJob } from '../../../schemas';
@@ -15,12 +14,12 @@ export function StatusChip({ status }: Readonly<{ status: MyJob['status'] }>) {
         justifyContent: 'center',
         alignItems: 'center',
         padding: '6px 9px',
-        color: lightModeColorPalette.white,
+        color: colorPalette.white,
         backgroundColor: getChipStatusColor(status, colorPalette),
         borderRadius: '16px',
       }}
     >
-      <Typography color={lightModeColorPalette.white} variant="chip">
+      <Typography color={colorPalette.white} variant="chip">
         {status}
       </Typography>
     </Box>

packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx

@@ -37,7 +37,7 @@ export function MyJobsFilterModal({
             px: '50px',
             width: '100vw',
             zIndex: '9999999',
-            background: colorPalette.white,
+            background: colorPalette.backgroundColor,
           },
         }}
         variant="persistent"
@@ -51,7 +51,7 @@ export function MyJobsFilterModal({
             position: 'absolute',
             left: '0',
             top: '0',
-            background: colorPalette.white,
+            background: colorPalette.backgroundColor,
             display: 'flex',
             width: '100%',
             px: '44px',
@@ -73,7 +73,7 @@ export function MyJobsFilterModal({
             sx={{
               zIndex: '99999999',
               marginRight: '15px',
-              backgroundColor: colorPalette.white,
+              backgroundColor: colorPalette.backgroundColor,
             }}
           >
             <CloseIcon />

packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx

@@ -13,7 +13,6 @@ import { ListItem } from '@/shared/components/ui/list-item';
 import { useColorMode } from '@/shared/contexts/color-mode';
 import { Chip } from '@/shared/components/ui/chip';
 import type { JobType } from '@/modules/smart-contracts/EthKVStore/config';
-import { colorPalette as lightModeColorPalette } from '@/shared/styles/color-palette';
 import { formatDate } from '@/shared/helpers/date';
 import { useCombinePages } from '@/shared/hooks';
 import {
@@ -166,10 +165,7 @@ export function MyJobsListMobile() {
                           colorPalette
                         )}
                         label={
-                          <Typography
-                            color={lightModeColorPalette.white}
-                            variant="chip"
-                          >
+                          <Typography color={colorPalette.white} variant="chip">
                             {d.status}
                           </Typography>
                         }

packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx

@@ -71,7 +71,7 @@ export function Navbar({
       direction="row"
       justifyContent="space-between"
       sx={{
-        backgroundColor: colorPalette.white,
+        backgroundColor: colorPalette.backgroundColor,
         display: { xs: 'flex', md: 'none' },
         width: '100%',
         px: isMobile ? NAVBAR_PADDING : 0,

packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx

@@ -6,17 +6,15 @@ interface ChipProps {
   key?: string;
   backgroundColor?: string;
 }
-export function Chip({ label, backgroundColor }: ChipProps) {
+export function Chip({ label, backgroundColor }: Readonly<ChipProps>) {
   const { colorPalette } = useColorMode();
 
   return (
     <Box
       component="span"
       key={crypto.randomUUID()}
       sx={{
-        backgroundColor: backgroundColor
-          ? backgroundColor
-          : colorPalette.chip.main,
+        backgroundColor: backgroundColor ?? colorPalette.chip.main,
         width: 'fit-content',
         px: '10px',
         py: '2px',

packages/apps/human-app/frontend/src/shared/styles/dark-color-palette.ts

@@ -1,7 +1,7 @@
 import type { colorPalette } from '@/shared/styles/color-palette';
 
 export const darkColorPalette = {
-  white: 'rgba(16, 7, 53, 1)',
+  white: '#FFFFFF',
   black: '#000000',
   backgroundColor: 'rgba(16, 7, 53, 1)',
   text: {

packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts

@@ -12,7 +12,7 @@ export const darkTheme: ThemeOptions = {
     MuiCssBaseline: {
       styleOverrides: {
         body: {
-          backgroundColor: darkColorPalette.white,
+          backgroundColor: darkColorPalette.backgroundColor,
         },
       },
     },
@@ -76,7 +76,7 @@ export const darkTheme: ThemeOptions = {
       styleOverrides: {
         tooltip: {
           fontSize: 'inherit',
-          backgroundColor: darkColorPalette.white,
+          backgroundColor: darkColorPalette.backgroundColor,
           boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
           color: darkColorPalette.text.primary,
         },

packages/apps/human-app/frontend/src/shared/styles/theme.ts

@@ -62,7 +62,7 @@ export const theme: ThemeOptions = {
       styleOverrides: {
         tooltip: {
           fontSize: 'inherit',
-          backgroundColor: colorPalette.white,
+          backgroundColor: colorPalette.backgroundColor,
           boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
           color: colorPalette.text.primary,
         },