Merge pull request #3301 from humanprotocol/develop

Release 2025-04-27

Author: dnechay

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/hooks/use-email-verification-query.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/email-verification/services/email-verification.service.ts

@@ -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-discovery/components/oracles-table-item-mobile.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/available-jobs/available-jobs-filter-modal.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/desktop/status-chip.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 />