diff --git a/packages/apps/human-app/frontend/src/assets/icons-dark-mode/hand.svg b/packages/apps/human-app/frontend/src/assets/icons-dark-mode/hand.svg deleted file mode 100644 index 03ed5b0ae5..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons-dark-mode/hand.svg +++ /dev/null @@ -1,70 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons-dark-mode/profile-icon.svg b/packages/apps/human-app/frontend/src/assets/icons-dark-mode/profile-icon.svg deleted file mode 100644 index f6ed123061..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons-dark-mode/profile-icon.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons-dark-mode/user-outlined.svg b/packages/apps/human-app/frontend/src/assets/icons-dark-mode/user-outlined.svg deleted file mode 100644 index c359fd0e66..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons-dark-mode/user-outlined.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons-dark-mode/work-header.svg b/packages/apps/human-app/frontend/src/assets/icons-dark-mode/work-header.svg deleted file mode 100644 index e8febf3837..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons-dark-mode/work-header.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons-dark-mode/work.svg b/packages/apps/human-app/frontend/src/assets/icons-dark-mode/work.svg deleted file mode 100644 index 39ea46187d..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons-dark-mode/work.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons/checkmark-icon.svg b/packages/apps/human-app/frontend/src/assets/icons/checkmark-icon.svg index 645514e815..23af691b61 100644 --- a/packages/apps/human-app/frontend/src/assets/icons/checkmark-icon.svg +++ b/packages/apps/human-app/frontend/src/assets/icons/checkmark-icon.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/apps/human-app/frontend/src/assets/icons/hand.svg b/packages/apps/human-app/frontend/src/assets/icons/hand.svg deleted file mode 100644 index 81169bd335..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons/hand.svg +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons/logout.svg b/packages/apps/human-app/frontend/src/assets/icons/logout.svg new file mode 100644 index 0000000000..238986cb0f --- /dev/null +++ b/packages/apps/human-app/frontend/src/assets/icons/logout.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/apps/human-app/frontend/src/assets/icons/profile-icon.svg b/packages/apps/human-app/frontend/src/assets/icons/profile-icon.svg deleted file mode 100644 index 811121e23f..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons/profile-icon.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/apps/human-app/frontend/src/assets/icons/user-filled.svg b/packages/apps/human-app/frontend/src/assets/icons/user-filled.svg deleted file mode 100644 index ea37160a77..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons/user-filled.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons/user-outlined.svg b/packages/apps/human-app/frontend/src/assets/icons/user-outlined.svg deleted file mode 100644 index 2a59dbb72c..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons/user-outlined.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons/user-secondary.svg b/packages/apps/human-app/frontend/src/assets/icons/user-secondary.svg deleted file mode 100644 index 303b047f37..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons/user-secondary.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons/work-header.svg b/packages/apps/human-app/frontend/src/assets/icons/work-header.svg deleted file mode 100644 index 63e2e5cb89..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons/work-header.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons/work-secondary.svg b/packages/apps/human-app/frontend/src/assets/icons/work-secondary.svg deleted file mode 100644 index 065a03d862..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons/work-secondary.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons/work.svg b/packages/apps/human-app/frontend/src/assets/icons/work.svg deleted file mode 100644 index cd6b13c4de..0000000000 --- a/packages/apps/human-app/frontend/src/assets/icons/work.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-bottom-tray.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-bottom-tray.tsx new file mode 100644 index 0000000000..3ddf16fa59 --- /dev/null +++ b/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-bottom-tray.tsx @@ -0,0 +1,53 @@ +import { useColorMode } from '@/shared/contexts/color-mode'; +import { Stack } from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { ProfileData } from './profile-data'; +import { Button } from '@/shared/components/ui/button'; +import { HelpIcon } from '@/shared/components/ui/icons'; +import { MOBILE_BOTTOM_TRAY_HEIGHT } from '@/shared/consts'; + +export function ProfileBottomTray() { + const { colorPalette } = useColorMode(); + const { t } = useTranslation(); + + return ( + theme.zIndex.appBar, + }} + > + + } + disableRipple + sx={{ height: { xs: 20, md: 32 }, p: 0, bgcolor: 'transparent' }} + onClick={() => { + // @ts-expect-error -- ... + if ($zoho?.salesiq?.chat?.start) { + // @ts-expect-error -- ... + $zoho.salesiq.chat.start(); + } + }} + > + {t('components.DrawerNavigation.help')} + + + ); +} diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-data.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-data.tsx index 79b9d36d82..94cd722c4b 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-data.tsx +++ b/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-data.tsx @@ -1,49 +1,128 @@ -import { Stack, Typography } from '@mui/material'; -import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; +import { Box, Link, Stack, Typography } from '@mui/material'; +import { Link as RouterLink, useLocation } from 'react-router-dom'; + import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user'; -import { Button } from '@/shared/components/ui/button'; -import { routerPaths } from '@/router/router-paths'; import { useColorMode } from '@/shared/contexts/color-mode'; -import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette'; +import { shortenEscrowAddress } from '@/shared/helpers/evm'; +import { routerPaths } from '@/router/router-paths'; + +function Wrapper({ + isCompact, + isProfilePage, + children, +}: { + isCompact: boolean; + isProfilePage: boolean; + children: React.ReactNode; +}) { + if (isCompact && !isProfilePage) { + return ( + + {children} + + ); + } + + return <>{children}; +} -export function ProfileData() { - const { colorPalette, isDarkMode } = useColorMode(); +export function ProfileData({ + variant = 'compact', +}: { + variant?: 'compact' | 'expanded'; +}) { const { user } = useAuthenticatedUser(); - const { t } = useTranslation(); + const { colorPalette } = useColorMode(); + const location = useLocation(); + + const isProfilePage = location.pathname === routerPaths.worker.profile; + const isCompact = variant === 'compact'; + return ( - - - {t('worker.profile.email')} - + + - {user.email} - - - - - {t('worker.profile.password')} - - + + {user.email} + + + {shortenEscrowAddress( + user.wallet_address ?? '', + isCompact ? 9 : 6, + isCompact ? 8 : 5 + )} + + - + ); } diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/views/profile.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/views/profile.page.tsx index 8e3b0fcb21..5db121de0c 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/profile/views/profile.page.tsx +++ b/packages/apps/human-app/frontend/src/modules/worker/profile/views/profile.page.tsx @@ -1,21 +1,76 @@ -import { Paper, Stack } from '@mui/material'; -import { useEffect } from 'react'; +import { Box, IconButton, Stack, Tooltip, Typography } from '@mui/material'; +import { useEffect, useRef, useState, type MouseEvent } from 'react'; import { t } from 'i18next'; -import { useIsMobile } from '@/shared/hooks/use-is-mobile'; +import { Link, useNavigate } from 'react-router-dom'; + import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user'; import { useWalletConnect } from '@/shared/contexts/wallet-connect'; import { TopNotificationType, useNotification, } from '@/shared/hooks/use-notification'; -import { ProfileData } from '../components'; +import { useColorMode } from '@/shared/contexts/color-mode/use-color-mode'; +import { ProfileData } from '../components/profile-data'; +import { + CheckmarkIcon, + CopyIcon, + LogoutIcon, +} from '@/shared/components/ui/icons'; +import { shortenEscrowAddress } from '@/shared/helpers/evm'; +import { Button } from '@/shared/components/ui/button'; +import { browserAuthProvider } from '@/shared/contexts/browser-auth-provider'; +import { routerPaths } from '@/router/router-paths'; +import { BackButton } from '@/shared/components/ui/page-card/back-button'; +import { useIsMobile } from '@/shared/hooks/use-is-mobile'; export function WorkerProfilePage() { + const [isCopied, setIsCopied] = useState(false); + const timeoutRef = useRef(null); + const { user } = useAuthenticatedUser(); - const isMobile = useIsMobile(); + const { colorPalette } = useColorMode(); const { isConnected, initializing, web3ProviderMutation } = useWalletConnect(); const { showNotification } = useNotification(); + const isMobile = useIsMobile(); + const navigate = useNavigate(); + + const handleBack = () => { + navigate(routerPaths.worker.jobsDiscovery); + }; + + const handleCopyClick = (e: MouseEvent) => { + if (isCopied) return; + + e.stopPropagation(); + navigator.clipboard.writeText(user.wallet_address ?? ''); + setIsCopied(true); + + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + + timeoutRef.current = setTimeout(() => { + setIsCopied(false); + }, 1500); + }; + + const handleSignOut = () => { + browserAuthProvider.signOut({ + callback: () => { + window.location.reload(); + }, + }); + }; + + useEffect(() => { + return () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + }; + }, []); useEffect(() => { if (initializing) return; @@ -43,21 +98,165 @@ export function WorkerProfilePage() { ]); return ( - - - + + + {isMobile && } + + {t('worker.profile.profileHeader')} + + + + + + + + + {t('worker.profile.accountVerified')} + + + + + + + {t('worker.profile.email')} + + + {user.email} + + + + + {t('worker.profile.walletAddress')} + + + {shortenEscrowAddress(user.wallet_address ?? '', 9, 8)} + + + + + + + + + + } + onClick={handleSignOut} + > + {t('worker.profile.logout')} + + + + - + ); } diff --git a/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password-success.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password-success.page.tsx index 4920cfc5dc..1fe83805f0 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password-success.page.tsx +++ b/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password-success.page.tsx @@ -1,51 +1,86 @@ -import Grid from '@mui/material/Grid'; +import { useEffect } from 'react'; +import { Paper, Stack, Typography } from '@mui/material'; import { t } from 'i18next'; import { Link } from 'react-router-dom'; -import Typography from '@mui/material/Typography'; import CheckCircle from '@mui/icons-material/CheckCircle'; -import { useEffect } from 'react'; + import { Button } from '@/shared/components/ui/button'; import { routerPaths } from '@/router/router-paths'; -import { PageCard } from '@/shared/components/ui/page-card'; import { useAuth } from '@/modules/auth/hooks/use-auth'; import { useColorMode } from '@/shared/contexts/color-mode'; export function ResetPasswordWorkerSuccessPage() { const { colorPalette } = useColorMode(); - const { signOut } = useAuth(); + const { signOut, user } = useAuth(); useEffect(() => { - signOut(); - }, [signOut]); + if (user) { + signOut(); + } + }, [user, signOut]); + return ( - - {t('worker.resetPasswordSuccess.title')} + + + - - } - > - - - {t('worker.resetPasswordSuccess.description')} - - - - + + {t('worker.resetPasswordSuccess.title')} + + + + + {t('worker.resetPasswordSuccess.description')} + + + + + ); } diff --git a/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password.page.tsx index 2fe4304633..e1a153dc75 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password.page.tsx +++ b/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password.page.tsx @@ -1,15 +1,14 @@ +import { useEffect } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; -import Grid from '@mui/material/Grid'; -import Typography from '@mui/material/Typography'; +import { Box, Paper, Stack, Typography } from '@mui/material'; import { t } from 'i18next'; import omit from 'lodash/omit'; -import { useLocation } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import queryString from 'query-string'; + import { Button } from '@/shared/components/ui/button'; import { Password } from '@/shared/components/data-entry/password'; -import { PageCard } from '@/shared/components/ui/page-card'; -import { Alert } from '@/shared/components/ui/alert'; import { getErrorMessageForError } from '@/shared/errors'; import { routerPaths } from '@/router/router-paths'; import { HCaptchaForm } from '@/shared/components/hcaptcha'; @@ -17,10 +16,19 @@ import { useResetMutationErrors } from '@/shared/hooks/use-reset-mutation-errors import { useResetPasswordMutation } from './hooks'; import { resetPasswordDtoSchema } from './schemas'; import { type ResetPasswordDto } from './types'; +import { BackButton } from '@/shared/components/ui/page-card/back-button'; +import { useColorMode } from '@/shared/contexts/color-mode'; +import { + TopNotificationType, + useNotification, +} from '@/shared/hooks/use-notification'; export function ResetPasswordWorkerPage() { const location = useLocation(); + const navigate = useNavigate(); const { token } = queryString.parse(location.search); + const { colorPalette } = useColorMode(); + const { showNotification } = useNotification(); const methods = useForm({ defaultValues: { @@ -47,51 +55,103 @@ export function ResetPasswordWorkerPage() { ); }; + const handleBackButton = () => { + navigate(routerPaths.worker.profile); + }; + + useEffect(() => { + if (isResetPasswordWorkerError) { + showNotification({ + type: TopNotificationType.ERROR, + message: getErrorMessageForError(resetPasswordWorkerError), + }); + } + }, [isResetPasswordWorkerError, resetPasswordWorkerError, showNotification]); + return ( - - {getErrorMessageForError(resetPasswordWorkerError)} - - ) : undefined - } - backNavigation={routerPaths.worker.profile} - title={t('worker.resetPassword.title')} + - -
{ - void methods.handleSubmit(handleWorkerResetPassword)(event); + + - - - {t('worker.resetPassword.description')} - - - - - - -
- - + + + {t('worker.resetPassword.title')} + + + +
{ + void methods.handleSubmit(handleWorkerResetPassword)(event); + }} + > + + + {t('worker.resetPassword.description')} + + + + + + +
+ + + ); } diff --git a/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link-success.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link-success.page.tsx index 4ab0d39ef7..7d4679e613 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link-success.page.tsx +++ b/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link-success.page.tsx @@ -1,28 +1,31 @@ -import { Grid, Typography } from '@mui/material'; +import { useEffect } from 'react'; +import { Grid, Paper, Stack, Typography } from '@mui/material'; import { Trans, useTranslation } from 'react-i18next'; import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/zod'; import { FormProvider, useForm } from 'react-hook-form'; -import { PageCard } from '@/shared/components/ui/page-card'; import { Button } from '@/shared/components/ui/button'; import { useLocationState } from '@/modules/worker/hooks/use-location-state'; import { env } from '@/shared/env'; -import { Alert } from '@/shared/components/ui/alert'; import { getErrorMessageForError } from '@/shared/errors'; import { HCaptchaForm } from '@/shared/components/hcaptcha'; import { MailTo } from '@/shared/components/ui/mail-to'; import { useResetMutationErrors } from '@/shared/hooks/use-reset-mutation-errors'; import { useColorMode } from '@/shared/contexts/color-mode'; -import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette'; import { useSendResetLinkMutation } from './hooks'; import { sendResetLinkHcaptchaDtoSchema, type SendResetLinkHcaptcha, } from './schemas'; +import { + TopNotificationType, + useNotification, +} from '@/shared/hooks/use-notification'; export function SendResetLinkWorkerSuccessPage() { - const { colorPalette, isDarkMode } = useColorMode(); + const { colorPalette } = useColorMode(); const { t } = useTranslation(); + const { showNotification } = useNotification(); const { field: email } = useLocationState({ keyInStorage: 'email', schema: z.email(), @@ -43,79 +46,111 @@ export function SendResetLinkWorkerSuccessPage() { useResetMutationErrors(methods.watch, reset); + useEffect(() => { + if (isError) { + showNotification({ + type: TopNotificationType.ERROR, + message: getErrorMessageForError(error), + }); + } + }, [isError, error, showNotification]); + return ( - - {getErrorMessageForError(error)} - - ) : undefined - } - title={t('worker.sendResetLinkForm.title')} + - -
{ - void methods.handleSubmit(handleWorkerSendResetLink)(event); + + - - - , - }} - i18nKey="worker.sendResetLinkSuccess.paragraph1" - values={{ email }} - /> - - - {t('worker.sendResetLinkSuccess.paragraph2')} - - - , - }} - i18nKey="worker.sendResetLinkSuccess.paragraph3" - values={{ email }} - /> - - - - - - , - 2: , + {t('worker.sendResetLinkForm.title')} + + +
{ + void methods.handleSubmit(handleWorkerSendResetLink)(event); + }} + > + + + , + }} + i18nKey="worker.sendResetLinkSuccess.paragraph1" + values={{ email }} + /> + + -
- -
- - + > + {t('worker.sendResetLinkSuccess.paragraph2')} + + + , + }} + i18nKey="worker.sendResetLinkSuccess.paragraph3" + values={{ email }} + /> + + + + + , + 2: , + }} + i18nKey="worker.sendResetLinkSuccess.paragraph4" + /> + + + + + + ); } diff --git a/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link.page.tsx index be9dab12e1..70ea6c86d5 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link.page.tsx +++ b/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link.page.tsx @@ -1,11 +1,10 @@ +import { useEffect } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; -import { Grid, Typography } from '@mui/material'; +import { Box, Grid, Paper, Stack, Typography } from '@mui/material'; import { zodResolver } from '@hookform/resolvers/zod'; import { useTranslation } from 'react-i18next'; -import { PageCard } from '@/shared/components/ui/page-card'; import { Input } from '@/shared/components/data-entry/input'; import { Button } from '@/shared/components/ui/button'; -import { Alert } from '@/shared/components/ui/alert'; import { getErrorMessageForError } from '@/shared/errors'; import { useAuth } from '@/modules/auth/hooks/use-auth'; import { HCaptchaForm } from '@/shared/components/hcaptcha'; @@ -13,10 +12,20 @@ import { routerPaths } from '@/router/router-paths'; import { useResetMutationErrors } from '@/shared/hooks/use-reset-mutation-errors'; import { useSendResetLinkMutation } from './hooks'; import { type SendResetLinkDto, sendResetLinkDtoSchema } from './schemas'; +import { useColorMode } from '@/shared/contexts/color-mode'; +import { BackButton } from '@/shared/components/ui/page-card/back-button'; +import { useNavigate } from 'react-router-dom'; +import { + TopNotificationType, + useNotification, +} from '@/shared/hooks/use-notification'; export function SendResetLinkWorkerPage() { const { t } = useTranslation(); const { user } = useAuth(); + const { colorPalette } = useColorMode(); + const { showNotification } = useNotification(); + const navigate = useNavigate(); const methods = useForm({ defaultValues: { @@ -36,52 +45,105 @@ export function SendResetLinkWorkerPage() { useResetMutationErrors(methods.watch, sendResetLinkWorkerMutateReset); + useEffect(() => { + if (isSendResetLinkWorkerError) { + const errorMessage = getErrorMessageForError(sendResetLinkWorkerError); + showNotification({ + type: TopNotificationType.ERROR, + message: errorMessage, + }); + } + }, [isSendResetLinkWorkerError, sendResetLinkWorkerError, showNotification]); + function handleWorkerSendResetLink(data: SendResetLinkDto) { sendResetLinkWorkerMutate(data); } + const handleBackButton = () => { + navigate(routerPaths.worker.profile); + }; + return ( - - {getErrorMessageForError(sendResetLinkWorkerError)} - - ) : undefined - } - backNavigation={routerPaths.worker.profile} - title={t('worker.sendResetLinkForm.title')} + - -
{ - void methods.handleSubmit(handleWorkerSendResetLink)(event); + + - - - {t('worker.sendResetLinkForm.description')} - - - - - -
- - + + + {t('worker.sendResetLinkForm.title')} + + + +
{ + void methods.handleSubmit(handleWorkerSendResetLink)(event); + }} + > + + + {t('worker.sendResetLinkForm.description')} + + + + + +
+ + + ); } diff --git a/packages/apps/human-app/frontend/src/router/components/drawer-menu-items/drawer-menu-items-operator.tsx b/packages/apps/human-app/frontend/src/router/components/drawer-menu-items/drawer-menu-items-operator.tsx deleted file mode 100644 index 4f15723864..0000000000 --- a/packages/apps/human-app/frontend/src/router/components/drawer-menu-items/drawer-menu-items-operator.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { t } from 'i18next'; -import { HelpIcon, UserOutlinedIcon } from '@/shared/components/ui/icons'; -import { routerPaths } from '@/router/router-paths'; -import { ColorModeSwitch } from '@/shared/components/ui/dark-mode-switch'; -import { type MenuItem } from '../layout/protected'; - -export const operatorDrawerBottomMenuItems: MenuItem[] = [ - { - label: t('components.DrawerNavigation.profile'), - link: routerPaths.operator.profile, - icon: , - }, - { - label: t('components.DrawerNavigation.help'), - icon: , - onClick: () => { - // @ts-expect-error -- ... - if ($zoho?.salesiq?.chat?.start) { - // @ts-expect-error -- ... - $zoho.salesiq.chat.start(); - } - }, - }, - , -]; diff --git a/packages/apps/human-app/frontend/src/router/components/drawer-menu-items/drawer-menu-items-worker.tsx b/packages/apps/human-app/frontend/src/router/components/drawer-menu-items/drawer-menu-items-worker.tsx index 5278ddb584..1c28472e9b 100644 --- a/packages/apps/human-app/frontend/src/router/components/drawer-menu-items/drawer-menu-items-worker.tsx +++ b/packages/apps/human-app/frontend/src/router/components/drawer-menu-items/drawer-menu-items-worker.tsx @@ -1,42 +1,14 @@ import { t } from 'i18next'; -import { - HelpIcon, - UserOutlinedIcon, - WorkIcon, -} from '@/shared/components/ui/icons'; -import { ColorModeSwitch } from '@/shared/components/ui/dark-mode-switch'; import type { UserData } from '@/modules/auth/context/auth-context'; import { routerPaths } from '@/router/router-paths'; import { KycStatus } from '@/modules/worker/profile/types'; -import { type MenuItem } from '../layout/protected'; -export const workerDrawerTopMenuItems = (user: UserData | null): MenuItem[] => { +export const workerDrawerTopMenuItems = (user: UserData | null) => { return [ { label: t('components.DrawerNavigation.jobs'), - icon: , link: routerPaths.worker.jobsDiscovery, disabled: !user?.wallet_address || user.kyc_status !== KycStatus.APPROVED, }, ]; }; - -export const workerDrawerBottomMenuItems: MenuItem[] = [ - { - label: t('components.DrawerNavigation.profile'), - link: routerPaths.worker.profile, - icon: , - }, - { - label: t('components.DrawerNavigation.help'), - icon: , - onClick: () => { - // @ts-expect-error -- ... - if ($zoho?.salesiq?.chat?.start) { - // @ts-expect-error -- ... - $zoho.salesiq.chat.start(); - } - }, - }, - , -]; diff --git a/packages/apps/human-app/frontend/src/router/components/drawer-menu-items/index.ts b/packages/apps/human-app/frontend/src/router/components/drawer-menu-items/index.ts index 26df1d0e31..8dd1acfaae 100644 --- a/packages/apps/human-app/frontend/src/router/components/drawer-menu-items/index.ts +++ b/packages/apps/human-app/frontend/src/router/components/drawer-menu-items/index.ts @@ -1,2 +1 @@ -export * from './drawer-menu-items-operator'; export * from './drawer-menu-items-worker'; diff --git a/packages/apps/human-app/frontend/src/router/components/layout/helpers/index.ts b/packages/apps/human-app/frontend/src/router/components/layout/helpers/index.ts deleted file mode 100644 index c7582d2d26..0000000000 --- a/packages/apps/human-app/frontend/src/router/components/layout/helpers/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './is-drawer-item'; diff --git a/packages/apps/human-app/frontend/src/router/components/layout/helpers/is-drawer-item.ts b/packages/apps/human-app/frontend/src/router/components/layout/helpers/is-drawer-item.ts deleted file mode 100644 index fda999eea3..0000000000 --- a/packages/apps/human-app/frontend/src/router/components/layout/helpers/is-drawer-item.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { type MenuItem, type DrawerItem } from '../protected'; - -export function isDrawerItem(item: MenuItem): item is DrawerItem { - return 'label' in item; -} diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/bottom-menu-items-list.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/bottom-menu-items-list.tsx deleted file mode 100644 index 34d23acb0c..0000000000 --- a/packages/apps/human-app/frontend/src/router/components/layout/protected/bottom-menu-items-list.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { - List, - ListItem, - Stack, - ListItemButton, - ListItemText, - Typography, -} from '@mui/material'; -import { useLocation } from 'react-router-dom'; -import { useColorMode } from '@/shared/contexts/color-mode'; -import { useIsMobile } from '@/shared/hooks'; -import { colorPalette } from '@/shared/styles/color-palette'; -import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette'; -import { isDrawerItem } from '../helpers'; -import { type MenuItem, type DrawerItem } from './drawer-navigation'; - -interface MenuItemListProps { - handleItemClick: (item: DrawerItem) => void; - items?: MenuItem[]; -} -export function BottomMenuItemsList({ - handleItemClick, - items = [], -}: Readonly) { - const { isDarkMode } = useColorMode(); - const isMobile = useIsMobile(); - const location = useLocation(); - - return ( - - {items.map((item) => { - if (!isDrawerItem(item)) { - return ( - - - {item} - - - ); - } - - const { label, link, icon } = item; - const isActive = location.pathname === link; - - return ( - - { - handleItemClick(item); - }} - selected={isActive} - sx={{ - borderRadius: '4px', - p: 0, - '&.Mui-selected': { - backgroundColor: isDarkMode - ? onlyDarkModeColor.listItemColor - : colorPalette.primary.shades, - }, - }} - > - - {icon} - - {label} - - } - sx={{ - textAlign: 'center', - marginLeft: '10px', - }} - /> - - - - ); - })} - - ); -} diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/desktop-aside-bar.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/desktop-aside-bar.tsx new file mode 100644 index 0000000000..051f917544 --- /dev/null +++ b/packages/apps/human-app/frontend/src/router/components/layout/protected/desktop-aside-bar.tsx @@ -0,0 +1,109 @@ +import { ProfileData } from '@/modules/worker/profile/components/profile-data'; +import { Button } from '@/shared/components/ui/button'; +import { ColorModeSwitch } from '@/shared/components/ui/dark-mode-switch'; +import { HelpIcon, HumanLogoNavbarIcon } from '@/shared/components/ui/icons'; +import { useColorMode } from '@/shared/contexts/color-mode/use-color-mode'; +import { useHandleMainNavIconClick } from '@/shared/hooks/use-handle-main-nav-icon-click'; +import { Box, IconButton, Stack } from '@mui/material'; +import { useTranslation } from 'react-i18next'; + +export function DesktopAsideBar() { + const { colorPalette } = useColorMode(); + const { t } = useTranslation(); + const handleMainNavIconClick = useHandleMainNavIconClick(); + + return ( + + + + + + + + + + + + + + + } + disableRipple + sx={{ height: 32, p: 0, bgcolor: 'transparent' }} + onClick={() => { + // @ts-expect-error -- ... + if ($zoho?.salesiq?.chat?.start) { + // @ts-expect-error -- ... + $zoho.salesiq.chat.start(); + } + }} + > + {t('components.DrawerNavigation.help')} + + + + + + + + + + ); +} diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/drawer-navigation.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/drawer-navigation.tsx deleted file mode 100644 index c199cc2d5a..0000000000 --- a/packages/apps/human-app/frontend/src/router/components/layout/protected/drawer-navigation.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import Box from '@mui/material/Box'; -import Drawer from '@mui/material/Drawer'; -import CssBaseline from '@mui/material/CssBaseline'; -import { Stack } from '@mui/material'; -import { useNavigate } from 'react-router-dom'; -import { t } from 'i18next'; -import type { Dispatch, ReactElement, SetStateAction } from 'react'; -import { HumanLogoNavbarIcon } from '@/shared/components/ui/icons'; -import { Button } from '@/shared/components/ui/button'; -import { useIsMobile } from '@/shared/hooks/use-is-mobile'; -import { useHandleMainNavIconClick } from '@/shared/hooks/use-handle-main-nav-icon-click'; -import { TopMenuItemsList } from './top-menu-items-list'; -import { BottomMenuItemsList } from './bottom-menu-items-list'; - -const drawerWidth = 240; - -export interface DrawerItem { - label: string; - link?: string; - href?: string; - icon?: ReactElement; - disabled?: boolean; - onClick?: () => void; -} - -export type MenuItem = DrawerItem | ReactElement; -interface DrawerNavigationProps { - open: boolean; - setDrawerOpen: Dispatch>; - topMenuItems?: MenuItem[]; - bottomMenuItems?: MenuItem[]; - signOut: () => void; -} - -export function DrawerNavigation({ - open, - setDrawerOpen, - topMenuItems, - bottomMenuItems, - signOut, -}: DrawerNavigationProps) { - const navigate = useNavigate(); - const isMobile = useIsMobile(); - const handleMainNavIconClick = useHandleMainNavIconClick(); - - const handleItemClick = ({ disabled, href, link, onClick }: DrawerItem) => { - if (disabled) return; - - if (isMobile) setDrawerOpen(false); - - if (onClick) { - onClick(); - return; - } - - if (href) { - window.open(href, '_blank', 'noreferrer'); - return; - } - - if (link) { - navigate(link); - } - }; - - return ( - - - - {!isMobile && ( - - - - )} - - - - - - - - ); -} diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/index.ts b/packages/apps/human-app/frontend/src/router/components/layout/protected/index.ts index 8643262e0f..5d15fe1b3c 100644 --- a/packages/apps/human-app/frontend/src/router/components/layout/protected/index.ts +++ b/packages/apps/human-app/frontend/src/router/components/layout/protected/index.ts @@ -1,2 +1 @@ export * from './layout'; -export * from './drawer-navigation'; diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/layout.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/layout.tsx index 2f3de9ad7c..5e6449aece 100644 --- a/packages/apps/human-app/frontend/src/router/components/layout/protected/layout.tsx +++ b/packages/apps/human-app/frontend/src/router/components/layout/protected/layout.tsx @@ -1,22 +1,23 @@ import { Box, Stack, styled } from '@mui/material'; -import type { Dispatch, ReactElement, SetStateAction } from 'react'; -import { useEffect, useRef, useState } from 'react'; -import { Outlet } from 'react-router-dom'; +import { useEffect, useRef, useState, type ReactElement } from 'react'; +import { Outlet, useLocation } from 'react-router-dom'; + import { useIsMobile } from '@/shared/hooks/use-is-mobile'; -import { breakpoints } from '@/shared/styles/breakpoints'; import { useIsHCaptchaLabelingPage } from '@/shared/hooks/use-is-hcaptcha-labeling-page'; import { GovernanceBanner } from '@/modules/governance-banner/components/governance-banner'; import { Footer } from '../../footer'; import { Navbar } from './navbar'; -import { type PageHeaderProps, PageHeader } from './page-header'; import { useColorMode } from '@/shared/contexts/color-mode/use-color-mode'; +import { DesktopAsideBar } from './desktop-aside-bar'; +import { ProfileBottomTray } from '@/modules/worker/profile/components/profile-bottom-tray'; +import { MOBILE_BOTTOM_TRAY_HEIGHT } from '@/shared/consts'; +import { routerPaths } from '@/router/router-paths'; const Main = styled('main', { - shouldForwardProp: (prop) => prop !== 'open' && prop !== 'isMobile', + shouldForwardProp: (prop) => prop !== 'open', })<{ open?: boolean; - isMobile?: boolean; -}>(({ theme, open, isMobile }) => ({ +}>(({ theme, open }) => ({ width: '100%', display: 'flex', flex: '1', @@ -29,36 +30,32 @@ const Main = styled('main', { easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen, }), - paddingLeft: isMobile ? 0 : `140px`, }), })); export function ProtectedLayout({ - pageHeaderProps, - renderDrawer, renderHCaptchaStatisticsDrawer, renderGovernanceBanner, -}: Readonly<{ - pageHeaderProps: PageHeaderProps; - renderDrawer: ( - open: boolean, - setDrawerOpen: Dispatch> - ) => ReactElement; +}: { renderHCaptchaStatisticsDrawer?: (isOpen: boolean) => ReactElement; renderGovernanceBanner?: boolean; -}>) { +}) { const layoutElementRef = useRef(null); const isHCaptchaLabelingPage = useIsHCaptchaLabelingPage(); const isMobile = useIsMobile(); const [drawerOpen, setDrawerOpen] = useState(!isMobile); const [hcaptchaDrawerOpen, setHcaptchaDrawerOpen] = useState(false); const { colorPalette } = useColorMode(); + const location = useLocation(); const toggleUserStatsDrawer = isHCaptchaLabelingPage ? () => { setHcaptchaDrawerOpen((state) => !state); } : undefined; + const isProfilePage = location.pathname === routerPaths.worker.profile; + const isBottomTrayVisible = isMobile && !isProfilePage; + useEffect(() => { if (isMobile) { setHcaptchaDrawerOpen(false); @@ -71,54 +68,64 @@ export function ProtectedLayout({ return ( - - {renderDrawer(drawerOpen, setDrawerOpen)} + {isMobile && ( + + )} + + {!isMobile && } {isHCaptchaLabelingPage && renderHCaptchaStatisticsDrawer ? renderHCaptchaStatisticsDrawer(hcaptchaDrawerOpen) : null} -
- - {renderGovernanceBanner && } - - - - - -
-
+ +
+ + {renderGovernanceBanner && } + + + + + {isBottomTrayVisible && } +
+
+ ); } 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 74e98fdd45..1fde484268 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 @@ -1,13 +1,13 @@ -import { Grid, IconButton, Stack } from '@mui/material'; -import MenuIcon from '@mui/icons-material/Menu'; -import CloseIcon from '@mui/icons-material/Close'; +import { Stack } from '@mui/material'; +// import MenuIcon from '@mui/icons-material/Menu'; +// import CloseIcon from '@mui/icons-material/Close'; import { t } from 'i18next'; import { HumanLogoNavbarIcon } from '@/shared/components/ui/icons'; -import { useIsMobile } from '@/shared/hooks/use-is-mobile'; import { Button } from '@/shared/components/ui/button'; -import { useIsHCaptchaLabelingPage } from '@/shared/hooks/use-is-hcaptcha-labeling-page'; +//import { useIsHCaptchaLabelingPage } from '@/shared/hooks/use-is-hcaptcha-labeling-page'; import { useColorMode } from '@/shared/contexts/color-mode'; import { useHandleMainNavIconClick } from '@/shared/hooks/use-handle-main-nav-icon-click'; +import { ColorModeSwitch } from '@/shared/components/ui/dark-mode-switch'; interface NavbarProps { open: boolean; @@ -19,48 +19,47 @@ interface NavbarProps { export function Navbar({ setOpen, open, - userStatsDrawerOpen, - toggleUserStatsDrawer, + // userStatsDrawerOpen, + // toggleUserStatsDrawer, }: NavbarProps) { const handleMainNavIconClick = useHandleMainNavIconClick(); const { colorPalette } = useColorMode(); - const isMobile = useIsMobile(); - const isHCaptchaLabelingPage = useIsHCaptchaLabelingPage(); + //const isHCaptchaLabelingPage = useIsHCaptchaLabelingPage(); - let iconButton = null; - if (open) { - iconButton = ( - { - setOpen(false); - }} - > - - - ); - } else if (userStatsDrawerOpen) { - iconButton = ( - { - if (toggleUserStatsDrawer) { - toggleUserStatsDrawer(); - } - }} - > - - - ); - } else { - iconButton = ( - { - setOpen(true); - }} - > - - - ); - } + // let iconButton = null; + // if (open) { + // iconButton = ( + // { + // setOpen(false); + // }} + // > + // + // + // ); + // } else if (userStatsDrawerOpen) { + // iconButton = ( + // { + // if (toggleUserStatsDrawer) { + // toggleUserStatsDrawer(); + // } + // }} + // > + // + // + // ); + // } else { + // iconButton = ( + // { + // setOpen(true); + // }} + // > + // + // + // ); + // } return ( { - if (isMobile) { - setOpen(false); - } + setOpen(false); handleMainNavIconClick(); }} > - + {/* ) : null} {iconButton} - + */} ); } diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx deleted file mode 100644 index 9d52ef024e..0000000000 --- a/packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { Box, Grid, Typography } from '@mui/material'; -import React from 'react'; -import { useIsMobile } from '@/shared/hooks/use-is-mobile'; -import { breakpoints } from '@/shared/styles/breakpoints'; - -export interface PageHeaderProps { - headerIcon: React.ReactNode; - headerText: string; - headerItem?: React.ReactNode; -} - -export function PageHeader({ - headerIcon, - headerText, - headerItem, -}: PageHeaderProps) { - const isMobile = useIsMobile(); - return ( - - - - - {headerIcon} - - - - - {headerText} - - - - {!isMobile ? {headerItem} : null} - - ); -} diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/top-menu-items-list.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/top-menu-items-list.tsx deleted file mode 100644 index b8ed1d5933..0000000000 --- a/packages/apps/human-app/frontend/src/router/components/layout/protected/top-menu-items-list.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { - List, - ListItem, - Stack, - ListItemButton, - ListItemText, - Typography, -} from '@mui/material'; -import { useLocation } from 'react-router-dom'; -import { useColorMode } from '@/shared/contexts/color-mode'; -import { useIsMobile } from '@/shared/hooks'; -import { colorPalette } from '@/shared/styles/color-palette'; -import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette'; -import { isDrawerItem } from '../helpers'; -import { type DrawerItem, type MenuItem } from './drawer-navigation'; - -interface MenuItemListProps { - handleItemClick: (item: DrawerItem) => void; - items?: MenuItem[]; -} - -export function TopMenuItemsList({ - handleItemClick, - items, -}: Readonly) { - const { isDarkMode } = useColorMode(); - const isMobile = useIsMobile(); - const location = useLocation(); - - return ( - - {items?.map((item) => { - if (!isDrawerItem(item)) { - return ( - - - {item} - - - ); - } - - const { link, label, disabled, icon } = item; - const isActive = location.pathname === link; - - return ( - - { - handleItemClick(item); - }} - selected={isActive} - sx={{ - borderRadius: '4px', - p: 0, - '&.Mui-selected': { - backgroundColor: isDarkMode - ? onlyDarkModeColor.listItemColor - : colorPalette.primary.shades, - }, - }} - > - - {icon} - - {label} - - } - /> - - - - ); - })} - - ); -} diff --git a/packages/apps/human-app/frontend/src/router/router.tsx b/packages/apps/human-app/frontend/src/router/router.tsx index b22c8052d8..f938b1b921 100644 --- a/packages/apps/human-app/frontend/src/router/router.tsx +++ b/packages/apps/human-app/frontend/src/router/router.tsx @@ -8,30 +8,11 @@ import { import { RequireAuth } from '@/modules/auth/providers/require-auth'; import { RequireWalletConnect } from '@/shared/contexts/wallet-connect'; import { RequireWeb3Auth } from '@/modules/auth-web3/providers/require-web3-auth'; -import { DrawerNavigation } from '@/router/components/layout/protected/drawer-navigation'; -import { operatorDrawerBottomMenuItems } from '@/router/components/drawer-menu-items/drawer-menu-items-operator'; -import { browserAuthProvider } from '@/shared/contexts/browser-auth-provider'; -import { useAuth } from '@/modules/auth/hooks/use-auth'; import { UserStatsDrawer } from '@/modules/worker/hcaptcha-labeling'; import { routerPaths } from './router-paths'; -import { - ProtectedLayout, - UnprotectedLayout, - workerDrawerBottomMenuItems, - workerDrawerTopMenuItems, -} from './components'; +import { ProtectedLayout, UnprotectedLayout } from './components'; export function Router() { - const { user } = useAuth(); - - const handleSignOut = () => { - browserAuthProvider.signOut({ - callback: () => { - window.location.reload(); - }, - }); - }; - return ( }> @@ -52,22 +33,12 @@ export function Router() { /> ))} - {protectedRoutes.map(({ routerProps, pageHeaderProps }) => { + {protectedRoutes.map(({ routerProps }) => { return ( ( - - )} renderHCaptchaStatisticsDrawer={(isOpen) => ( )} @@ -82,22 +53,12 @@ export function Router() { ); })} - {web3ProtectedRoutes.map(({ routerProps, pageHeaderProps }) => ( + {web3ProtectedRoutes.map(({ routerProps }) => ( - ( - - )} - /> + } diff --git a/packages/apps/human-app/frontend/src/router/routes.tsx b/packages/apps/human-app/frontend/src/router/routes.tsx index 46bff008ab..d6b0fd9fba 100644 --- a/packages/apps/human-app/frontend/src/router/routes.tsx +++ b/packages/apps/human-app/frontend/src/router/routes.tsx @@ -1,17 +1,10 @@ import type { RouteProps } from 'react-router-dom'; -import { t } from 'i18next'; import { routerPaths } from '@/router/router-paths'; import { env } from '@/shared/env'; import { RegistrationPage } from '@/modules/worker/oracle-registration'; -import { - HandIcon, - ProfileIcon, - WorkHeaderIcon, -} from '@/shared/components/ui/icons'; -import type { PageHeaderProps } from '@/router/components/layout/protected/page-header'; import { HcaptchaLabelingPage, - UserStatsAccordion, + //UserStatsAccordion, EnableLabelerPage, } from '@/modules/worker/hcaptcha-labeling'; import { @@ -27,7 +20,6 @@ import { HomePage } from '@/modules/homepage'; import { AddKeysOperatorPage, AddStakeOperatorPage, - ConnectWalletOperatorPage, EditExistingKeysSuccessPage, SetUpOperatorPage, } from '@/modules/signup/operator'; @@ -54,10 +46,6 @@ export const unprotectedRoutes: RouteProps[] = [ path: routerPaths.worker.signUp, element: , }, - { - path: routerPaths.operator.connectWallet, - element: , - }, { path: routerPaths.worker.emailVerification, element: , @@ -86,17 +74,12 @@ export const unprotectedRoutes: RouteProps[] = [ export const protectedRoutes: { routerProps: RouteProps; - pageHeaderProps: PageHeaderProps; }[] = [ { routerProps: { path: routerPaths.worker.jobsDiscovery, element: , }, - pageHeaderProps: { - headerIcon: , - headerText: t('protectedPagesHeaders.jobsDiscovery'), - }, }, ...(env.VITE_FEATURE_FLAG_JOBS_DISCOVERY ? [ @@ -105,20 +88,12 @@ export const protectedRoutes: { path: `${routerPaths.worker.jobs}/:address`, element: , }, - pageHeaderProps: { - headerIcon: , - headerText: t('protectedPagesHeaders.jobs'), - }, }, { routerProps: { path: `${routerPaths.worker.registrationInExchangeOracle}/:address`, element: , }, - pageHeaderProps: { - headerIcon: , - headerText: t('protectedPagesHeaders.registrationInExchangeOracle'), - }, }, ] : []), @@ -127,48 +102,29 @@ export const protectedRoutes: { path: routerPaths.worker.profile, element: , }, - pageHeaderProps: { - headerIcon: , - headerText: t('protectedPagesHeaders.profile'), - }, }, { routerProps: { path: routerPaths.worker.HcaptchaLabeling, element: , }, - pageHeaderProps: { - headerIcon: , - headerText: t('protectedPagesHeaders.hcaptchaLabeling'), - headerItem: , - }, }, { routerProps: { path: routerPaths.worker.enableLabeler, element: , }, - pageHeaderProps: { - headerIcon: , - headerText: t('protectedPagesHeaders.hcaptchaLabeling'), - headerItem: , - }, }, ]; export const web3ProtectedRoutes: { routerProps: RouteProps; - pageHeaderProps: PageHeaderProps; }[] = [ { routerProps: { path: routerPaths.operator.profile, element: , }, - pageHeaderProps: { - headerIcon: , - headerText: t('web3ProtectedPagesHeaders.profile'), - }, }, ]; diff --git a/packages/apps/human-app/frontend/src/shared/components/expiration-modal.tsx b/packages/apps/human-app/frontend/src/shared/components/expiration-modal.tsx index 8208ef17a6..302469ed2f 100644 --- a/packages/apps/human-app/frontend/src/shared/components/expiration-modal.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/expiration-modal.tsx @@ -1,69 +1,59 @@ import { t } from 'i18next'; -import { Grid, Typography } from '@mui/material'; +import { Stack, Typography } from '@mui/material'; import { useNavigate } from 'react-router-dom'; import { Button } from '@/shared/components/ui/button'; import { routerPaths } from '@/router/router-paths'; import { browserAuthProvider } from '@/shared/contexts/browser-auth-provider'; import { breakpoints } from '@/shared/styles/breakpoints'; import { useModal } from '@/shared/contexts/modal-context'; +import { useColorMode } from '../contexts/color-mode'; export function ExpirationModal() { const { closeModal } = useModal(); const navigate = useNavigate(); + const { colorPalette } = useColorMode(); + + const handleOnSignInClick = () => { + browserAuthProvider.signOut(); + navigate(routerPaths.worker.signIn, { replace: true }); + closeModal(); + }; return ( - - - {t('expirationModal.header')} - - + + {t('expirationModal.header')} + + + {t('expirationModal.description')} - - - + + + ); } diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/icons.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/icons.tsx index 19802a6512..f05cdb0c89 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/icons.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/icons.tsx @@ -2,20 +2,12 @@ import { SvgIcon, SvgIconProps } from '@mui/material'; import HumanLogoIconLight from '@/assets/icons/icons-human-logo/human-logo.svg'; import HumanLogoIconDark from '@/assets/icons-dark-mode/icons-human-logo/human-logo.svg'; -import HandIconLight from '@/assets/icons/hand.svg'; -import HandIconDark from '@/assets/icons-dark-mode/hand.svg'; import RefreshIconLight from '@/assets/icons/refresh.svg'; import RefreshIconDark from '@/assets/icons-dark-mode/refresh.svg'; -import UserOutlinedIconLight from '@/assets/icons/user-outlined.svg'; -import UserOutlinedIconDark from '@/assets/icons-dark-mode/user-outlined.svg'; -import WorkIconLight from '@/assets/icons/work.svg'; -import WorkIconDark from '@/assets/icons-dark-mode/work.svg'; import HumanLogoNavbarIconLight from '@/assets/icons/icons-navbar/human-logo-navbar.svg'; import HumanLogoNavbarIconDark from '@/assets/icons-dark-mode/icons-navbar/human-logo-navbar.svg'; import HelpIconLight from '@/assets/icons/help.svg'; import HelpIconDark from '@/assets/icons-dark-mode/help.svg'; -import ProfileIconLight from '@/assets/icons/profile-icon.svg'; -import ProfileIconDark from '@/assets/icons-dark-mode/profile-icon.svg'; import CheckmarkIcon from '@/assets/icons/checkmark-icon.svg'; import LockerIconLight from '@/assets/icons/locker-icon.svg'; import LockerIconDark from '@/assets/icons-dark-mode/locker-icon.svg'; @@ -30,8 +22,6 @@ import SunIconLight from '@/assets/icons/sun.svg'; import MoonIconDark from '@/assets/icons-dark-mode/moon.svg'; import MoonIconLight from '@/assets/icons/moon.svg'; import { useColorMode } from '@/shared/contexts/color-mode'; -import WorkHeaderDark from '@/assets/icons-dark-mode/work-header.svg'; -import WorkHeaderLight from '@/assets/icons/work-header.svg'; import CopyIconLight from '@/assets/icons/content-copy.svg'; import CopyIconDark from '@/assets/icons-dark-mode/content-copy.svg'; import EditIconLight from '@/assets/icons/edit-icon.svg'; @@ -42,6 +32,7 @@ import VeriffIconLight from '@/assets/icons/veriff.svg'; import VeriffIconDark from '@/assets/icons-dark-mode/veriff.svg'; import HourglassIconLight from '@/assets/icons/hourglass.svg'; import HourglassIconDark from '@/assets/icons-dark-mode/hourglass.svg'; +import LogoutIcon from '@/assets/icons/logout.svg'; function HumanLogoIcon() { const { isDarkMode } = useColorMode(); @@ -55,38 +46,14 @@ function HumanLogoNavbarIcon() { ); } -function WorkHeaderIcon() { - const { isDarkMode } = useColorMode(); - return isDarkMode ? : ; -} -function HandIcon() { - const { isDarkMode } = useColorMode(); - return isDarkMode ? : ; -} function RefreshIcon() { const { isDarkMode } = useColorMode(); return isDarkMode ? : ; } -function InverseRefreshIcon() { - const { isDarkMode } = useColorMode(); - return isDarkMode ? : ; -} -function UserOutlinedIcon() { - const { isDarkMode } = useColorMode(); - return isDarkMode ? : ; -} -function WorkIcon() { - const { isDarkMode } = useColorMode(); - return isDarkMode ? : ; -} function HelpIcon() { const { isDarkMode } = useColorMode(); return isDarkMode ? : ; } -function ProfileIcon() { - const { isDarkMode } = useColorMode(); - return isDarkMode ? : ; -} function LockerIcon() { const { isDarkMode } = useColorMode(); return isDarkMode ? : ; @@ -188,13 +155,8 @@ function HourglassIcon() { export { HumanLogoIcon, HumanLogoNavbarIcon, - HandIcon, RefreshIcon, - InverseRefreshIcon, - UserOutlinedIcon, - WorkIcon, HelpIcon, - ProfileIcon, CheckmarkIcon, LockerIcon, FiltersButtonIcon, @@ -202,7 +164,6 @@ export { FiltersIcon, SunIcon, MoonIcon, - WorkHeaderIcon, CopyIcon, EditIcon, DeleteIcon, @@ -210,4 +171,5 @@ export { SuccessIcon, VeriffIcon, HourglassIcon, + LogoutIcon, }; diff --git a/packages/apps/human-app/frontend/src/shared/consts.ts b/packages/apps/human-app/frontend/src/shared/consts.ts index 26303f2072..abfe8a21bc 100644 --- a/packages/apps/human-app/frontend/src/shared/consts.ts +++ b/packages/apps/human-app/frontend/src/shared/consts.ts @@ -1,3 +1,4 @@ import { JobType } from '@/modules/smart-contracts/EthKVStore/config'; export const JOB_TYPES = Object.values(JobType); +export const MOBILE_BOTTOM_TRAY_HEIGHT = '110px'; diff --git a/packages/apps/human-app/frontend/src/shared/i18n/en.json b/packages/apps/human-app/frontend/src/shared/i18n/en.json index 956dc6962b..f4b9c5984b 100644 --- a/packages/apps/human-app/frontend/src/shared/i18n/en.json +++ b/packages/apps/human-app/frontend/src/shared/i18n/en.json @@ -202,11 +202,14 @@ "btn": "Sign In" }, "profile": { - "profileHeader": "Profile", + "profileHeader": "Account", + "accountVerified": "Account verified", "email": "Email", "password": "Password", "wallet": "Wallet", + "walletAddress": "Wallet address", "resetPassword": "Reset Password", + "logout": "Logout", "beforeWeGetStarted": "Before we get started", "identityVerification": "Identity verification", "veriffCopy": "We use Veriff to verify your identity. You'll need: keep your phone & Government ID handy.",