From 3a117413832dfb30c81b80dd60008497c6cbbcea Mon Sep 17 00:00:00 2001 From: mpblocky <185767042+mpblocky@users.noreply.github.com> Date: Fri, 25 Apr 2025 11:42:24 +0200 Subject: [PATCH 1/2] [HUMAN App] fix: color palette naming (#3300) --- .../frontend/src/modules/homepage/views/home.page.tsx | 5 +---- .../jobs-discovery/components/oracles-table-item-mobile.tsx | 2 +- .../jobs/available-jobs/available-jobs-filter-modal.tsx | 6 +++--- .../worker/jobs/my-jobs/components/desktop/status-chip.tsx | 5 ++--- .../jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx | 6 +++--- .../jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx | 6 +----- .../src/router/components/layout/protected/navbar.tsx | 2 +- .../human-app/frontend/src/shared/components/ui/chip.tsx | 6 ++---- .../frontend/src/shared/styles/dark-color-palette.ts | 2 +- .../apps/human-app/frontend/src/shared/styles/dark-theme.ts | 4 ++-- packages/apps/human-app/frontend/src/shared/styles/theme.ts | 2 +- 11 files changed, 18 insertions(+), 28 deletions(-) diff --git a/packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx b/packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx index 29d03570d6..7176f2fa77 100644 --- a/packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx +++ b/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 ( diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table-item-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table-item-mobile.tsx index 87ead63a17..085b952125 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table-item-mobile.tsx +++ b/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 ( - + diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/available-jobs-filter-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/available-jobs-filter-modal.tsx index 8edb04806b..087a512020 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/available-jobs-filter-modal.tsx +++ b/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, }} > diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/status-chip.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/status-chip.tsx index cad5e86949..55172fa9f0 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/status-chip.tsx +++ b/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', }} > - + {status} diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx index 2d30e45956..291f36a6eb 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx +++ b/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, }} > diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx index 0ece3f62c3..0c2332e66a 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx +++ b/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={ - + {d.status} } diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx index 39650f1ebf..e8172f18e1 100644 --- a/packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx +++ b/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, diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx index c4a469a4c7..4b59b8c2e2 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx @@ -6,7 +6,7 @@ interface ChipProps { key?: string; backgroundColor?: string; } -export function Chip({ label, backgroundColor }: ChipProps) { +export function Chip({ label, backgroundColor }: Readonly) { const { colorPalette } = useColorMode(); return ( @@ -14,9 +14,7 @@ export function Chip({ label, backgroundColor }: ChipProps) { component="span" key={crypto.randomUUID()} sx={{ - backgroundColor: backgroundColor - ? backgroundColor - : colorPalette.chip.main, + backgroundColor: backgroundColor ?? colorPalette.chip.main, width: 'fit-content', px: '10px', py: '2px', diff --git a/packages/apps/human-app/frontend/src/shared/styles/dark-color-palette.ts b/packages/apps/human-app/frontend/src/shared/styles/dark-color-palette.ts index 566c333936..dfad3f0edd 100644 --- a/packages/apps/human-app/frontend/src/shared/styles/dark-color-palette.ts +++ b/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: { diff --git a/packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts b/packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts index 90d88fc1c7..0158695420 100644 --- a/packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts +++ b/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, }, diff --git a/packages/apps/human-app/frontend/src/shared/styles/theme.ts b/packages/apps/human-app/frontend/src/shared/styles/theme.ts index bb623fefc3..4fce1894b0 100644 --- a/packages/apps/human-app/frontend/src/shared/styles/theme.ts +++ b/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, }, From 59bfbe4b81bb7e8fe3208e12dad30f56d01e84d3 Mon Sep 17 00:00:00 2001 From: Siarhei Date: Sun, 27 Apr 2025 18:11:49 +0300 Subject: [PATCH 2/2] [Human App][Frontend] Fix email verification (#3302) * fix: email confirmation * fix: use mutation for email verify * fix: actually use verify email mutation * chore: remove excessive fn wrap --------- Co-authored-by: Dmitry Nechay --- .../components/email-verification-process.tsx | 22 +++++++++---------- .../worker/email-verification/hooks/index.ts | 2 +- .../hooks/use-email-verification-mutation.ts | 15 +++++++++++++ .../hooks/use-email-verification-query.ts | 19 ---------------- .../services/email-verification.service.ts | 8 ++++--- 5 files changed, 32 insertions(+), 34 deletions(-) create mode 100644 packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/use-email-verification-mutation.ts delete mode 100644 packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/use-email-verification-query.ts diff --git a/packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-process.tsx b/packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-process.tsx index bde02c5aed..3aa579253e 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-process.tsx +++ b/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) { + const { error, isError, isPending, - }; -} + mutate: verifyEmailMutation, + } = useVerifyEmailMutation({ token }); -export function EmailVerificationProcess({ - token, -}: Readonly) { - const { error, isError, isPending } = useEmailVerification(token); + useEffect(() => { + verifyEmailMutation(); + }, [token, verifyEmailMutation]); if (isError) { return ; diff --git a/packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/index.ts b/packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/index.ts index 365120a8e1..ce765acf69 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/index.ts +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/use-email-verification-mutation.ts b/packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/use-email-verification-mutation.ts new file mode 100644 index 0000000000..8e86287543 --- /dev/null +++ b/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), + }); +} diff --git a/packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/use-email-verification-query.ts b/packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/use-email-verification-query.ts deleted file mode 100644 index 0402ab3ed7..0000000000 --- a/packages/apps/human-app/frontend/src/modules/worker/email-verification/hooks/use-email-verification-query.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { z } from 'zod'; -import { useQuery } from '@tanstack/react-query'; -import * as emailVerificationService from '../services/email-verification.service'; - -export const verifyEmailDtoSchema = z.object({ - token: z.string(), -}); - -export type VerifyDto = z.infer; - -export const VerifyEmailSuccessResponseSchema = z.unknown(); - -export function useVerifyEmailQuery({ token }: { token: string }) { - return useQuery({ - queryFn: () => emailVerificationService.verifyEmail(token), - queryKey: [token], - refetchInterval: 0, - }); -} diff --git a/packages/apps/human-app/frontend/src/modules/worker/email-verification/services/email-verification.service.ts b/packages/apps/human-app/frontend/src/modules/worker/email-verification/services/email-verification.service.ts index 25bb03bed6..23e5fb9d5a 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/email-verification/services/email-verification.service.ts +++ b/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;