From edc0e3ffb37d92a95041a6c8dea1bb47ae3afe0d Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Wed, 4 Sep 2024 16:33:02 +0200 Subject: [PATCH 01/57] fix(human-app/frontend): layout improvments --- .../frontend/src/assets/icons/help.svg | 6 +- .../src/assets/icons/user-outlined.svg | 4 +- .../src/components/ui/profile-list-item.tsx | 1 + .../apps/human-app/frontend/src/i18n/en.json | 30 ++--- .../choose-sign-up-account-type.tsx | 127 ++++++++++-------- .../homepage/components/home-container.tsx | 16 ++- .../src/pages/homepage/components/welcome.tsx | 2 +- .../frontend/src/pages/homepage/home.page.tsx | 20 ++- .../pages/operator/profile/profile.page.tsx | 2 +- .../user-stats-accordion.tsx | 5 +- .../src/pages/worker/profile/profile-data.tsx | 6 +- .../src/pages/worker/profile/profile.page.tsx | 2 +- 12 files changed, 129 insertions(+), 92 deletions(-) diff --git a/packages/apps/human-app/frontend/src/assets/icons/help.svg b/packages/apps/human-app/frontend/src/assets/icons/help.svg index ae8c2ef700..fd42af984e 100644 --- a/packages/apps/human-app/frontend/src/assets/icons/help.svg +++ b/packages/apps/human-app/frontend/src/assets/icons/help.svg @@ -1,4 +1,4 @@ - - - + + + 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 index 49c8752f63..2a59dbb72c 100644 --- a/packages/apps/human-app/frontend/src/assets/icons/user-outlined.svg +++ b/packages/apps/human-app/frontend/src/assets/icons/user-outlined.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/apps/human-app/frontend/src/components/ui/profile-list-item.tsx b/packages/apps/human-app/frontend/src/components/ui/profile-list-item.tsx index ae600c069c..260ed55813 100644 --- a/packages/apps/human-app/frontend/src/components/ui/profile-list-item.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/profile-list-item.tsx @@ -52,6 +52,7 @@ export function ProfileListItem({ : colorPalette.text.primary } component="span" + sx={{ wordBreak: 'break-all' }} variant="body1" > {paragraph} diff --git a/packages/apps/human-app/frontend/src/i18n/en.json b/packages/apps/human-app/frontend/src/i18n/en.json index e227313b2b..e798d41ee8 100644 --- a/packages/apps/human-app/frontend/src/i18n/en.json +++ b/packages/apps/human-app/frontend/src/i18n/en.json @@ -9,7 +9,7 @@ "protectedPagesHeaders": { "profile": "Profile", "jobsDiscovery": "Jobs Discovery", - "hcaptchaLabeling": "hCaptcha Labeling", + "hcaptchaLabeling": "Labeling", "jobs": "Jobs" }, "web3ProtectedPagesHeaders": { @@ -49,7 +49,7 @@ }, "DrawerNavigation": { "jobs": "Jobs", - "captchaLabelling": "hCaptcha labelling", + "captchaLabelling": "Labeling", "jobsDiscovery": "Jobs discovery", "profile": "Profile", "help": "Help", @@ -79,7 +79,7 @@ }, "pageCardError": { "reload": "Reload", - "goHome": "Home page" + "goHome": "Home Page" } }, "homepage": { @@ -93,14 +93,14 @@ "welcome": "Welcome", "howWillUse": "How will you use HUMAN App?", "selectOption": "Please select an option below.", - "iWantToEarn": "I want to earn HMT", - "completeTask": "Complete simple tasks and get paid.", + "iWantToEarn": "I want to complete tasks, and earn HMT", + "completeTask": "Complete multiple task types, and get paid.", "workAnywhere": "Work anywhere, any time.", - "signUpToComplete": "Sign Up to Complete Tasks", - "joinAsOperator": "I want to join as an Operator", - "runAsOracle": "Run an Oracle, or other essential service, and earn fees.", - "becomePartner": "Become a HUMAN App partner.", - "signAsOperator": "Sign Up as an Operator", + "signUpToComplete": "Worker Sign Up", + "joinAsOperator": "I want to join as an operator", + "runAsOracle": "Run an oracle, or other essential service, and earn fees.", + "becomePartner": "Become a HUMAN App operator.", + "signAsOperator": "Operator Sign Up", "termsAndConditions": "Terms & conditions", "cancel": "Cancel" }, @@ -162,7 +162,7 @@ "paragraph1": "We've sent an email to <1>{{email}} Please check your inbox and verify your email.", "paragraph2": "The verification link is valid for 24 hours.", "paragraph3": "<1>Can't find our email? Please check your spam folder, or click below and we will send you a new one.", - "btn": "Resend Reset Password Email", + "btn": "Resend Email", "btnAfterSend": "Resend Email", "paragraph4": "<1>Having trouble? Please <2>Contact Support" }, @@ -198,7 +198,7 @@ "emailNotifications": "Email Notifications", "notificationsConsent": "I would like to be notified about News and Offers", "topNotifications": { - "noKYC": "Please complete your profile! You still need to complete KYC, connect your wallet and add KYC info on-chain.", + "noKYC": "Please set up your profile by completing the steps below.", "noWalletConnected": "Please complete your profile! You still need to connect your wallet and add KYC info on-chain.", "registerAddress": "Register Address" } @@ -263,11 +263,11 @@ "noJobs": "No jobs available at the moment. Please come back in:" }, "enableHCaptchaLabeling": { - "description": "To earn HMT, you must enable data-labeling. Rewards will be automatically sent to your wallet according to a predefined schedule.", - "enableButton": "Enable Labeling" + "description": "CAPTCHA tasks involve the correct labeling of images in a group of images. Read the instructional prompt, and select the images that best correspond to that prompt.", + "enableButton": "Begin Labeling" }, "hcaptchaLabelingStats": { - "hCapchaStatistics": "hCapcha Statistics", + "hCapchaStatistics": "Statistics", "statistics": "Statistics", "allTime": "All Time", "jobsServed": "Jobs served", diff --git a/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx b/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx index 0ec1eb57fa..6ab6c60b1e 100644 --- a/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx +++ b/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx @@ -4,9 +4,9 @@ import { Link } from 'react-router-dom'; import { colorPalette } from '@/styles/color-palette'; import { Button } from '@/components/ui/button'; import { useIsMobile } from '@/hooks/use-is-mobile'; -import type { HomePageStageType } from '@/pages/homepage/components/home-container'; import { routerPaths } from '@/router/router-paths'; import { PageCard } from '@/components/ui/page-card'; +import type { HomePageStageType } from '@/pages/homepage/home.page'; interface ChooseSignUpAccountType { setStage: (step: HomePageStageType) => void; @@ -15,6 +15,7 @@ interface ChooseSignUpAccountType { export function ChooseSignUpAccountType({ setStage }: ChooseSignUpAccountType) { const { t } = useTranslation(); const isMobile = useIsMobile('lg'); + const isMobileMd = useIsMobile('md'); const backToWelcomeStage = () => { setStage('welcome'); @@ -24,10 +25,11 @@ export function ChooseSignUpAccountType({ setStage }: ChooseSignUpAccountType) { {t('homepage.welcome')} 👋} > - + {t('homepage.howWillUse')} @@ -51,35 +53,37 @@ export function ChooseSignUpAccountType({ setStage }: ChooseSignUpAccountType) { justifyContent: 'space-between', }} > - - {t('homepage.iWantToEarn')} - - - - + + {t('homepage.iWantToEarn')} + + - + > + + + + - - {t('homepage.joinAsOperator')} - - - - + + {t('homepage.joinAsOperator')} + + - + > + + + + ('welcome'); +export function HomeContainer({ + stage, + setStage, +}: { + stage: HomePageStageType; + setStage: (step: HomePageStageType) => void; +}) { const { setWhiteBackground, setGrayBackground } = useBackgroundColorStore(); useEffect(() => { @@ -19,7 +23,7 @@ export function HomeContainer() { }, [setGrayBackground, setWhiteBackground, stage]); return ( - + {stage === 'welcome' && } {stage === 'chooseSignUpAccountType' && ( diff --git a/packages/apps/human-app/frontend/src/pages/homepage/components/welcome.tsx b/packages/apps/human-app/frontend/src/pages/homepage/components/welcome.tsx index 8fdd412286..c9bba84513 100644 --- a/packages/apps/human-app/frontend/src/pages/homepage/components/welcome.tsx +++ b/packages/apps/human-app/frontend/src/pages/homepage/components/welcome.tsx @@ -9,9 +9,9 @@ import { import { Button } from '@/components/ui/button'; import { colorPalette } from '@/styles/color-palette'; import { useIsMobile } from '@/hooks/use-is-mobile'; -import type { HomePageStageType } from '@/pages/homepage/components/home-container'; import { OperatorSignIn } from '@/pages/homepage/components/operator-signin'; import { WorkerSignIn } from '@/pages/homepage/components/worker-signin'; +import type { HomePageStageType } from '@/pages/homepage/home.page'; interface WelcomeProps { setStage: (step: HomePageStageType) => void; diff --git a/packages/apps/human-app/frontend/src/pages/homepage/home.page.tsx b/packages/apps/human-app/frontend/src/pages/homepage/home.page.tsx index c715d0f6c1..154c78af80 100644 --- a/packages/apps/human-app/frontend/src/pages/homepage/home.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/homepage/home.page.tsx @@ -1,15 +1,22 @@ import Box from '@mui/material/Box'; import { Paper } from '@mui/material'; import { Navigate } from 'react-router-dom'; +import { useState } from 'react'; +import { t } from 'i18next'; import { colorPalette } from '@/styles/color-palette'; import { useIsMobile } from '@/hooks/use-is-mobile'; import { useWeb3Auth } from '@/auth-web3/use-web3-auth'; import { useAuth } from '@/auth/use-auth'; import { routerPaths } from '@/router/router-paths'; +import { Button } from '@/components/ui/button'; import { HomeContainer } from './components/home-container'; +export type HomePageStageType = 'welcome' | 'chooseSignUpAccountType'; + export function HomePage() { + const [stage, setStage] = useState('welcome'); const isMobile = useIsMobile(); + const isMobileMd = useIsMobile('md'); const { user: worker } = useAuth(); const { user: operator } = useWeb3Auth(); @@ -25,14 +32,23 @@ export function HomePage() { - + + {stage === 'chooseSignUpAccountType' && !isMobileMd ? ( + + ) : null} ); diff --git a/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx index 8d4369cc11..78835f20f1 100644 --- a/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx @@ -66,7 +66,7 @@ export function OperatorProfilePage() { backgroundColor: colorPalette.white, height: '100%', boxShadow: 'none', - padding: isMobile ? '20px' : '40px', + padding: isMobile ? '60px 20px' : '100px 40px', borderRadius: '20px', }} > diff --git a/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-accordion.tsx b/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-accordion.tsx index 38b163a830..6449287f62 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-accordion.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-accordion.tsx @@ -5,6 +5,7 @@ import Typography from '@mui/material/Typography'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Grid from '@mui/material/Grid'; import { useEffect } from 'react'; +import { t } from 'i18next'; import { UserStatsDetails } from '@/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-details'; import { useHCaptchaUserStats } from '@/api/services/worker/hcaptcha-user-stats'; import { useProtectedLayoutNotification } from '@/hooks/use-protected-layout-notifications'; @@ -42,7 +43,9 @@ export function UserStatsAccordion() { id="panel1-header" sx={{ ...accordionWidth, height: '76px' }} > - hCapcha Statistics + + {t('worker.hcaptchaLabelingStats.statistics')} + {hcaptchaUserStats ? ( diff --git a/packages/apps/human-app/frontend/src/pages/worker/profile/profile-data.tsx b/packages/apps/human-app/frontend/src/pages/worker/profile/profile-data.tsx index eba1565455..33371a96ca 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/profile/profile-data.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/profile/profile-data.tsx @@ -14,7 +14,11 @@ export function ProfileData() { {t('worker.profile.email')} - + {user.email} diff --git a/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx index 0b8a974a33..f8393d65fa 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx @@ -54,7 +54,7 @@ export function WorkerProfilePage() { backgroundColor: colorPalette.white, height: '100%', boxShadow: 'none', - padding: isMobile ? '20px' : '40px', + padding: isMobile ? '60px 20px' : '100px 40px', display: 'flex', flexDirection: 'column', borderRadius: '20px', From 4d00903fb38a42e93b0c815d24aac8780880c9d4 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Fri, 6 Sep 2024 16:16:17 +0200 Subject: [PATCH 02/57] update(human-app/frontend): change copy --- packages/apps/human-app/frontend/src/i18n/en.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/apps/human-app/frontend/src/i18n/en.json b/packages/apps/human-app/frontend/src/i18n/en.json index e798d41ee8..6834aa89e6 100644 --- a/packages/apps/human-app/frontend/src/i18n/en.json +++ b/packages/apps/human-app/frontend/src/i18n/en.json @@ -259,11 +259,11 @@ "next": "Next" }, "hcaptchaLabeling": { - "description": "To earn HMT, you must complete data-labeling tasks. Rewards will be automatically sent to your wallet according to a predefined schedule.", + "description": "HMT payouts are automatically computed by an oracle based on correctness and volume of tasks completed. Payout timing depends on total job size, and can take as little as an hour or as long as a week or so, depending on overall job status.", "noJobs": "No jobs available at the moment. Please come back in:" }, "enableHCaptchaLabeling": { - "description": "CAPTCHA tasks involve the correct labeling of images in a group of images. Read the instructional prompt, and select the images that best correspond to that prompt.", + "description": "HMT payouts are automatically computed by an oracle based on correctness and volume of tasks completed. Payout timing depends on total job size, and can take as little as an hour or as long as a week or so, depending on overall job status.", "enableButton": "Begin Labeling" }, "hcaptchaLabelingStats": { @@ -274,7 +274,7 @@ "jobsComplete": "Jobs complete", "hmtEarned": "HMT earned", "lastHour": "Last hour", - "earnedLastHour": "HMT earned in last hour", + "earnedLastHour": "HMT earned in the last hour", "statisticsNotLive": "Statistics are not live. Please refresh to view live statistics.", "solvedSuccess": "HCaptcha solved!" } From 8df3feb438e0e2b17886a9d1eef862822ee6b327 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Tue, 10 Sep 2024 09:59:14 +0200 Subject: [PATCH 03/57] feat(human-app): add dark mode config --- .../frontend/src/auth/expiration-modal.tsx | 2 +- .../src/components/data-entry/checkbox.tsx | 4 +- .../src/components/data-entry/input.tsx | 4 +- .../components/data-entry/multi-select.tsx | 3 +- .../data-entry/password/password.tsx | 3 +- .../frontend/src/components/h-captcha.tsx | 3 +- .../frontend/src/components/layout/footer.tsx | 5 +- .../components/layout/protected/layout.tsx | 2 +- .../components/layout/protected/navbar.tsx | 3 +- .../layout/protected/page-header.tsx | 2 +- .../components/layout/unprotected/layout.tsx | 5 +- .../components/layout/unprotected/navbar.tsx | 2 +- .../frontend/src/components/ui/alert.tsx | 3 +- .../frontend/src/components/ui/chip.tsx | 4 +- .../src/components/ui/empty-placeholder.tsx | 4 +- .../frontend/src/components/ui/loader.tsx | 22 +- .../frontend/src/components/ui/page-card.tsx | 49 +++- .../src/components/ui/profile-list-item.tsx | 3 +- .../src/components/ui/success-label.tsx | 4 +- .../src/components/ui/table-button.tsx | 4 +- .../table/table-header-menu.tsx/filtering.tsx | 4 +- .../table/table-header-menu.tsx/sorting.tsx | 4 +- .../src/components/ui/top-notification.tsx | 11 +- .../frontend/src/components/ui/ui-example.tsx | 3 +- .../src/contexts/background-color-store.tsx | 43 +++ .../src/contexts/color-mode-context.tsx | 75 +++++ .../src/hooks/use-background-store.tsx | 29 +- .../frontend/src/hooks/use-color-mode.tsx | 11 + packages/apps/human-app/frontend/src/main.tsx | 9 +- .../choose-sign-up-account-type.tsx | 3 +- .../src/pages/homepage/components/welcome.tsx | 3 +- .../frontend/src/pages/homepage/home.page.tsx | 3 +- .../pages/operator/profile/profile.page.tsx | 3 +- .../add-keys/edit-existing-keys-form.tsx | 3 +- .../sign-up/add-keys/existing-keys.tsx | 3 +- .../sign-up/add-stake/add-stake.page.tsx | 3 +- .../operator/sign-up/add-stake/buttons.tsx | 2 +- .../operator/sign-up/add-stake/stake-form.tsx | 2 +- .../table-example/table-search-form.tsx | 3 +- .../email-verification/verify-email.page.tsx | 3 +- .../hcaptcha-labeling/enable-labeler.page.tsx | 5 +- .../hcaptcha-labeling.page.tsx | 5 +- .../hcaptcha-labeling/user-stats-details.tsx | 4 +- .../jobs-discovery/jobs-discovery.page.tsx | 3 +- .../oracles-table/oracles-table-mobile.tsx | 4 +- .../desktop/available-jobs-table.tsx | 25 +- .../mobile/available-jobs-drawer-mobile.tsx | 3 +- .../mobile/available-jobs-table-mobile.tsx | 3 +- .../worker/jobs/components/drawer-mobile.tsx | 3 +- .../worker/jobs/components/evm-address.tsx | 6 +- .../my-jobs/desktop/my-jobs-table.tsx | 13 +- .../my-jobs/mobile/my-jobs-drawer-mobile.tsx | 3 +- .../my-jobs/mobile/my-jobs-table-mobile.tsx | 3 +- .../my-jobs/parse-job-status-chip-color.ts | 7 +- .../worker/jobs/components/reject-button.tsx | 4 +- .../src/pages/worker/jobs/jobs.page.tsx | 3 +- .../src/pages/worker/profile/profile-data.tsx | 3 +- .../src/pages/worker/profile/profile.page.tsx | 3 +- .../worker/profile/wallet-connect-done.tsx | 19 +- .../reset-password-success.page.tsx | 3 +- .../send-reset-link-success.page.tsx | 3 +- .../frontend/src/styles/breakpoints.ts | 4 + .../frontend/src/styles/color-palette.ts | 5 +- .../frontend/src/styles/dark-color-palette.ts | 51 ++++ .../frontend/src/styles/dark-theme.ts | 147 ++++++++++ .../human-app/frontend/src/styles/theme.ts | 269 +----------------- .../frontend/src/styles/typography.ts | 264 +++++++++++++++++ 67 files changed, 833 insertions(+), 383 deletions(-) create mode 100644 packages/apps/human-app/frontend/src/contexts/background-color-store.tsx create mode 100644 packages/apps/human-app/frontend/src/contexts/color-mode-context.tsx create mode 100644 packages/apps/human-app/frontend/src/hooks/use-color-mode.tsx create mode 100644 packages/apps/human-app/frontend/src/styles/breakpoints.ts create mode 100644 packages/apps/human-app/frontend/src/styles/dark-color-palette.ts create mode 100644 packages/apps/human-app/frontend/src/styles/dark-theme.ts create mode 100644 packages/apps/human-app/frontend/src/styles/typography.ts diff --git a/packages/apps/human-app/frontend/src/auth/expiration-modal.tsx b/packages/apps/human-app/frontend/src/auth/expiration-modal.tsx index e769309f69..107fec5bd5 100644 --- a/packages/apps/human-app/frontend/src/auth/expiration-modal.tsx +++ b/packages/apps/human-app/frontend/src/auth/expiration-modal.tsx @@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button'; import { useModalStore } from '@/components/ui/modal/modal.store'; import { routerPaths } from '@/router/router-paths'; import { browserAuthProvider } from '@/shared/helpers/browser-auth-provider'; -import { breakpoints } from '@/styles/theme'; +import { breakpoints } from '@/styles/breakpoints'; export function ExpirationModal() { const { closeModal } = useModalStore(); diff --git a/packages/apps/human-app/frontend/src/components/data-entry/checkbox.tsx b/packages/apps/human-app/frontend/src/components/data-entry/checkbox.tsx index 30fa569b82..5a3d006997 100644 --- a/packages/apps/human-app/frontend/src/components/data-entry/checkbox.tsx +++ b/packages/apps/human-app/frontend/src/components/data-entry/checkbox.tsx @@ -4,7 +4,7 @@ import CheckboxMui from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; -import { colorPalette } from '@/styles/color-palette'; +import { useColorMode } from '@/hooks/use-color-mode'; interface InputProps extends Omit { name: string; @@ -12,6 +12,8 @@ interface InputProps extends Omit { } export function Checkbox({ name, label = '', ...rest }: InputProps) { + const { colorPalette } = useColorMode(); + return ( { @@ -23,6 +23,8 @@ export function Input({ mask, ...rest }: InputProps) { + const { colorPalette } = useColorMode(); + return ( { options: string[]; @@ -36,6 +36,7 @@ export function MultiSelect({ label, ...props }: MultiSelectProps) { + const { colorPalette } = useColorMode(); const { t } = useTranslation(); const context = useFormContext(); diff --git a/packages/apps/human-app/frontend/src/components/data-entry/password/password.tsx b/packages/apps/human-app/frontend/src/components/data-entry/password/password.tsx index 5576786e76..f1c1dba938 100644 --- a/packages/apps/human-app/frontend/src/components/data-entry/password/password.tsx +++ b/packages/apps/human-app/frontend/src/components/data-entry/password/password.tsx @@ -4,11 +4,12 @@ import React, { useState } from 'react'; import InputAdornment from '@mui/material/InputAdornment'; import IconButton from '@mui/material/IconButton'; import { Input, type InputProps } from '@/components/data-entry/input'; -import { colorPalette } from '@/styles/color-palette'; +import { useColorMode } from '@/hooks/use-color-mode'; type PasswordProps = InputProps & { type?: never }; export function Password(props: PasswordProps) { + const { colorPalette } = useColorMode(); const [showPassword, setShowPassword] = useState(false); const handleClickShowPassword = () => { diff --git a/packages/apps/human-app/frontend/src/components/h-captcha.tsx b/packages/apps/human-app/frontend/src/components/h-captcha.tsx index dd25240c25..f2178cb2f5 100644 --- a/packages/apps/human-app/frontend/src/components/h-captcha.tsx +++ b/packages/apps/human-app/frontend/src/components/h-captcha.tsx @@ -3,8 +3,8 @@ import HCaptcha from '@hcaptcha/react-hcaptcha'; import { useFormContext } from 'react-hook-form'; import { Typography } from '@mui/material'; import { env } from '@/shared/env'; -import { colorPalette } from '@/styles/color-palette'; import { FetchError } from '@/api/fetcher'; +import { useColorMode } from '@/hooks/use-color-mode'; interface CaptchaProps { setCaptchaToken: (token: string) => void; @@ -35,6 +35,7 @@ interface FormCaptchaProps { } export function FormCaptcha({ name, error }: FormCaptchaProps) { + const { colorPalette } = useColorMode(); const { setValue, formState } = useFormContext>(); function setCaptchaToken(token: string) { diff --git a/packages/apps/human-app/frontend/src/components/layout/footer.tsx b/packages/apps/human-app/frontend/src/components/layout/footer.tsx index 01fb72a957..3c702aad3a 100644 --- a/packages/apps/human-app/frontend/src/components/layout/footer.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/footer.tsx @@ -1,16 +1,17 @@ import { Grid, Link, Stack, Typography } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { useIsMobile } from '@/hooks/use-is-mobile'; -import { colorPalette } from '@/styles/color-palette'; import { env } from '@/shared/env'; import { Chat } from '@/pages/homepage/components/chat'; -import { breakpoints } from '@/styles/theme'; +import { breakpoints } from '@/styles/breakpoints'; +import { useColorMode } from '@/hooks/use-color-mode'; interface FooterProps { displayChatIcon?: boolean; isProtected?: boolean; } export function Footer({ isProtected, displayChatIcon = true }: FooterProps) { + const { colorPalette } = useColorMode(); const { t } = useTranslation(); const isMobile = useIsMobile('md'); diff --git a/packages/apps/human-app/frontend/src/components/layout/protected/layout.tsx b/packages/apps/human-app/frontend/src/components/layout/protected/layout.tsx index 09d36dc6ff..ba5f846302 100644 --- a/packages/apps/human-app/frontend/src/components/layout/protected/layout.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/protected/layout.tsx @@ -6,7 +6,7 @@ import { useIsMobile } from '@/hooks/use-is-mobile'; import { useBackgroundColorStore } from '@/hooks/use-background-store'; import type { PageHeaderProps } from '@/components/layout/protected/page-header'; import { PageHeader } from '@/components/layout/protected/page-header'; -import { breakpoints } from '@/styles/theme'; +import { breakpoints } from '@/styles/breakpoints'; import { TopNotification } from '@/components/ui/top-notification'; import type { TopNotificationPayload } from '@/components/layout/protected/layout-notification-context'; import { ProtectedLayoutContext } from '@/components/layout/protected/layout-notification-context'; diff --git a/packages/apps/human-app/frontend/src/components/layout/protected/navbar.tsx b/packages/apps/human-app/frontend/src/components/layout/protected/navbar.tsx index 85c34bbe64..7719cc84c1 100644 --- a/packages/apps/human-app/frontend/src/components/layout/protected/navbar.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/protected/navbar.tsx @@ -4,9 +4,9 @@ import CloseIcon from '@mui/icons-material/Close'; import { t } from 'i18next'; import { HumanLogoIcon } from '@/components/ui/icons'; import { useIsMobile } from '@/hooks/use-is-mobile'; -import { colorPalette } from '@/styles/color-palette'; import { Button } from '@/components/ui/button'; import { useIsHCaptchaLabelingPage } from '@/hooks/use-is-hcaptcha-labeling-page'; +import { useColorMode } from '@/hooks/use-color-mode'; export const NAVBAR_PADDING = '44px'; @@ -23,6 +23,7 @@ export function Navbar({ userStatsDrawerOpen, toggleUserStatsDrawer, }: NavbarProps) { + const { colorPalette } = useColorMode(); const isMobile = useIsMobile(); const isHCaptchaLabelingPage = useIsHCaptchaLabelingPage(); const getIcon = () => { diff --git a/packages/apps/human-app/frontend/src/components/layout/protected/page-header.tsx b/packages/apps/human-app/frontend/src/components/layout/protected/page-header.tsx index fb169f0c76..28a9f827f1 100644 --- a/packages/apps/human-app/frontend/src/components/layout/protected/page-header.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/protected/page-header.tsx @@ -1,7 +1,7 @@ import { Grid, Typography } from '@mui/material'; import React from 'react'; import { useIsMobile } from '@/hooks/use-is-mobile'; -import { breakpoints } from '@/styles/theme'; +import { breakpoints } from '@/styles/breakpoints'; export interface PageHeaderProps { headerIcon: React.ReactNode; diff --git a/packages/apps/human-app/frontend/src/components/layout/unprotected/layout.tsx b/packages/apps/human-app/frontend/src/components/layout/unprotected/layout.tsx index 8e40680b75..94d2b25e15 100644 --- a/packages/apps/human-app/frontend/src/components/layout/unprotected/layout.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/unprotected/layout.tsx @@ -2,8 +2,8 @@ import { Container, Grid } from '@mui/material'; import { Outlet } from 'react-router-dom'; import { useBackgroundColorStore } from '@/hooks/use-background-store'; import { useIsMobile } from '@/hooks/use-is-mobile'; -import { colorPalette } from '@/styles/color-palette'; -import { breakpoints } from '@/styles/theme'; +import { breakpoints } from '@/styles/breakpoints'; +import { useColorMode } from '@/hooks/use-color-mode'; import { Footer } from '../footer'; import { Navbar } from './navbar'; @@ -12,6 +12,7 @@ interface LayoutProps { } export function Layout({ withNavigation = true }: LayoutProps) { + const { colorPalette } = useColorMode(); const { backgroundColor } = useBackgroundColorStore(); const isMobile = useIsMobile(); diff --git a/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx b/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx index 51a7d4e6f5..41ef3c0436 100644 --- a/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx @@ -6,7 +6,7 @@ import { Link, useLocation } from 'react-router-dom'; import { HumanLogoIcon, HumanLogoNavbarIcon } from '@/components/ui/icons'; import { useIsMobile } from '@/hooks/use-is-mobile'; import { Button } from '@/components/ui/button'; -import { breakpoints } from '@/styles/theme'; +import { breakpoints } from '@/styles/breakpoints'; import { routerPaths } from '@/router/router-paths'; import { env } from '@/shared/env'; diff --git a/packages/apps/human-app/frontend/src/components/ui/alert.tsx b/packages/apps/human-app/frontend/src/components/ui/alert.tsx index 6b8bb48e89..53e8d5dfdb 100644 --- a/packages/apps/human-app/frontend/src/components/ui/alert.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/alert.tsx @@ -4,7 +4,7 @@ import ErrorIcon from '@mui/icons-material/Error'; import MuiAlert from '@mui/material/Alert'; import type { AlertProps as MuiAlertProps } from '@mui/material/Alert'; import { Typography } from '@mui/material'; -import { colorPalette } from '@/styles/color-palette'; +import { useColorMode } from '@/hooks/use-color-mode'; const getIcon = (severity: MuiAlertProps['severity']) => { switch (severity) { @@ -23,6 +23,7 @@ const getIcon = (severity: MuiAlertProps['severity']) => { }; export function Alert({ severity, color, children, ...rest }: MuiAlertProps) { + const { colorPalette } = useColorMode(); const icon = getIcon(severity); const fontColor = color === 'error' ? colorPalette.error.main : 'inherit'; return ( diff --git a/packages/apps/human-app/frontend/src/components/ui/chip.tsx b/packages/apps/human-app/frontend/src/components/ui/chip.tsx index 1d2b40d3ce..e6aa269193 100644 --- a/packages/apps/human-app/frontend/src/components/ui/chip.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/chip.tsx @@ -1,5 +1,5 @@ import { Box, Typography } from '@mui/material'; -import { colorPalette } from '@/styles/color-palette'; +import { useColorMode } from '@/hooks/use-color-mode'; interface ChipProps { label: string; @@ -7,6 +7,8 @@ interface ChipProps { backgroundColor?: string; } export function Chip({ label, backgroundColor }: ChipProps) { + const { colorPalette } = useColorMode(); + return ( {t('operator.addKeysPage.existingKeys.noValue')} diff --git a/packages/apps/human-app/frontend/src/components/ui/loader.tsx b/packages/apps/human-app/frontend/src/components/ui/loader.tsx index 7e8eaf4581..fed34e9fbb 100644 --- a/packages/apps/human-app/frontend/src/components/ui/loader.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/loader.tsx @@ -1,12 +1,18 @@ -import { styled } from '@mui/material'; -import type { CircularProgressProps } from '@mui/material'; +import type { CircularProgressProps } from '@mui/material/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress'; -import { colorPalette } from '@/styles/color-palette'; - -const LoaderStyled = styled(CircularProgress)({ - '.MuiCircularProgress-circle': { color: colorPalette.primary.main }, -}); +import { useColorMode } from '@/hooks/use-color-mode'; export function Loader({ ...props }: CircularProgressProps) { - return ; + const { colorPalette } = useColorMode(); + + return ( + + ); } diff --git a/packages/apps/human-app/frontend/src/components/ui/page-card.tsx b/packages/apps/human-app/frontend/src/components/ui/page-card.tsx index f1b30ad492..f21a0d590d 100644 --- a/packages/apps/human-app/frontend/src/components/ui/page-card.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/page-card.tsx @@ -5,12 +5,14 @@ import { useNavigate } from 'react-router-dom'; import { useEffect } from 'react'; import { t } from 'i18next'; import { Button } from '@/components/ui/button'; -import { breakpoints } from '@/styles/theme'; +import { breakpoints } from '@/styles/breakpoints'; import { routerPaths } from '@/router/router-paths'; -import { colorPalette } from '@/styles/color-palette'; +import { colorPalette as constColorPalette } from '@/styles/color-palette'; import { useBackgroundColorStore } from '@/hooks/use-background-store'; import { Loader } from '@/components/ui/loader'; import { Alert } from '@/components/ui/alert'; +import { darkColorPalette as constDarkColorPalette } from '@/styles/dark-color-palette'; +import { useColorMode } from '@/hooks/use-color-mode'; const IconWrapper = styled('div')(() => ({ width: '40px', @@ -19,7 +21,6 @@ const IconWrapper = styled('div')(() => ({ justifyContent: 'center', alignItems: 'center', borderRadius: '50%', - backgroundColor: colorPalette.paper.main, cursor: 'pointer', ':hover': { cursor: 'pointer', @@ -36,7 +37,19 @@ const commonStyles: SxProps = { minHeight: '70vh', maxWidth: '1200px', width: '100%', - background: colorPalette.white, + background: constColorPalette.white, +}; + +const commonStylesDark: SxProps = { + padding: '2rem 2rem 6rem 2rem', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + borderRadius: '20px', + minHeight: '70vh', + maxWidth: '1200px', + width: '100%', + background: constDarkColorPalette.white, }; type ButtonsProps = string | -1 | (() => void); @@ -65,6 +78,7 @@ export function PageCard({ hiddenCancelButton = false, hiddenArrowButton = false, }: FormCardProps) { + const { isDarkMode, colorPalette } = useColorMode(); const { setGrayBackground } = useBackgroundColorStore(); const navigate = useNavigate(); @@ -88,7 +102,7 @@ export function PageCard({ }; return ( - + {!hiddenCancelButton && ( @@ -206,7 +221,12 @@ export function PageCard({ xs={12} > {backArrowPath && !hiddenArrowButton ? ( - + ) : null} @@ -231,6 +251,7 @@ export function PageCardLoader({ cardMaxWidth?: string; withLayoutBackground?: boolean; }) { + const { isDarkMode } = useColorMode(); const { setGrayBackground } = useBackgroundColorStore(); useEffect(() => { @@ -239,9 +260,15 @@ export function PageCardLoader({ } // eslint-disable-next-line react-hooks/exhaustive-deps -- call this effect once }, []); + + const commonStyleForTheme = isDarkMode ? commonStylesDark : commonStyles; + const sx = cardMaxWidth - ? { ...commonStyles, maxWidth: cardMaxWidth } - : commonStyles; + ? { + ...commonStyleForTheme, + maxWidth: cardMaxWidth, + } + : commonStyleForTheme; return ( @@ -267,12 +294,14 @@ export function PageCardError({ cardMaxWidth?: string; withLayoutBackground?: boolean; }) { + const { isDarkMode } = useColorMode(); const navigate = useNavigate(); const { setGrayBackground } = useBackgroundColorStore(); + const commonStyleForTheme = isDarkMode ? commonStylesDark : commonStyles; const sx = cardMaxWidth - ? { ...commonStyles, maxWidth: cardMaxWidth } - : commonStyles; + ? { ...commonStyleForTheme, maxWidth: cardMaxWidth } + : commonStyleForTheme; useEffect(() => { if (withLayoutBackground) { diff --git a/packages/apps/human-app/frontend/src/components/ui/profile-list-item.tsx b/packages/apps/human-app/frontend/src/components/ui/profile-list-item.tsx index 260ed55813..5469ab5ef4 100644 --- a/packages/apps/human-app/frontend/src/components/ui/profile-list-item.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/profile-list-item.tsx @@ -2,8 +2,8 @@ import { ListItem, ListItemText, Stack, Typography } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { Button } from '@/components/ui/button'; import { CheckmarkIcon, LockerIcon } from '@/components/ui/icons'; -import { colorPalette } from '@/styles/color-palette'; import { Chips } from '@/components/ui/chips'; +import { useColorMode } from '@/hooks/use-color-mode'; interface ProfileListItemProps { header: string; @@ -16,6 +16,7 @@ export function ProfileListItem({ paragraph, isStatusListItem, }: ProfileListItemProps) { + const { colorPalette } = useColorMode(); const { t } = useTranslation(); return ( diff --git a/packages/apps/human-app/frontend/src/components/ui/success-label.tsx b/packages/apps/human-app/frontend/src/components/ui/success-label.tsx index 2335ab5bb0..a79cf3d5b6 100644 --- a/packages/apps/human-app/frontend/src/components/ui/success-label.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/success-label.tsx @@ -1,8 +1,10 @@ import Grid from '@mui/material/Grid'; import CheckCircleIcon from '@mui/icons-material/CheckCircle'; -import { colorPalette } from '@/styles/color-palette'; +import { useColorMode } from '@/hooks/use-color-mode'; export function SuccessLabel({ children }: { children: string }) { + const { colorPalette } = useColorMode(); + return ( {children} diff --git a/packages/apps/human-app/frontend/src/components/ui/table-button.tsx b/packages/apps/human-app/frontend/src/components/ui/table-button.tsx index 0cda2cb026..c361d4ee31 100644 --- a/packages/apps/human-app/frontend/src/components/ui/table-button.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/table-button.tsx @@ -1,9 +1,11 @@ import Typography from '@mui/material/Typography'; import type { CustomButtonProps } from '@/components/ui/button'; import { Button } from '@/components/ui/button'; -import { colorPalette } from '@/styles/color-palette'; +import { useColorMode } from '@/hooks/use-color-mode'; export function TableButton(props: CustomButtonProps) { + const { colorPalette } = useColorMode(); + return ( ) : null} - {getIcon()} + {getIcon()} ); diff --git a/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx b/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx index 41ef3c0436..5bea0a350b 100644 --- a/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx @@ -74,6 +74,7 @@ export function Navbar({ withNavigation }: NavbarProps) { { setIsDrawerOpen(!isDrawerOpen); }} diff --git a/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx index 9ec3cf310b..f775bbfb45 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx @@ -9,7 +9,6 @@ import type { UserData } from '@/auth/auth-context'; import { useWalletConnect } from '@/hooks/use-wallet-connect'; import { useBackgroundColorStore } from '@/hooks/use-background-store'; import { useIsMobile } from '@/hooks/use-is-mobile'; -import { useColorMode } from '@/hooks/use-color-mode'; const getNotificationMessage = ( user: UserData & { isWalletConnected: boolean } @@ -25,7 +24,6 @@ const getNotificationMessage = ( }; export function WorkerProfilePage() { - const { colorPalette } = useColorMode(); const isMobile = useIsMobile(); const { user } = useAuthenticatedUser(); const { isConnected } = useWalletConnect(); @@ -52,7 +50,6 @@ export function WorkerProfilePage() { return ( Date: Wed, 11 Sep 2024 13:14:49 +0200 Subject: [PATCH 07/57] feat(human-app): adjust colors to dark mode --- .../src/components/ui/top-notification.tsx | 24 +++++++++++-------- .../pages/operator/profile/profile.page.tsx | 2 -- .../frontend/src/styles/dark-theme.ts | 2 +- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/apps/human-app/frontend/src/components/ui/top-notification.tsx b/packages/apps/human-app/frontend/src/components/ui/top-notification.tsx index 3d6ec88c95..ecc705b956 100644 --- a/packages/apps/human-app/frontend/src/components/ui/top-notification.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/top-notification.tsx @@ -5,17 +5,17 @@ import { Typography } from '@mui/material'; import ErrorIcon from '@mui/icons-material/Error'; import { breakpoints } from '@/styles/breakpoints'; import { useColorMode } from '@/hooks/use-color-mode'; -import type { ColorPalette } from '@/styles/color-palette'; +import { colorPalette as lightColorPalette } from '@/styles/color-palette'; export type TopNotificationType = 'success' | 'warning'; -const getIcon = (type: TopNotificationType, colorPalette: ColorPalette) => { +const getIcon = (type: TopNotificationType) => { switch (type) { case 'success': - return ; + return ; case 'warning': - return ; + return ; } }; @@ -30,16 +30,20 @@ export function TopNotification({ }: TopNotificationProps) { const { colorPalette } = useColorMode(); - const icon = getIcon(type, colorPalette); - const color = - type === 'success' ? colorPalette.success.main : colorPalette.primary.light; + const icon = getIcon(type); + const backgroundColor = + type === 'success' + ? colorPalette.success.main + : colorPalette.secondary.main; + const fontColor = lightColorPalette.white; + return ( - + {children} diff --git a/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx index a46d7738f2..51b6f95976 100644 --- a/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx @@ -64,7 +64,6 @@ export function OperatorProfilePage() { Date: Wed, 11 Sep 2024 13:23:01 +0200 Subject: [PATCH 08/57] feat(human-app): achange RGBA to HEX for dark palette --- .../frontend/src/styles/dark-color-palette.ts | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts b/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts index d07b56bb7c..ffcc2df68e 100644 --- a/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts +++ b/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts @@ -5,38 +5,38 @@ export const darkColorPalette = { black: '#000000', backgroundColor: 'rgba(16, 7, 53, 1)', text: { - primary: 'rgba(212, 207, 255, 1)', + primary: '#D4CFFF', secondary: 'rgba(212, 207, 255, 0.7)', disabled: 'rgba(212, 207, 255, 0.5)', disabledSecondary: 'rgba(147, 135, 255, 1)', }, primary: { - main: 'rgba(205, 199, 255, 1)', - light: 'rgba(237, 235, 253, 1)', - dark: 'rgba(157, 124, 214, 1)', + main: '#CDC7FF', + light: '#EDEBFD', + dark: '#9D7CD6', contrastText: 'rgba(0, 0, 0, 0.87)', }, secondary: { - main: 'rgba(93, 12, 233, 1)', - dark: 'rgba(58, 0, 159, 1)', - light: 'rgba(187, 148, 255, 1)', + main: '#5D0CE9', + dark: '#3A009F', + light: '#BB94FF', contrastText: 'rgba(255, 255, 255, 0.87)', }, error: { - main: 'rgba(246, 90, 147, 1)', - dark: 'rgba(243, 32, 110, 1)', - light: 'rgba(247, 109, 160, 1)', - contrastText: 'rgba(255, 255, 255, 1)', + main: '#F65A93', + dark: '#F3206E', + light: '#F76DA0', + contrastText: '#FFFFFF', }, success: { - main: 'rgba(88, 202, 168, 1)', - dark: 'rgba(31, 145, 111, 1)', - light: 'rgba(95, 209, 175, 1)', + main: '#58CAA8', + dark: '#1F916F', + light: '#5FD1AF', contrastText: 'rgba(255, 255, 255, 0.87)', }, paper: { - main: 'rgb(28,19,63)', - light: 'rgb(28,19,63)', + main: '#1c133f', + light: '#1c133f', text: '#CBCFE8', disabled: '#FBFBFE', }, From f2042fc756bca6487fe10a1ed0c5317383f93dbb Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Thu, 12 Sep 2024 16:12:30 +0200 Subject: [PATCH 09/57] feat(human-app): adjust layout to dark mode --- .../components/data-entry/multi-select.tsx | 3 +++ .../src/components/data-entry/select.tsx | 3 +++ .../frontend/src/components/ui/mail-to.tsx | 6 ++++- .../frontend/src/components/ui/page-card.tsx | 13 +++++++--- .../src/contexts/background-color-store.tsx | 26 +++++++++++++++---- .../src/pages/homepage/components/welcome.tsx | 1 + .../email-verification/verify-email.page.tsx | 12 +++++++-- .../hcaptcha-labeling/enable-labeler.page.tsx | 5 ---- .../hcaptcha-labeling.page.tsx | 6 ++--- .../user-stats-accordion.tsx | 10 ++++++- .../jobs-discovery/jobs-discovery.page.tsx | 5 ---- .../src/pages/worker/jobs/jobs.page.tsx | 5 ---- .../src/pages/worker/profile/profile-data.tsx | 7 +++-- .../send-reset-link-success.page.tsx | 12 +++++++-- .../frontend/src/styles/dark-color-palette.ts | 6 +++++ .../frontend/src/styles/dark-theme.ts | 2 +- 16 files changed, 86 insertions(+), 36 deletions(-) diff --git a/packages/apps/human-app/frontend/src/components/data-entry/multi-select.tsx b/packages/apps/human-app/frontend/src/components/data-entry/multi-select.tsx index eabc75256f..a268f7e28b 100644 --- a/packages/apps/human-app/frontend/src/components/data-entry/multi-select.tsx +++ b/packages/apps/human-app/frontend/src/components/data-entry/multi-select.tsx @@ -122,6 +122,9 @@ export function MultiSelect({ labelId={`${name}-${label}`} multiple renderValue={renderValue} + sx={{ + '& .MuiSvgIcon-root': { color: colorPalette.primary.main }, + }} {...props} onChange={(event) => { handleChange(event, field); diff --git a/packages/apps/human-app/frontend/src/components/data-entry/select.tsx b/packages/apps/human-app/frontend/src/components/data-entry/select.tsx index e724f369ee..923a42fcf0 100644 --- a/packages/apps/human-app/frontend/src/components/data-entry/select.tsx +++ b/packages/apps/human-app/frontend/src/components/data-entry/select.tsx @@ -6,6 +6,7 @@ import { Controller } from 'react-hook-form'; import InputLabel from '@mui/material/InputLabel'; import FormHelperText from '@mui/material/FormHelperText'; import { Chip } from '@/components/ui/chip'; +import { useColorMode } from '@/hooks/use-color-mode'; export interface OptionsProps { id: number; @@ -29,6 +30,7 @@ export function Select({ isChipRenderValue, ...props }: SelectComponentProps) { + const { colorPalette } = useColorMode(); return ( {children}; + return ( + + {children} + + ); } diff --git a/packages/apps/human-app/frontend/src/components/ui/page-card.tsx b/packages/apps/human-app/frontend/src/components/ui/page-card.tsx index 7ed73ec5a5..3d5e706ba9 100644 --- a/packages/apps/human-app/frontend/src/components/ui/page-card.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/page-card.tsx @@ -11,7 +11,10 @@ import { colorPalette as constColorPalette } from '@/styles/color-palette'; import { useBackgroundColorStore } from '@/hooks/use-background-store'; import { Loader } from '@/components/ui/loader'; import { Alert } from '@/components/ui/alert'; -import { darkColorPalette as constDarkColorPalette } from '@/styles/dark-color-palette'; +import { + darkColorPalette as constDarkColorPalette, + onlyDarkModeColor, +} from '@/styles/dark-color-palette'; import { useColorMode } from '@/hooks/use-color-mode'; const IconWrapper = styled('div')(() => ({ @@ -171,7 +174,9 @@ export function PageCard({ width: '25px', height: '25px', fontSize: '18px', - backgroundColor: colorPalette.paper.main, + backgroundColor: isDarkMode + ? onlyDarkModeColor.backArrowBg + : colorPalette.paper.main, }} > @@ -227,7 +232,9 @@ export function PageCard({ diff --git a/packages/apps/human-app/frontend/src/contexts/background-color-store.tsx b/packages/apps/human-app/frontend/src/contexts/background-color-store.tsx index 701f96dbf2..42a10618a1 100644 --- a/packages/apps/human-app/frontend/src/contexts/background-color-store.tsx +++ b/packages/apps/human-app/frontend/src/contexts/background-color-store.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import { createContext, useState } from 'react'; +import { createContext, useCallback, useEffect, useState } from 'react'; import type { ColorPalette } from '@/styles/color-palette'; export interface BackgroundContextProps { @@ -27,17 +27,33 @@ export function BackgroundProvider({ colorPalette.white ); - const setWhiteBackground = () => { + const isGrayBackground = (() => { + if (isDarkMode) { + return backgroundColor === colorPalette.backgroundColor; + } + + return backgroundColor === colorPalette.paper.main; + })(); + + const setWhiteBackground = useCallback(() => { setBackgroundColor(colorPalette.white); - }; + }, [colorPalette.white]); - const setGrayBackground = () => { + const setGrayBackground = useCallback(() => { if (isDarkMode) { setBackgroundColor(colorPalette.backgroundColor); } else { setBackgroundColor(colorPalette.paper.main); } - }; + }, [colorPalette.backgroundColor, colorPalette.paper.main, isDarkMode]); + + useEffect(() => { + if (isGrayBackground) { + setGrayBackground(); + } else { + setWhiteBackground(); + } + }, [isGrayBackground, setGrayBackground, setWhiteBackground]); return ( diff --git a/packages/apps/human-app/frontend/src/pages/worker/email-verification/verify-email.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/email-verification/verify-email.page.tsx index 33973fbed1..763a912fe4 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/email-verification/verify-email.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/email-verification/verify-email.page.tsx @@ -23,9 +23,10 @@ import { routerPaths } from '@/router/router-paths'; import { MailTo } from '@/components/ui/mail-to'; import { useResetMutationErrors } from '@/hooks/use-reset-mutation-errors'; import { useColorMode } from '@/hooks/use-color-mode'; +import { onlyDarkModeColor } from '@/styles/dark-color-palette'; export function VerifyEmailWorkerPage() { - const { colorPalette } = useColorMode(); + const { colorPalette, isDarkMode } = useColorMode(); const navigate = useNavigate(); const { signOut, user } = useAuth(); const isAuthenticated = Boolean(user); @@ -96,7 +97,14 @@ export function VerifyEmailWorkerPage() { values={{ email: routerState?.email }} /> - + {t('worker.verifyEmail.paragraph2')} diff --git a/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/enable-labeler.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/enable-labeler.page.tsx index 333787f7e3..eef6e21bf8 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/enable-labeler.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/enable-labeler.page.tsx @@ -13,10 +13,8 @@ import { breakpoints } from '@/styles/breakpoints'; import { useAuthenticatedUser } from '@/auth/use-authenticated-user'; import { routerPaths } from '@/router/router-paths'; import { useProtectedLayoutNotification } from '@/hooks/use-protected-layout-notifications'; -import { useColorMode } from '@/hooks/use-color-mode'; export function EnableLabeler() { - const { colorPalette } = useColorMode(); const isMobile = useIsMobile(); const { closeNotification } = useProtectedLayoutNotification(); const { user } = useAuthenticatedUser(); @@ -51,9 +49,6 @@ export function EnableLabeler() { > (null); const { user } = useAuthenticatedUser(); const { onSuccess, onError } = useHCaptchaLabelingNotifications(); @@ -93,9 +93,6 @@ export function HcaptchaLabelingPage() { > ) : ( diff --git a/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-accordion.tsx b/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-accordion.tsx index 6449287f62..158f57f885 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-accordion.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-accordion.tsx @@ -10,10 +10,12 @@ import { UserStatsDetails } from '@/pages/worker/hcaptcha-labeling/hcaptcha-labe import { useHCaptchaUserStats } from '@/api/services/worker/hcaptcha-user-stats'; import { useProtectedLayoutNotification } from '@/hooks/use-protected-layout-notifications'; import { defaultErrorMessage } from '@/shared/helpers/default-error-message'; +import { useColorMode } from '@/hooks/use-color-mode'; const accordionWidth = { width: '284px' }; export function UserStatsAccordion() { + const { colorPalette } = useColorMode(); const { data: hcaptchaUserStats, isPending: isHcaptchaUserStatsPending, @@ -39,7 +41,13 @@ export function UserStatsAccordion() { } + expandIcon={ + + } id="panel1-header" sx={{ ...accordionWidth, height: '76px' }} > diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/jobs-discovery.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/jobs-discovery.page.tsx index b2edb11576..3c0ffa4cde 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/jobs-discovery.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/jobs-discovery.page.tsx @@ -7,12 +7,10 @@ import { OraclesTableJobTypesSelect } from '@/pages/worker/jobs-discovery/oracle import { JOB_TYPES } from '@/shared/consts'; import type { OraclesSuccessResponse } from '@/api/services/worker/oracles'; import { useGetOracles } from '@/api/services/worker/oracles'; -import { useColorMode } from '@/hooks/use-color-mode'; export type OraclesDataQueryResult = UseQueryResult; export function JobsDiscoveryPage() { - const { colorPalette } = useColorMode(); const oraclesQueryResult = useGetOracles(); const isMobile = useIsMobile(); @@ -21,9 +19,6 @@ export function JobsDiscoveryPage() { From 69ebeff3d4b874e8eec0a3829e29126c8869e50a Mon Sep 17 00:00:00 2001 From: michal rozek Date: Wed, 18 Sep 2024 11:54:56 +0200 Subject: [PATCH 12/57] fix(human-app): max width for inputs specified --- .../apps/human-app/frontend/src/components/data-entry/input.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/apps/human-app/frontend/src/components/data-entry/input.tsx b/packages/apps/human-app/frontend/src/components/data-entry/input.tsx index c0f5a43180..d957d7e787 100644 --- a/packages/apps/human-app/frontend/src/components/data-entry/input.tsx +++ b/packages/apps/human-app/frontend/src/components/data-entry/input.tsx @@ -52,6 +52,7 @@ export function Input({ } label={label} name={name} + sx={{ maxWidth: '376px' }} variant="outlined" {...rest} /> From 1ce841aab7ce4498230e83ecd768d301eba926be Mon Sep 17 00:00:00 2001 From: michal rozek Date: Wed, 18 Sep 2024 14:23:05 +0200 Subject: [PATCH 13/57] feat(human-app): home page state moved to context and reused in every file using old context + implemented inside navbar --- .../components/layout/unprotected/navbar.tsx | 8 ++-- .../frontend/src/contexts/homepage-state.tsx | 45 +++++++++++++++++++ packages/apps/human-app/frontend/src/main.tsx | 17 ++++--- .../choose-sign-up-account-type.tsx | 11 ++--- .../homepage/components/home-container.tsx | 21 +++------ .../src/pages/homepage/components/welcome.tsx | 11 ++--- .../frontend/src/pages/homepage/home.page.tsx | 11 ++--- 7 files changed, 80 insertions(+), 44 deletions(-) create mode 100644 packages/apps/human-app/frontend/src/contexts/homepage-state.tsx diff --git a/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx b/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx index 977e4bf6ed..896a77416f 100644 --- a/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/unprotected/navbar.tsx @@ -2,24 +2,24 @@ import { useState } from 'react'; import { Box, Drawer, IconButton } from '@mui/material'; import { useTranslation } from 'react-i18next'; import MenuIcon from '@mui/icons-material/Menu'; -import { Link, useLocation } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { HumanLogoIcon, HumanLogoNavbarIcon } from '@/components/ui/icons'; import { useIsMobile } from '@/hooks/use-is-mobile'; import { Button } from '@/components/ui/button'; import { breakpoints } from '@/styles/theme'; -import { routerPaths } from '@/router/router-paths'; import { env } from '@/shared/env'; +import { useHomePageState } from '@/contexts/homepage-state'; interface NavbarProps { withNavigation: boolean; } export function Navbar({ withNavigation }: NavbarProps) { + const { isMainPage } = useHomePageState(); const { t } = useTranslation(); const [isDrawerOpen, setIsDrawerOpen] = useState(false); const isMobile = useIsMobile(); - const location = useLocation(); - const isMainPage = location.pathname === routerPaths.homePage; + return ( void; + isMainPage: boolean; +} + +export const HomePageStateContext = + createContext(null); + +export function HomePageStateProvider({ + children, +}: { + children: React.ReactNode; +}) { + const [pageView, setPageView] = useState('welcome'); + + const location = useLocation(); + const isMainPage = + location.pathname === routerPaths.homePage && pageView === 'welcome'; + + return ( + + {children} + + ); +} + +// eslint-disable-next-line react-refresh/only-export-components +export const useHomePageState = () => { + const context = useContext(HomePageStateContext); + if (!context) { + throw new Error( + 'useHomePageState must be used within a HomePageStageProvider' + ); + } + return context; +}; diff --git a/packages/apps/human-app/frontend/src/main.tsx b/packages/apps/human-app/frontend/src/main.tsx index 12bbc63017..30ef80da2d 100644 --- a/packages/apps/human-app/frontend/src/main.tsx +++ b/packages/apps/human-app/frontend/src/main.tsx @@ -18,6 +18,7 @@ import '@fontsource/inter/800.css'; import { WalletConnectProvider } from '@/contexts/wallet-connect'; import { Web3AuthProvider } from '@/auth-web3/web3-auth-context'; import { JWTExpirationCheck } from '@/contexts/jwt-expiration-check'; +import { HomePageStateProvider } from '@/contexts/homepage-state'; const root = document.getElementById('root'); if (!root) throw Error('root element is undefined'); @@ -38,13 +39,15 @@ createRoot(root).render( - - - - - - - + + + + + + + + + diff --git a/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx b/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx index 6ab6c60b1e..0a46c4cde6 100644 --- a/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx +++ b/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx @@ -6,19 +6,16 @@ import { Button } from '@/components/ui/button'; import { useIsMobile } from '@/hooks/use-is-mobile'; import { routerPaths } from '@/router/router-paths'; import { PageCard } from '@/components/ui/page-card'; -import type { HomePageStageType } from '@/pages/homepage/home.page'; +import { useHomePageState } from '@/contexts/homepage-state'; -interface ChooseSignUpAccountType { - setStage: (step: HomePageStageType) => void; -} - -export function ChooseSignUpAccountType({ setStage }: ChooseSignUpAccountType) { +export function ChooseSignUpAccountType() { + const { setPageView } = useHomePageState(); const { t } = useTranslation(); const isMobile = useIsMobile('lg'); const isMobileMd = useIsMobile('md'); const backToWelcomeStage = () => { - setStage('welcome'); + setPageView('welcome'); }; return ( diff --git a/packages/apps/human-app/frontend/src/pages/homepage/components/home-container.tsx b/packages/apps/human-app/frontend/src/pages/homepage/components/home-container.tsx index 3c65b9a347..65807fc5b3 100644 --- a/packages/apps/human-app/frontend/src/pages/homepage/components/home-container.tsx +++ b/packages/apps/human-app/frontend/src/pages/homepage/components/home-container.tsx @@ -1,33 +1,26 @@ import { Container } from '@mui/material'; import { useEffect } from 'react'; import { useBackgroundColorStore } from '@/hooks/use-background-store'; -import type { HomePageStageType } from '@/pages/homepage/home.page'; +import { useHomePageState } from '@/contexts/homepage-state'; import { Welcome } from './welcome'; import { ChooseSignUpAccountType } from './choose-sign-up-account-type'; -export function HomeContainer({ - stage, - setStage, -}: { - stage: HomePageStageType; - setStage: (step: HomePageStageType) => void; -}) { +export function HomeContainer() { + const { pageView } = useHomePageState(); const { setWhiteBackground, setGrayBackground } = useBackgroundColorStore(); useEffect(() => { - if (stage === 'chooseSignUpAccountType') { + if (pageView === 'chooseSignUpAccountType') { setGrayBackground(); } else { setWhiteBackground(); } - }, [setGrayBackground, setWhiteBackground, stage]); + }, [setGrayBackground, setWhiteBackground, pageView]); return ( - {stage === 'welcome' && } - {stage === 'chooseSignUpAccountType' && ( - - )} + {pageView === 'welcome' && } + {pageView === 'chooseSignUpAccountType' && } ); } diff --git a/packages/apps/human-app/frontend/src/pages/homepage/components/welcome.tsx b/packages/apps/human-app/frontend/src/pages/homepage/components/welcome.tsx index c9bba84513..74115e7f6c 100644 --- a/packages/apps/human-app/frontend/src/pages/homepage/components/welcome.tsx +++ b/packages/apps/human-app/frontend/src/pages/homepage/components/welcome.tsx @@ -11,13 +11,10 @@ import { colorPalette } from '@/styles/color-palette'; import { useIsMobile } from '@/hooks/use-is-mobile'; import { OperatorSignIn } from '@/pages/homepage/components/operator-signin'; import { WorkerSignIn } from '@/pages/homepage/components/worker-signin'; -import type { HomePageStageType } from '@/pages/homepage/home.page'; +import { useHomePageState } from '@/contexts/homepage-state'; -interface WelcomeProps { - setStage: (step: HomePageStageType) => void; -} - -export function Welcome({ setStage }: WelcomeProps) { +export function Welcome() { + const { setPageView } = useHomePageState(); const { t } = useTranslation(); const logoText: string = t('homepage.humanApp'); const logoTextSplit: string[] = logoText.split(' '); @@ -93,7 +90,7 @@ export function Welcome({ setStage }: WelcomeProps) { diff --git a/packages/apps/human-app/frontend/src/pages/playground/table-example/table-search-form.tsx b/packages/apps/human-app/frontend/src/pages/playground/table-example/table-search-form.tsx index 626e3b48e8..98b19517b9 100644 --- a/packages/apps/human-app/frontend/src/pages/playground/table-example/table-search-form.tsx +++ b/packages/apps/human-app/frontend/src/pages/playground/table-example/table-search-form.tsx @@ -34,7 +34,7 @@ export function SearchForm({ sx: { color: colorPalette.text.secondary }, startAdornment: ( - + ), }} diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx index 07b98694f9..68fca61570 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx @@ -14,6 +14,8 @@ import { TableButton } from '@/components/ui/table-button'; import { routerPaths } from '@/router/router-paths'; import { OraclesTableMobile } from '@/pages/worker/jobs-discovery/oracles-table/oracles-table-mobile'; import type { OraclesDataQueryResult } from '@/pages/worker/jobs-discovery/jobs-discovery.page'; +import { useColorMode } from '@/hooks/use-color-mode'; +import { createTableDarkMode } from '@/styles/create-table-dark-mode'; const getColumns = ( selectOracle: (oracleAddress: string) => void @@ -68,10 +70,10 @@ export function OraclesTable({ }: { oraclesQueryDataResult: OraclesDataQueryResult; }) { + const { colorPalette, isDarkMode } = useColorMode(); const { data: oraclesData, isError: isOraclesDataError, - isRefetching: isOraclesDataRefetching, isPending: isOraclesDataPending, } = oraclesQueryDataResult; const navigate = useNavigate(); @@ -84,7 +86,6 @@ export function OraclesTable({ state: { isLoading: isOraclesDataPending, showAlertBanner: isOraclesDataError, - showProgressBars: isOraclesDataRefetching, }, columns: getColumns(selectOracle), data: oraclesData || [], @@ -93,6 +94,17 @@ export function OraclesTable({ enableSorting: false, enablePagination: false, enableTopToolbar: false, + muiTableHeadCellProps: { + sx: { + borderColor: colorPalette.paper.text, + }, + }, + muiTableBodyCellProps: { + sx: { + borderColor: colorPalette.paper.text, + }, + }, + ...(isDarkMode ? createTableDarkMode(colorPalette) : {}), }); return ( diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx index f8a8d9ea55..16b6ff70ef 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx @@ -28,6 +28,7 @@ import { AvailableJobsRewardAmountSort } from '@/pages/worker/jobs/components/av import { AvailableJobsJobTypeFilter } from '@/pages/worker/jobs/components/available-jobs/desktop/available-jobs-job-type-filter'; import { useColorMode } from '@/hooks/use-color-mode'; import type { ColorPalette } from '@/styles/color-palette'; +import { createTableDarkMode } from '@/styles/create-table-dark-mode'; export type AvailableJobsTableData = AvailableJob & { rewardTokenInfo: { @@ -153,7 +154,7 @@ const getColumns = ( }; export function AvailableJobsTable() { - const { colorPalette } = useColorMode(); + const { colorPalette, isDarkMode } = useColorMode(); const { setSearchEscrowAddress, setPageParams, filterParams } = useJobsFilterStore(); @@ -165,11 +166,10 @@ export function AvailableJobsTable() { [tableData?.results] ); - const { mutate: assignJobMutation, isPending: isAssignJobMutationPending } = - useAssignJobMutation({ - onSuccess: onJobAssignmentSuccess, - onError: onJobAssignmentError, - }); + const { mutate: assignJobMutation } = useAssignJobMutation({ + onSuccess: onJobAssignmentSuccess, + onError: onJobAssignmentError, + }); const [paginationState, setPaginationState] = useState({ pageIndex: 0, @@ -202,14 +202,29 @@ export function AvailableJobsTable() { state: { isLoading: tableStatus === 'pending', showAlertBanner: tableStatus === 'error', - showProgressBars: tableStatus === 'pending' || isAssignJobMutationPending, pagination: paginationState, }, enablePagination: Boolean(tableData?.total_pages), manualPagination: true, onPaginationChange: setPaginationState, muiPaginationProps: { - rowsPerPageOptions: [5, 10], + disabled: false, + SelectProps: { + sx: { + '.MuiSelect-icon': { + ':hover': { + backgroundColor: 'blue', + }, + fill: colorPalette.text.primary, + }, + }, + }, + sx: { + '& .MuiPaginationItem-previousNext': { + fill: 'red', + }, + }, + rowsPerPageOptions: [2, 10], }, pageCount: tableData?.total_pages || -1, rowCount: tableData?.total_results, @@ -228,6 +243,17 @@ export function AvailableJobsTable() { }} /> ), + muiTableHeadCellProps: { + sx: { + borderColor: colorPalette.paper.text, + }, + }, + muiTableBodyCellProps: { + sx: { + borderColor: colorPalette.paper.text, + }, + }, + ...(isDarkMode ? createTableDarkMode(colorPalette) : {}), }); return ; diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx index a96413a1bc..bdd80a5a0d 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx @@ -31,6 +31,7 @@ import { RejectButton } from '@/pages/worker/jobs/components/reject-button'; import { JOB_TYPES } from '@/shared/consts'; import type { ColorPalette } from '@/styles/color-palette'; import { useColorMode } from '@/hooks/use-color-mode'; +import { createTableDarkMode } from '@/styles/create-table-dark-mode'; import { parseJobStatusChipColor } from '../parse-job-status-chip-color'; const getColumnsDefinition = ( @@ -192,7 +193,7 @@ const getColumnsDefinition = ( ]; export function MyJobsTable() { - const { colorPalette } = useColorMode(); + const { colorPalette, isDarkMode } = useColorMode(); const { setSearchEscrowAddress, setPageParams, filterParams } = useMyJobsFilterStore(); const { data: tableData, status: tableStatus } = useGetMyJobsData(); @@ -236,7 +237,6 @@ export function MyJobsTable() { state: { isLoading: tableStatus === 'pending', showAlertBanner: tableStatus === 'error', - showProgressBars: tableStatus === 'pending', pagination: paginationState, }, enablePagination: Boolean(tableData?.total_pages), @@ -263,6 +263,17 @@ export function MyJobsTable() { }} /> ), + muiTableHeadCellProps: { + sx: { + borderColor: colorPalette.paper.text, + }, + }, + muiTableBodyCellProps: { + sx: { + borderColor: colorPalette.paper.text, + }, + }, + ...(isDarkMode ? createTableDarkMode(colorPalette) : {}), }); return ; diff --git a/packages/apps/human-app/frontend/src/router/router-paths.ts b/packages/apps/human-app/frontend/src/router/router-paths.ts index bf15e9145b..602e932f46 100644 --- a/packages/apps/human-app/frontend/src/router/router-paths.ts +++ b/packages/apps/human-app/frontend/src/router/router-paths.ts @@ -11,7 +11,7 @@ export const routerPaths = { emailVerification: '/verify', verifyEmail: '/worker/verify-email', profile: '/worker/profile', - // jobsDiscovery: '/worker/jobs-discovery', + jobsDiscovery: '/worker/jobs-discovery', jobs: '/worker/jobs', HcaptchaLabeling: '/worker/hcaptcha-labeling', enableLabeler: '/worker/enable-labeler', diff --git a/packages/apps/human-app/frontend/src/router/routes.tsx b/packages/apps/human-app/frontend/src/router/routes.tsx index c4394c93d9..b5a25b9318 100644 --- a/packages/apps/human-app/frontend/src/router/routes.tsx +++ b/packages/apps/human-app/frontend/src/router/routes.tsx @@ -20,7 +20,7 @@ import { AddKeysOperatorPage } from '@/pages/operator/sign-up/add-keys/add-keys. import { EditExistingKeysSuccessPage } from '@/pages/operator/sign-up/add-keys/edit-existing-keys-success.page'; import type { PageHeaderProps } from '@/components/layout/protected/page-header'; import { HandIcon, HomepageWorkIcon, ProfileIcon } from '@/components/ui/icons'; -// import { JobsDiscoveryPage } from '@/pages/worker/jobs-discovery/jobs-discovery.page'; +import { JobsDiscoveryPage } from '@/pages/worker/jobs-discovery/jobs-discovery.page'; import { JobsPage } from '@/pages/worker/jobs/jobs.page'; import { EnableLabeler } from '@/pages/worker/hcaptcha-labeling/enable-labeler.page'; import { HcaptchaLabelingPage } from '@/pages/worker/hcaptcha-labeling/hcaptcha-labeling/hcaptcha-labeling.page'; @@ -88,16 +88,16 @@ export const protectedRoutes: { headerText: t('protectedPagesHeaders.profile'), }, }, - // { - // routerProps: { - // path: routerPaths.worker.jobsDiscovery, - // element: , - // }, - // pageHeaderProps: { - // headerIcon: , - // headerText: t('protectedPagesHeaders.jobsDiscovery'), - // }, - // }, + { + routerProps: { + path: routerPaths.worker.jobsDiscovery, + element: , + }, + pageHeaderProps: { + headerIcon: , + headerText: t('protectedPagesHeaders.jobsDiscovery'), + }, + }, { routerProps: { path: `${routerPaths.worker.jobs}/:address`, diff --git a/packages/apps/human-app/frontend/src/styles/create-table-dark-mode.ts b/packages/apps/human-app/frontend/src/styles/create-table-dark-mode.ts new file mode 100644 index 0000000000..b082a7b3ce --- /dev/null +++ b/packages/apps/human-app/frontend/src/styles/create-table-dark-mode.ts @@ -0,0 +1,17 @@ +import type { MRT_Theme } from 'material-react-table'; +import type { ColorPalette } from '@/styles/color-palette'; + +export const createTableDarkMode = (colorPalette: ColorPalette) => { + const mrtTheme: Partial = { + baseBackgroundColor: colorPalette.paper.main, + }; + + return { + mrtTheme, + muiTablePaperProps: { + sx: { + boxShadow: 'none', + }, + }, + }; +}; diff --git a/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts b/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts index 3c2e2416f7..faccc93014 100644 --- a/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts +++ b/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts @@ -37,7 +37,7 @@ export const darkColorPalette = { paper: { main: '#1c133f', light: '#1c133f', - text: '#CBCFE8', + text: '#372f56CC', disabled: '#FBFBFE', }, chip: { diff --git a/packages/apps/human-app/frontend/src/styles/theme.ts b/packages/apps/human-app/frontend/src/styles/theme.ts index f128e9fefe..eb509d0e20 100644 --- a/packages/apps/human-app/frontend/src/styles/theme.ts +++ b/packages/apps/human-app/frontend/src/styles/theme.ts @@ -119,6 +119,13 @@ export const theme: ThemeOptions = { }, }, }, + MuiTableCell: { + styleOverrides: { + root: { + borderBottomColor: 'none !important', + }, + }, + }, }, breakpoints: { values: { From a40261857d09b64df1975f2620da8af9407e447f Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Wed, 25 Sep 2024 16:50:05 +0200 Subject: [PATCH 23/57] feat(human-app): apply dark mode for tables --- .../src/components/ui/table-button.tsx | 3 +- .../src/contexts/background-color-store.tsx | 2 +- .../hcaptcha-labeling.page.tsx | 6 ++- .../hcaptcha-labeling/user-stats-details.tsx | 15 +++--- .../desktop/available-jobs-table.tsx | 28 ++++------- .../src/styles/create-table-dark-mode.ts | 17 ------- .../src/styles/create-table-dark-mode.tsx | 47 +++++++++++++++++++ 7 files changed, 71 insertions(+), 47 deletions(-) delete mode 100644 packages/apps/human-app/frontend/src/styles/create-table-dark-mode.ts create mode 100644 packages/apps/human-app/frontend/src/styles/create-table-dark-mode.tsx diff --git a/packages/apps/human-app/frontend/src/components/ui/table-button.tsx b/packages/apps/human-app/frontend/src/components/ui/table-button.tsx index 0de47343b0..4850795e8b 100644 --- a/packages/apps/human-app/frontend/src/components/ui/table-button.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/table-button.tsx @@ -12,7 +12,6 @@ export function TableButton(props: CustomButtonProps) { size="small" sx={{ backgroundColor: colorPalette.secondary.main, - color: 'white', paddingTop: '0.4rem', paddingBottom: '0.4rem', whiteSpace: 'nowrap', @@ -22,7 +21,7 @@ export function TableButton(props: CustomButtonProps) { type="button" variant="contained" > - + {props.children} diff --git a/packages/apps/human-app/frontend/src/contexts/background-color-store.tsx b/packages/apps/human-app/frontend/src/contexts/background-color-store.tsx index 42a10618a1..a753505cc2 100644 --- a/packages/apps/human-app/frontend/src/contexts/background-color-store.tsx +++ b/packages/apps/human-app/frontend/src/contexts/background-color-store.tsx @@ -53,7 +53,7 @@ export function BackgroundProvider({ } else { setWhiteBackground(); } - }, [isGrayBackground, setGrayBackground, setWhiteBackground]); + }, [isGrayBackground, setGrayBackground, setWhiteBackground, isDarkMode]); return ( (null); const { user } = useAuthenticatedUser(); const { onSuccess, onError } = useHCaptchaLabelingNotifications(); + const statsColor = isDarkMode + ? onlyDarkModeColor.additionalTextColor + : colorPalette.primary.light; const resetCaptcha = () => { if (captchaRef.current) { @@ -143,7 +147,7 @@ export function HcaptchaLabelingPage() { {t('worker.hcaptchaLabeling.noJobs')} - + { diff --git a/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-details.tsx b/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-details.tsx index ce05e7213e..14842d9576 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-details.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/user-stats-details.tsx @@ -3,6 +3,7 @@ import { t } from 'i18next'; import { RefreshIcon } from '@/components/ui/icons'; import type { HCaptchaUserStatsSuccess } from '@/api/services/worker/hcaptcha-user-stats'; import { useColorMode } from '@/hooks/use-color-mode'; +import { onlyDarkModeColor } from '@/styles/dark-color-palette'; export function UserStatsDetails({ stats, @@ -11,8 +12,10 @@ export function UserStatsDetails({ stats: HCaptchaUserStatsSuccess; refetch: () => void; }) { - const { colorPalette } = useColorMode(); - + const { colorPalette, isDarkMode } = useColorMode(); + const statsColor = isDarkMode + ? onlyDarkModeColor.additionalTextColor + : colorPalette.primary.light; return ( @@ -35,7 +38,7 @@ export function UserStatsDetails({ {t('worker.hcaptchaLabelingStats.jobsServed')} - + {stats.served} @@ -45,7 +48,7 @@ export function UserStatsDetails({ {t('worker.hcaptchaLabelingStats.jobsComplete')} - + {stats.solved} @@ -55,7 +58,7 @@ export function UserStatsDetails({ {t('worker.hcaptchaLabelingStats.hmtEarned')} - + {stats.balance.total} {t('inputMasks.humanCurrencySuffix')} @@ -76,7 +79,7 @@ export function UserStatsDetails({ {t('worker.hcaptchaLabelingStats.earnedLastHour')} - + {stats.balance.recent} {t('inputMasks.humanCurrencySuffix')} diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx index 16b6ff70ef..268ada54e2 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx @@ -27,7 +27,6 @@ import { AvailableJobsNetworkFilter } from '@/pages/worker/jobs/components/avail import { AvailableJobsRewardAmountSort } from '@/pages/worker/jobs/components/available-jobs/desktop/available-jobs-reward-amount-sort'; import { AvailableJobsJobTypeFilter } from '@/pages/worker/jobs/components/available-jobs/desktop/available-jobs-job-type-filter'; import { useColorMode } from '@/hooks/use-color-mode'; -import type { ColorPalette } from '@/styles/color-palette'; import { createTableDarkMode } from '@/styles/create-table-dark-mode'; export type AvailableJobsTableData = AvailableJob & { @@ -37,12 +36,9 @@ export type AvailableJobsTableData = AvailableJob & { }; }; -const getColumns = ( - callbacks: { - assignJob: (data: AssignJobBody) => undefined; - }, - colorPalette: ColorPalette -): MRT_ColumnDef[] => { +const getColumns = (callbacks: { + assignJob: (data: AssignJobBody) => undefined; +}): MRT_ColumnDef[] => { return [ { accessorKey: 'job_description', @@ -142,7 +138,7 @@ const getColumns = ( callbacks.assignJob({ escrow_address, chain_id }); }} > - + {t('worker.jobs.selectJob')} @@ -190,14 +186,11 @@ export function AvailableJobsTable() { }, [filterParams.page, filterParams.page_size]); const table = useMaterialReactTable({ - columns: getColumns( - { - assignJob: (data) => { - assignJobMutation(data); - }, + columns: getColumns({ + assignJob: (data) => { + assignJobMutation(data); }, - colorPalette - ), + }), data: memoizedTableDataResults, state: { isLoading: tableStatus === 'pending', @@ -219,11 +212,6 @@ export function AvailableJobsTable() { }, }, }, - sx: { - '& .MuiPaginationItem-previousNext': { - fill: 'red', - }, - }, rowsPerPageOptions: [2, 10], }, pageCount: tableData?.total_pages || -1, diff --git a/packages/apps/human-app/frontend/src/styles/create-table-dark-mode.ts b/packages/apps/human-app/frontend/src/styles/create-table-dark-mode.ts deleted file mode 100644 index b082a7b3ce..0000000000 --- a/packages/apps/human-app/frontend/src/styles/create-table-dark-mode.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { MRT_Theme } from 'material-react-table'; -import type { ColorPalette } from '@/styles/color-palette'; - -export const createTableDarkMode = (colorPalette: ColorPalette) => { - const mrtTheme: Partial = { - baseBackgroundColor: colorPalette.paper.main, - }; - - return { - mrtTheme, - muiTablePaperProps: { - sx: { - boxShadow: 'none', - }, - }, - }; -}; diff --git a/packages/apps/human-app/frontend/src/styles/create-table-dark-mode.tsx b/packages/apps/human-app/frontend/src/styles/create-table-dark-mode.tsx new file mode 100644 index 0000000000..20a0f5fc84 --- /dev/null +++ b/packages/apps/human-app/frontend/src/styles/create-table-dark-mode.tsx @@ -0,0 +1,47 @@ +import type { MRT_Theme } from 'material-react-table'; +import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; +import FirstPageIcon from '@mui/icons-material/FirstPage'; +import type { ColorPalette } from '@/styles/color-palette'; + +export const createTableDarkMode = (colorPalette: ColorPalette) => { + const mrtTheme: Partial = { + baseBackgroundColor: colorPalette.paper.main, + }; + + return { + icons: { + ChevronLeftIcon: () => { + return ; + }, + ChevronRightIcon: () => { + return ( + + ); + }, + FirstPageIcon: () => { + return ; + }, + LastPageIcon: () => { + return ( + + ); + }, + }, + mrtTheme, + muiTablePaperProps: { + sx: { + boxShadow: 'none', + }, + }, + }; +}; From 19b8348672aada021ee80c19eaddc28a72ce0490 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Wed, 25 Sep 2024 17:34:53 +0200 Subject: [PATCH 24/57] feat(human-app): adjust alert to dark mode --- .../frontend/src/components/ui/alert.tsx | 52 +++++++++++++++---- .../frontend/src/components/ui/ui-example.tsx | 4 -- 2 files changed, 42 insertions(+), 14 deletions(-) diff --git a/packages/apps/human-app/frontend/src/components/ui/alert.tsx b/packages/apps/human-app/frontend/src/components/ui/alert.tsx index 53e8d5dfdb..d44764b714 100644 --- a/packages/apps/human-app/frontend/src/components/ui/alert.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/alert.tsx @@ -5,30 +5,62 @@ import MuiAlert from '@mui/material/Alert'; import type { AlertProps as MuiAlertProps } from '@mui/material/Alert'; import { Typography } from '@mui/material'; import { useColorMode } from '@/hooks/use-color-mode'; +import { darkColorPalette } from '@/styles/dark-color-palette'; -const getIcon = (severity: MuiAlertProps['severity']) => { +const getIcon = (severity: MuiAlertProps['severity'], isDarkMode: boolean) => { switch (severity) { case 'success': - return ; + return ( + + ); case 'error': - return ; + return ; case 'warning': - return ; + return ; default: return undefined; } }; -export function Alert({ severity, color, children, ...rest }: MuiAlertProps) { - const { colorPalette } = useColorMode(); - const icon = getIcon(severity); - const fontColor = color === 'error' ? colorPalette.error.main : 'inherit'; +export function Alert({ + severity, + color, + children, + ...rest +}: Omit & { color: 'success' | 'error' }) { + const { colorPalette, isDarkMode } = useColorMode(); + const icon = getIcon(severity, isDarkMode); + const fontColor = (() => { + if (isDarkMode) { + return 'white'; + } + return color === 'error' ? colorPalette.error.main : 'inherit'; + })(); + + const sxForDarkMode = { + backgroundColor: (() => { + switch (color) { + case 'error': + return darkColorPalette.error.main; + + case 'success': + return darkColorPalette.success.main; + } + })(), + }; + return ( - - + + {children} diff --git a/packages/apps/human-app/frontend/src/components/ui/ui-example.tsx b/packages/apps/human-app/frontend/src/components/ui/ui-example.tsx index bcc1e987de..3eeef93988 100644 --- a/packages/apps/human-app/frontend/src/components/ui/ui-example.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/ui-example.tsx @@ -250,10 +250,6 @@ export function UiExample() { Your password has been successfully updated! - - We have switched to the Polygon network. You’ll need to replace your - Ethereum wallet address with one connected to Polygon. - ); From 6c20edd2d41abcdfc53c3bc66097dba434db7fcd Mon Sep 17 00:00:00 2001 From: michal rozek Date: Thu, 26 Sep 2024 10:28:54 +0200 Subject: [PATCH 25/57] fix(human-app): operator page padding adjusted --- .../frontend/src/pages/operator/profile/profile.page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx index 78835f20f1..85db43e019 100644 --- a/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx @@ -66,7 +66,7 @@ export function OperatorProfilePage() { backgroundColor: colorPalette.white, height: '100%', boxShadow: 'none', - padding: isMobile ? '60px 20px' : '100px 40px', + padding: isMobile ? '40px 20px' : '40px 40px', borderRadius: '20px', }} > From 458237df7bb038d4a4367513cb6867f017e68818 Mon Sep 17 00:00:00 2001 From: michal rozek Date: Thu, 26 Sep 2024 11:04:31 +0200 Subject: [PATCH 26/57] fix(human-app): copy and logic changed for notification message --- .../src/pages/worker/profile/profile.page.tsx | 25 +++---------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx index f8393d65fa..75dd7cbacf 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx @@ -5,41 +5,22 @@ import { colorPalette } from '@/styles/color-palette'; import { ProfileData } from '@/pages/worker/profile/profile-data'; import { ProfileActions } from '@/pages/worker/profile/profile-actions'; import { useProtectedLayoutNotification } from '@/hooks/use-protected-layout-notifications'; -import { useAuthenticatedUser } from '@/auth/use-authenticated-user'; -import type { UserData } from '@/auth/auth-context'; import { useWalletConnect } from '@/hooks/use-wallet-connect'; import { useBackgroundColorStore } from '@/hooks/use-background-store'; import { useIsMobile } from '@/hooks/use-is-mobile'; -const getNotificationMessage = ( - user: UserData & { isWalletConnected: boolean } -) => { - switch (true) { - case user.kyc_status !== 'approved': - return t('worker.profile.topNotifications.noKYC'); - case user.kyc_status === 'approved' && !user.wallet_address: - return t('worker.profile.topNotifications.registerAddress'); - default: - return null; - } -}; - export function WorkerProfilePage() { const isMobile = useIsMobile(); - const { user } = useAuthenticatedUser(); const { isConnected } = useWalletConnect(); const { setGrayBackground } = useBackgroundColorStore(); const { setTopNotification: setTopNotificationInLayout } = useProtectedLayoutNotification(); const setNotifications = () => { - const notification = getNotificationMessage({ - ...user, - isWalletConnected: isConnected, + setTopNotificationInLayout({ + type: 'warning', + content: t('worker.profile.topNotifications.noKYC'), }); - if (notification) { - setTopNotificationInLayout({ type: 'warning', content: notification }); - } }; useEffect(() => { From 903cc798944186fd1ac6296efeb39d1921d24839 Mon Sep 17 00:00:00 2001 From: michal rozek Date: Thu, 26 Sep 2024 11:35:32 +0200 Subject: [PATCH 27/57] fix(human-app): copy and style changes for sign up page --- packages/apps/human-app/frontend/src/i18n/en.json | 2 +- .../homepage/components/choose-sign-up-account-type.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/apps/human-app/frontend/src/i18n/en.json b/packages/apps/human-app/frontend/src/i18n/en.json index 1de1342c33..f41f5c16bc 100644 --- a/packages/apps/human-app/frontend/src/i18n/en.json +++ b/packages/apps/human-app/frontend/src/i18n/en.json @@ -264,7 +264,7 @@ "noJobs": "No jobs available at the moment. Please come back in:" }, "enableHCaptchaLabeling": { - "description": "HMT payouts are automatically computed by an oracle based on correctness and volume of tasks completed. Payout timing depends on total job size, and can take as little as an hour or as long as a week or so, depending on overall job status.", + "description": "CAPTCHA tasks involve the correct labeling of images in a group of images. Read the instructional prompt, and select the images that best correspond to that prompt.", "enableButton": "Begin Labeling" }, "hcaptchaLabelingStats": { diff --git a/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx b/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx index 0a46c4cde6..974ea063e0 100644 --- a/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx +++ b/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx @@ -94,6 +94,7 @@ export function ChooseSignUpAccountType() { component={Link} fullWidth size="large" + sx={{ fontFamily: 'Inter' }} to={routerPaths.worker.signUp} variant="contained" > @@ -124,7 +125,7 @@ export function ChooseSignUpAccountType() { }} > From c709616dc5890554542e4ca99bb8b94284a1643b Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Thu, 26 Sep 2024 13:53:57 +0200 Subject: [PATCH 28/57] feat(human-app): fix table buttons --- .../human-app/frontend/src/components/ui/table-button.tsx | 7 ++++++- .../available-jobs/desktop/available-jobs-table.tsx | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/apps/human-app/frontend/src/components/ui/table-button.tsx b/packages/apps/human-app/frontend/src/components/ui/table-button.tsx index 4850795e8b..620960ee31 100644 --- a/packages/apps/human-app/frontend/src/components/ui/table-button.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/table-button.tsx @@ -13,6 +13,7 @@ export function TableButton(props: CustomButtonProps) { sx={{ backgroundColor: colorPalette.secondary.main, paddingTop: '0.4rem', + color: 'white', paddingBottom: '0.4rem', whiteSpace: 'nowrap', textWrap: 'nowrap', @@ -21,7 +22,11 @@ export function TableButton(props: CustomButtonProps) { type="button" variant="contained" > - + {props.children} diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx index 268ada54e2..61fa1f87b8 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx @@ -138,7 +138,10 @@ const getColumns = (callbacks: { callbacks.assignJob({ escrow_address, chain_id }); }} > - + {t('worker.jobs.selectJob')} From b966a2fddd43ba420df5db6564d395dfb98c93b5 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Thu, 26 Sep 2024 16:22:36 +0200 Subject: [PATCH 29/57] feat(human-app): fix expiration modal error --- .../human-app/frontend/src/auth/expiration-modal.tsx | 10 ++++++++-- packages/apps/human-app/frontend/src/main.tsx | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/apps/human-app/frontend/src/auth/expiration-modal.tsx b/packages/apps/human-app/frontend/src/auth/expiration-modal.tsx index e769309f69..a76afff410 100644 --- a/packages/apps/human-app/frontend/src/auth/expiration-modal.tsx +++ b/packages/apps/human-app/frontend/src/auth/expiration-modal.tsx @@ -6,8 +6,12 @@ import { useModalStore } from '@/components/ui/modal/modal.store'; import { routerPaths } from '@/router/router-paths'; import { browserAuthProvider } from '@/shared/helpers/browser-auth-provider'; import { breakpoints } from '@/styles/theme'; +import { useAuth } from '@/auth/use-auth'; +import { useWeb3Auth } from '@/auth-web3/use-web3-auth'; export function ExpirationModal() { + const { signOut } = useAuth(); + const { signOut: web3SignOut } = useWeb3Auth(); const { closeModal } = useModalStore(); const navigate = useNavigate(); @@ -50,9 +54,11 @@ export function ExpirationModal() { fullWidth onClick={() => { if (browserAuthProvider.authType === 'web2') { - navigate(routerPaths.worker.signIn); + signOut(); + navigate(routerPaths.worker.signIn, { replace: true }); } else { - navigate(routerPaths.homePage); + web3SignOut(); + navigate(routerPaths.homePage, { replace: true }); } closeModal(); }} diff --git a/packages/apps/human-app/frontend/src/main.tsx b/packages/apps/human-app/frontend/src/main.tsx index 30ef80da2d..97c247daee 100644 --- a/packages/apps/human-app/frontend/src/main.tsx +++ b/packages/apps/human-app/frontend/src/main.tsx @@ -42,6 +42,7 @@ createRoot(root).render( + @@ -49,7 +50,6 @@ createRoot(root).render( - From bf1a23d74f57d69764f8a596df0461f339ae78a4 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Fri, 27 Sep 2024 13:01:05 +0200 Subject: [PATCH 30/57] fix(human-app): add layout imporovments --- .../layout/protected/drawer-navigation.tsx | 11 ++++++-- .../choose-sign-up-account-type.tsx | 28 +++++++++++++------ .../src/pages/homepage/components/welcome.tsx | 2 +- .../frontend/src/pages/homepage/home.page.tsx | 5 +++- .../hcaptcha-labeling/enable-labeler.page.tsx | 6 ++-- .../desktop/available-jobs-table.tsx | 2 +- .../worker/profile/wallet-connect-done.tsx | 10 ++++++- .../frontend/src/styles/dark-color-palette.ts | 3 ++ .../frontend/src/styles/dark-theme.ts | 15 +++++++++- 9 files changed, 63 insertions(+), 19 deletions(-) diff --git a/packages/apps/human-app/frontend/src/components/layout/protected/drawer-navigation.tsx b/packages/apps/human-app/frontend/src/components/layout/protected/drawer-navigation.tsx index 9c12b2e27f..7628d7fbbc 100644 --- a/packages/apps/human-app/frontend/src/components/layout/protected/drawer-navigation.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/protected/drawer-navigation.tsx @@ -14,6 +14,8 @@ import { Button } from '@/components/ui/button'; import { useIsMobile } from '@/hooks/use-is-mobile'; import { NAVBAR_PADDING } from '@/components/layout/protected/navbar'; import { colorPalette } from '@/styles/color-palette'; +import { useColorMode } from '@/hooks/use-color-mode'; +import { onlyDarkModeColor } from '@/styles/dark-color-palette'; const drawerWidth = 240; @@ -43,6 +45,7 @@ export function DrawerNavigation({ bottomMenuItems, signOut, }: DrawerNavigationProps) { + const { isDarkMode } = useColorMode(); const navigate = useNavigate(); const isMobile = useIsMobile(); const location = useLocation(); @@ -129,7 +132,9 @@ export function DrawerNavigation({ selected={isActive} sx={{ '&.Mui-selected': { - backgroundColor: colorPalette.primary.shades, + backgroundColor: isDarkMode + ? onlyDarkModeColor.listItemColor + : colorPalette.primary.shades, }, }} > @@ -188,7 +193,9 @@ export function DrawerNavigation({ selected={isActive} sx={{ '&.Mui-selected': { - backgroundColor: colorPalette.primary.shades, + backgroundColor: isDarkMode + ? onlyDarkModeColor.listItemColor + : colorPalette.primary.shades, }, }} > diff --git a/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx b/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx index 931a87754e..e125ea778d 100644 --- a/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx +++ b/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx @@ -8,13 +8,14 @@ import { PageCard } from '@/components/ui/page-card'; import type { HomePageStageType } from '@/pages/homepage/home.page'; import { useColorMode } from '@/hooks/use-color-mode'; import { useHomePageState } from '@/contexts/homepage-state'; +import { onlyDarkModeColor } from '@/styles/dark-color-palette'; interface ChooseSignUpAccountType { setStage: (step: HomePageStageType) => void; } export function ChooseSignUpAccountType() { - const { colorPalette } = useColorMode(); + const { colorPalette, isDarkMode } = useColorMode(); const { setPageView } = useHomePageState(); const { t } = useTranslation(); const isMobile = useIsMobile('lg'); @@ -33,14 +34,9 @@ export function ChooseSignUpAccountType() { title={{t('homepage.welcome')} 👋} > - + {t('homepage.howWillUse')} - - - {t('homepage.selectOption')} - -
- + {t('homepage.iWantToEarn')}
- + {t('homepage.joinAsOperator')} diff --git a/packages/apps/human-app/frontend/src/pages/homepage/home.page.tsx b/packages/apps/human-app/frontend/src/pages/homepage/home.page.tsx index a8313493f5..2235dd0c11 100644 --- a/packages/apps/human-app/frontend/src/pages/homepage/home.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/homepage/home.page.tsx @@ -57,7 +57,10 @@ export function HomePage() { ; } - if (user.site_key) { - return ; - } + // if (user.site_key) { + // return ; + // } if (isError) { return ; diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx index 61fa1f87b8..85014660a5 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx @@ -215,7 +215,7 @@ export function AvailableJobsTable() { }, }, }, - rowsPerPageOptions: [2, 10], + rowsPerPageOptions: [5, 10], }, pageCount: tableData?.total_pages || -1, rowCount: tableData?.total_results, diff --git a/packages/apps/human-app/frontend/src/pages/worker/profile/wallet-connect-done.tsx b/packages/apps/human-app/frontend/src/pages/worker/profile/wallet-connect-done.tsx index 5c4b5576ac..65f21c6cba 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/profile/wallet-connect-done.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/profile/wallet-connect-done.tsx @@ -8,7 +8,10 @@ import { colorPalette } from '@/styles/color-palette'; import { useAuthenticatedUser } from '@/auth/use-authenticated-user'; import { useWalletConnect } from '@/hooks/use-wallet-connect'; import { useColorMode } from '@/hooks/use-color-mode'; -import { darkColorPalette } from '@/styles/dark-color-palette'; +import { + darkColorPalette, + onlyDarkModeColor, +} from '@/styles/dark-color-palette'; const CustomTextField = styled(TextField)(() => ({ '& .Mui-disabled': { @@ -21,6 +24,11 @@ const CustomTextFieldDark = styled(TextField)(() => ({ color: darkColorPalette.text.disabledSecondary, '-webkit-text-fill-color': darkColorPalette.text.disabledSecondary, }, + '& .MuiOutlinedInput-root': { + '& fieldset': { + borderColor: `${onlyDarkModeColor.mainColorWithOpacity} !important`, + }, + }, })); export function WalletConnectDone() { diff --git a/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts b/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts index faccc93014..6f1bd0a82d 100644 --- a/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts +++ b/packages/apps/human-app/frontend/src/styles/dark-color-palette.ts @@ -15,6 +15,7 @@ export const darkColorPalette = { light: '#EDEBFD', dark: '#9D7CD6', contrastText: 'rgba(0, 0, 0, 0.87)', + shades: '', }, secondary: { main: '#5D0CE9', @@ -54,4 +55,6 @@ export const darkColorPalette = { export const onlyDarkModeColor = { backArrowBg: 'rgba(246, 247, 254, 0.1)', additionalTextColor: '#9387FF', + mainColorWithOpacity: '#CDC7FFCC', + listItemColor: '#CDC7FF29', }; diff --git a/packages/apps/human-app/frontend/src/styles/dark-theme.ts b/packages/apps/human-app/frontend/src/styles/dark-theme.ts index 9e2deee4a2..c49dd441fa 100644 --- a/packages/apps/human-app/frontend/src/styles/dark-theme.ts +++ b/packages/apps/human-app/frontend/src/styles/dark-theme.ts @@ -1,5 +1,8 @@ import type { ThemeOptions } from '@mui/material'; -import { darkColorPalette } from '@/styles/dark-color-palette'; +import { + darkColorPalette, + onlyDarkModeColor, +} from '@/styles/dark-color-palette'; import { typography } from '@/styles/typography'; import { breakpoints } from '@/styles/breakpoints'; @@ -146,6 +149,16 @@ export const darkTheme: ThemeOptions = { }, }, }, + MuiInputBase: { + styleOverrides: { + root: { + borderColor: onlyDarkModeColor.mainColorWithOpacity, + '&:hover': { + borderColor: 'white', + }, + }, + }, + }, }, breakpoints: { values: { From bdb9041d3ca4059dd51b4f9cfab34420f4abced1 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Fri, 27 Sep 2024 20:18:37 +0200 Subject: [PATCH 31/57] feat(human-app): add oracle name to jobs page --- .../services/worker/available-jobs-data.ts | 13 ++++++- .../drawer-menu-items-worker.tsx | 10 ++--- .../src/pages/worker/jobs/jobs.page.tsx | 37 ++++++++++++++++++- .../frontend/src/router/router-paths.ts | 2 +- .../human-app/frontend/src/router/routes.tsx | 22 +++++------ 5 files changed, 64 insertions(+), 20 deletions(-) diff --git a/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts b/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts index 8c7e465f0f..5008dc5625 100644 --- a/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts +++ b/packages/apps/human-app/frontend/src/api/services/worker/available-jobs-data.ts @@ -15,7 +15,18 @@ const availableJobSchema = z.object({ job_type: z.string(), status: z.string(), job_description: z.string().optional(), - reward_amount: z.number().optional(), + reward_amount: z.union([z.string(), z.number()]).transform((value, ctx) => { + const parsedNumber = Number(value); + if (Number.isNaN(parsedNumber)) { + ctx.addIssue({ + path: ['results', 'reward_amount'], + message: 'Not a numeric string', + code: 'custom', + }); + } + + return parsedNumber; + }), reward_token: z.string().optional(), }); diff --git a/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-worker.tsx b/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-worker.tsx index 9dbc78672c..f00c486c93 100644 --- a/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-worker.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-worker.tsx @@ -34,11 +34,11 @@ export const workerDrawerTopMenuItems = ( : routerPaths.worker.enableLabeler, disabled: !addressRegistered, }, - // { - // label: t('components.DrawerNavigation.jobsDiscovery'), - // link: routerPaths.worker.jobsDiscovery, - // disabled: !addressRegistered, - // }, + { + label: t('components.DrawerNavigation.jobsDiscovery'), + link: routerPaths.worker.jobsDiscovery, + disabled: !addressRegistered, + }, ]; }; diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/jobs.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/jobs.page.tsx index 7592987540..43409fbc67 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/jobs.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/jobs.page.tsx @@ -1,6 +1,8 @@ +/* eslint-disable camelcase */ import React, { useState, useEffect } from 'react'; -import { Box, Grid, Paper, Stack, Tab, Tabs } from '@mui/material'; +import { Box, Grid, Paper, Stack, Tab, Tabs, Typography } from '@mui/material'; import { useTranslation } from 'react-i18next'; +import { useParams } from 'react-router-dom'; import { TableQueryContextProvider } from '@/components/ui/table/table-query-context'; import { colorPalette } from '@/styles/color-palette'; import { useBackgroundColorStore } from '@/hooks/use-background-store'; @@ -10,6 +12,9 @@ import { MyJobsTableMobile } from '@/pages/worker/jobs/components/my-jobs/mobile import { AvailableJobsTable } from '@/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table'; import { MyJobsDrawerMobile } from '@/pages/worker/jobs/components/my-jobs/mobile/my-jobs-drawer-mobile'; import { AvailableJobsDrawerMobile } from '@/pages/worker/jobs/components/available-jobs/mobile/available-jobs-drawer-mobile'; +import { useGetOracles } from '@/api/services/worker/oracles'; +import { PageCardError, PageCardLoader } from '@/components/ui/page-card'; +import { defaultErrorMessage } from '@/shared/helpers/default-error-message'; import { AvailableJobsTableMobile } from './components/available-jobs/mobile/available-jobs-table-mobile'; import { TabPanel } from './components/jobs-tab-panel'; import { MyJobsTable } from './components/my-jobs/desktop/my-jobs-table'; @@ -22,6 +27,8 @@ function generateTabA11yProps(index: number) { } export function JobsPage() { + const { data, isError, isPending, error } = useGetOracles(); + const { address: oracle_address } = useParams<{ address: string }>(); const { setGrayBackground } = useBackgroundColorStore(); const { t } = useTranslation(); const [activeTab, setActiveTab] = useState(0); @@ -46,6 +53,18 @@ export function JobsPage() { setGrayBackground(); }, [setGrayBackground]); + const oracleName = data?.find( + ({ address }) => address === oracle_address + )?.role; + + if (isError) { + return ; + } + + if (isPending) { + return ; + } + return ( <> +
+ + {oracleName} + +
diff --git a/packages/apps/human-app/frontend/src/router/router-paths.ts b/packages/apps/human-app/frontend/src/router/router-paths.ts index bf15e9145b..602e932f46 100644 --- a/packages/apps/human-app/frontend/src/router/router-paths.ts +++ b/packages/apps/human-app/frontend/src/router/router-paths.ts @@ -11,7 +11,7 @@ export const routerPaths = { emailVerification: '/verify', verifyEmail: '/worker/verify-email', profile: '/worker/profile', - // jobsDiscovery: '/worker/jobs-discovery', + jobsDiscovery: '/worker/jobs-discovery', jobs: '/worker/jobs', HcaptchaLabeling: '/worker/hcaptcha-labeling', enableLabeler: '/worker/enable-labeler', diff --git a/packages/apps/human-app/frontend/src/router/routes.tsx b/packages/apps/human-app/frontend/src/router/routes.tsx index c4394c93d9..b5a25b9318 100644 --- a/packages/apps/human-app/frontend/src/router/routes.tsx +++ b/packages/apps/human-app/frontend/src/router/routes.tsx @@ -20,7 +20,7 @@ import { AddKeysOperatorPage } from '@/pages/operator/sign-up/add-keys/add-keys. import { EditExistingKeysSuccessPage } from '@/pages/operator/sign-up/add-keys/edit-existing-keys-success.page'; import type { PageHeaderProps } from '@/components/layout/protected/page-header'; import { HandIcon, HomepageWorkIcon, ProfileIcon } from '@/components/ui/icons'; -// import { JobsDiscoveryPage } from '@/pages/worker/jobs-discovery/jobs-discovery.page'; +import { JobsDiscoveryPage } from '@/pages/worker/jobs-discovery/jobs-discovery.page'; import { JobsPage } from '@/pages/worker/jobs/jobs.page'; import { EnableLabeler } from '@/pages/worker/hcaptcha-labeling/enable-labeler.page'; import { HcaptchaLabelingPage } from '@/pages/worker/hcaptcha-labeling/hcaptcha-labeling/hcaptcha-labeling.page'; @@ -88,16 +88,16 @@ export const protectedRoutes: { headerText: t('protectedPagesHeaders.profile'), }, }, - // { - // routerProps: { - // path: routerPaths.worker.jobsDiscovery, - // element: , - // }, - // pageHeaderProps: { - // headerIcon: , - // headerText: t('protectedPagesHeaders.jobsDiscovery'), - // }, - // }, + { + routerProps: { + path: routerPaths.worker.jobsDiscovery, + element: , + }, + pageHeaderProps: { + headerIcon: , + headerText: t('protectedPagesHeaders.jobsDiscovery'), + }, + }, { routerProps: { path: `${routerPaths.worker.jobs}/:address`, From 09a95269a5786ccd2ed18bb5c2bd3a2d1b1fda0b Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Fri, 27 Sep 2024 20:33:36 +0200 Subject: [PATCH 32/57] feat(human-app): fix table shadows --- .../src/pages/worker/jobs-discovery/jobs-discovery.page.tsx | 2 +- .../worker/jobs-discovery/oracles-table/oracles-table.tsx | 5 +++++ .../available-jobs/desktop/available-jobs-table.tsx | 5 +++++ .../worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx | 5 +++++ 4 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/jobs-discovery.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/jobs-discovery.page.tsx index 6e7a48394e..c334e5b4a5 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/jobs-discovery.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/jobs-discovery.page.tsx @@ -25,7 +25,7 @@ export function JobsDiscoveryPage() { : colorPalette.white, height: '100%', boxShadow: 'none', - padding: isMobile ? '20px' : '40px', + padding: isMobile ? '20px' : '64px 144px', minHeight: '800px', borderRadius: '20px', }} diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx index 07b98694f9..09fb433754 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx @@ -93,6 +93,11 @@ export function OraclesTable({ enableSorting: false, enablePagination: false, enableTopToolbar: false, + muiTablePaperProps: { + sx: { + boxShadow: '0px 2px 2px 0px #E9EBFA80', + }, + }, }); return ( diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx index 7b2c881b42..41e8a50bbd 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx @@ -219,6 +219,11 @@ export function AvailableJobsTable() { }} /> ), + muiTablePaperProps: { + sx: { + boxShadow: '0px 2px 2px 0px #E9EBFA80', + }, + }, }); return ; diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx index 9cc20d3d3b..95750c59b4 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx @@ -256,6 +256,11 @@ export function MyJobsTable() { }} /> ), + muiTablePaperProps: { + sx: { + boxShadow: '0px 2px 2px 0px #E9EBFA80', + }, + }, }); return ; From cbd4439521d7d66247acfa62910e34c18e7c11b4 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Fri, 27 Sep 2024 21:57:45 +0200 Subject: [PATCH 33/57] update(human-app): rename Jobs to Tasks --- .../drawer-menu-items-worker.tsx | 29 ++----------------- .../layout/protected/drawer-navigation.tsx | 15 ++++++---- .../components/layout/protected/navbar.tsx | 2 +- .../apps/human-app/frontend/src/i18n/en.json | 22 +++++++------- 4 files changed, 23 insertions(+), 45 deletions(-) diff --git a/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-worker.tsx b/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-worker.tsx index f00c486c93..886aa1dbb2 100644 --- a/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-worker.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-worker.tsx @@ -1,6 +1,4 @@ -import Typography from '@mui/material/Typography'; import { t } from 'i18next'; -import Grid from '@mui/material/Grid'; import type { BottomMenuItem, TopMenuItem, @@ -9,33 +7,12 @@ import { HelpIcon, UserOutlinedIcon, WorkIcon } from '@/components/ui/icons'; import { routerPaths } from '@/router/router-paths'; export const workerDrawerTopMenuItems = ( - addressRegistered: boolean, - labelingEnabled: boolean + addressRegistered: boolean ): TopMenuItem[] => { return [ - - - - {t('components.DrawerNavigation.jobs')} - - , { - label: t('components.DrawerNavigation.captchaLabelling'), - link: labelingEnabled - ? routerPaths.worker.HcaptchaLabeling - : routerPaths.worker.enableLabeler, - disabled: !addressRegistered, - }, - { - label: t('components.DrawerNavigation.jobsDiscovery'), + label: t('components.DrawerNavigation.jobs'), + icon: , link: routerPaths.worker.jobsDiscovery, disabled: !addressRegistered, }, diff --git a/packages/apps/human-app/frontend/src/components/layout/protected/drawer-navigation.tsx b/packages/apps/human-app/frontend/src/components/layout/protected/drawer-navigation.tsx index 9c12b2e27f..007ef60ac2 100644 --- a/packages/apps/human-app/frontend/src/components/layout/protected/drawer-navigation.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/protected/drawer-navigation.tsx @@ -100,7 +100,7 @@ export function DrawerNavigation({ ); } - const { link, label, disabled, href, onClick } = item; + const { link, label, disabled, href, onClick, icon } = item; const isActive = Boolean(link && location.pathname === link); return ( @@ -128,25 +128,26 @@ export function DrawerNavigation({ }} selected={isActive} sx={{ + px: 0, '&.Mui-selected': { backgroundColor: colorPalette.primary.shades, }, }} > + {icon} + {label} } @@ -187,6 +188,7 @@ export function DrawerNavigation({ }} selected={isActive} sx={{ + px: 0, '&.Mui-selected': { backgroundColor: colorPalette.primary.shades, }, @@ -195,6 +197,7 @@ export function DrawerNavigation({ Date: Fri, 27 Sep 2024 23:28:03 +0200 Subject: [PATCH 34/57] fix(human-app): page card component --- .../src/components/data-entry/input.tsx | 1 - .../frontend/src/components/ui/page-card.tsx | 30 ++++++++++++++++--- .../choose-sign-up-account-type.tsx | 3 +- .../sign-up/add-keys/add-keys.page.tsx | 2 +- .../sign-up/add-keys/existing-keys-form.tsx | 2 +- .../sign-up/add-keys/pending-keys-form.tsx | 2 +- .../sign-up/add-stake/add-stake.page.tsx | 2 +- .../operator/sign-up/connect-wallet.page.tsx | 2 +- .../operator/sign-up/set-up-operator.tsx | 2 +- .../reset-password-success.page.tsx | 2 +- .../reset-password/reset-password.page.tsx | 3 +- .../send-reset-link-success.page.tsx | 2 +- .../send-reset-link/send-reset-link.page.tsx | 3 +- .../src/pages/worker/sign-in.page.tsx | 28 ++++++++--------- .../src/pages/worker/sign-up.page.tsx | 3 +- .../human-app/frontend/src/shared/consts.ts | 2 -- 16 files changed, 51 insertions(+), 38 deletions(-) diff --git a/packages/apps/human-app/frontend/src/components/data-entry/input.tsx b/packages/apps/human-app/frontend/src/components/data-entry/input.tsx index d957d7e787..c0f5a43180 100644 --- a/packages/apps/human-app/frontend/src/components/data-entry/input.tsx +++ b/packages/apps/human-app/frontend/src/components/data-entry/input.tsx @@ -52,7 +52,6 @@ export function Input({ } label={label} name={name} - sx={{ maxWidth: '376px' }} variant="outlined" {...rest} /> diff --git a/packages/apps/human-app/frontend/src/components/ui/page-card.tsx b/packages/apps/human-app/frontend/src/components/ui/page-card.tsx index 504ab7fdd4..0190c87d6f 100644 --- a/packages/apps/human-app/frontend/src/components/ui/page-card.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/page-card.tsx @@ -29,7 +29,7 @@ const IconWrapper = styled('div')(() => ({ })); const commonStyles: SxProps = { - padding: '2rem 2rem 8.75rem 2rem', + padding: '2rem', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', @@ -44,6 +44,7 @@ type ButtonsProps = string | -1 | (() => void); interface FormCardProps { children: React.JSX.Element; + maxContentWidth?: string; title?: React.JSX.Element | string; alert?: React.JSX.Element; childrenMaxWidth?: string; @@ -59,6 +60,7 @@ export function PageCard({ children, title, alert, + maxContentWidth = '376px', childrenMaxWidth = '486px', backArrowPath = -1, cancelRouterPathOrCallback = routerPaths.homePage, @@ -94,7 +96,7 @@ export function PageCard({ container sx={{ ...commonStyles, - padding: isMobile ? '0 1rem 7.25rem 1rem' : '2rem 2rem 8.75rem 2rem', + padding: isMobile ? '0 1rem 7.25rem 1rem' : '2rem 2rem 7.7rem 2rem', }} > {!hiddenCancelButton && ( @@ -132,6 +134,9 @@ export function PageCard({ width: '100%', justifyContent: 'center', alignItems: 'center', + [breakpoints.mobile]: { + maxWidth: '100%', + }, }} > ) : null} - + {title} - {children} + + {children} + diff --git a/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx b/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx index 0a46c4cde6..b8b2448a50 100644 --- a/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx +++ b/packages/apps/human-app/frontend/src/pages/homepage/components/choose-sign-up-account-type.tsx @@ -22,8 +22,9 @@ export function ChooseSignUpAccountType() { {t('homepage.welcome')} 👋} > diff --git a/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/add-keys.page.tsx b/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/add-keys.page.tsx index 15f97bcf67..be61603bd9 100644 --- a/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/add-keys.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-keys/add-keys.page.tsx @@ -69,7 +69,7 @@ export function Form({ ).length; return ( - +
+
diff --git a/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-stake/add-stake.page.tsx b/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-stake/add-stake.page.tsx index f8f9a67fae..69de8eea54 100644 --- a/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-stake/add-stake.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/operator/sign-up/add-stake/add-stake.page.tsx @@ -78,7 +78,7 @@ export function AddStakeOperatorPage() { {t('operator.addStake.formHeader')} diff --git a/packages/apps/human-app/frontend/src/pages/operator/sign-up/connect-wallet.page.tsx b/packages/apps/human-app/frontend/src/pages/operator/sign-up/connect-wallet.page.tsx index e86c52fce8..5885247903 100644 --- a/packages/apps/human-app/frontend/src/pages/operator/sign-up/connect-wallet.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/operator/sign-up/connect-wallet.page.tsx @@ -46,7 +46,7 @@ export function ConnectWalletOperatorPage() { return ( - + {t('operator.connectWallet.description')} diff --git a/packages/apps/human-app/frontend/src/pages/operator/sign-up/set-up-operator.tsx b/packages/apps/human-app/frontend/src/pages/operator/sign-up/set-up-operator.tsx index 5e0b8ebbf8..dfdfd1ab2e 100644 --- a/packages/apps/human-app/frontend/src/pages/operator/sign-up/set-up-operator.tsx +++ b/packages/apps/human-app/frontend/src/pages/operator/sign-up/set-up-operator.tsx @@ -19,7 +19,7 @@ export function SetUpOperatorPage() { } title={t('operator.connectWallet.title')} > - + {t('operator.connectWallet.description')} diff --git a/packages/apps/human-app/frontend/src/pages/worker/reset-password/reset-password-success.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/reset-password/reset-password-success.page.tsx index a3893ad7aa..4128f94b56 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/reset-password/reset-password-success.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/reset-password/reset-password-success.page.tsx @@ -32,7 +32,7 @@ export function ResetPasswordWorkerSuccessPage() { } > - + {t('worker.resetPasswordSuccess.description')} diff --git a/packages/apps/human-app/frontend/src/pages/worker/reset-password/reset-password.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/reset-password/reset-password.page.tsx index eb9a0e8824..b7d9188a8d 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/reset-password/reset-password.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/reset-password/reset-password.page.tsx @@ -20,7 +20,6 @@ import { defaultErrorMessage } from '@/shared/helpers/default-error-message'; import { routerPaths } from '@/router/router-paths'; import { FormCaptcha } from '@/components/h-captcha'; import { useResetMutationErrors } from '@/hooks/use-reset-mutation-errors'; -import { MAX_INPUT_WIDTH } from '@/shared/consts'; export function ResetPasswordWorkerPage() { const location = useLocation(); @@ -70,7 +69,7 @@ export function ResetPasswordWorkerPage() { void methods.handleSubmit(handleWorkerResetPassword)(event); }} > - + {t('worker.resetPassword.description')} diff --git a/packages/apps/human-app/frontend/src/pages/worker/send-reset-link/send-reset-link-success.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/send-reset-link/send-reset-link-success.page.tsx index ee6a4c2a07..38b6a0a91c 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/send-reset-link/send-reset-link-success.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/send-reset-link/send-reset-link-success.page.tsx @@ -59,7 +59,7 @@ export function SendResetLinkWorkerSuccessPage() { void methods.handleSubmit(handleWorkerSendResetLink)(event); }} > - + - + {t('worker.sendResetLinkForm.description')} diff --git a/packages/apps/human-app/frontend/src/pages/worker/sign-in.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/sign-in.page.tsx index d9c0a9fb8c..611dce658d 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/sign-in.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/sign-in.page.tsx @@ -1,5 +1,5 @@ import { FormProvider, useForm } from 'react-hook-form'; -import { Grid, Typography } from '@mui/material'; +import { Box, Grid, Typography } from '@mui/material'; import { zodResolver } from '@hookform/resolvers/zod'; import { useTranslation } from 'react-i18next'; import { t as i18NextT } from 'i18next'; @@ -21,7 +21,6 @@ import { Alert } from '@/components/ui/alert'; import { FormCaptcha } from '@/components/h-captcha'; import { useResetMutationErrors } from '@/hooks/use-reset-mutation-errors'; import { browserAuthProvider } from '@/shared/helpers/browser-auth-provider'; -import { MAX_INPUT_WIDTH } from '@/shared/consts'; function formattedSignInErrorMessage(unknownError: unknown) { if (unknownError instanceof FetchError && unknownError.status === 400) { @@ -80,12 +79,7 @@ export function SignInWorkerPage() { void methods.handleSubmit(handleWorkerSignIn)(event) } > - + - - - {t('worker.signInForm.forgotPassword')} - - + + + + {t('worker.signInForm.forgotPassword')} + + + - +
+ +
+
+ +
+ ) : null} @@ -119,6 +127,7 @@ export function Navbar({ withNavigation }: NavbarProps) { > {t('components.navbar.howItWorks')} + diff --git a/packages/apps/human-app/frontend/src/components/ui/dark-mode-switch.tsx b/packages/apps/human-app/frontend/src/components/ui/dark-mode-switch.tsx new file mode 100644 index 0000000000..d6e2d6251c --- /dev/null +++ b/packages/apps/human-app/frontend/src/components/ui/dark-mode-switch.tsx @@ -0,0 +1,27 @@ +import { Grid, Switch } from '@mui/material'; +import { MoonIcon, SunIcon } from '@/components/ui/icons'; +import { useColorMode } from '@/hooks/use-color-mode'; + +export function DarkModeSwitch() { + const { switchMode, isDarkMode } = useColorMode(); + return ( + + + { + switchMode(); + }} + /> + + + ); +} diff --git a/packages/apps/human-app/frontend/src/components/ui/icons.tsx b/packages/apps/human-app/frontend/src/components/ui/icons.tsx index 7af9335ca7..bb09da7a37 100644 --- a/packages/apps/human-app/frontend/src/components/ui/icons.tsx +++ b/packages/apps/human-app/frontend/src/components/ui/icons.tsx @@ -32,6 +32,10 @@ import FiltersIconLight from '@/assets/icons/filters-icon.svg'; import FiltersIconDark from '@/assets/icons-dark-mode/filters-icon.svg'; import MobileHomeIconsLight from '@/assets/icons/icons-homepage/mobile-home-icons.svg'; import MobileHomeIconsDark from '@/assets/icons-dark-mode/icons-homepage/mobile-home-icons.svg'; +import SunIconDark from '@/assets/icons-dark-mode/sun.svg'; +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 '@/hooks/use-color-mode'; function HomepageLogoIcon() { @@ -102,6 +106,14 @@ function FiltersIcon() { const { isDarkMode } = useColorMode(); return isDarkMode ? : ; } +function SunIcon() { + const { isDarkMode } = useColorMode(); + return isDarkMode ? : ; +} +function MoonIcon() { + const { isDarkMode } = useColorMode(); + return isDarkMode ? : ; +} export { HomepageLogoIcon, @@ -122,4 +134,6 @@ export { FiltersButtonIcon, SortArrow, FiltersIcon, + SunIcon, + MoonIcon, }; diff --git a/packages/apps/human-app/frontend/src/contexts/color-mode-context.tsx b/packages/apps/human-app/frontend/src/contexts/color-mode-context.tsx index 1686069814..8143aec941 100644 --- a/packages/apps/human-app/frontend/src/contexts/color-mode-context.tsx +++ b/packages/apps/human-app/frontend/src/contexts/color-mode-context.tsx @@ -10,8 +10,27 @@ import { BackgroundProvider } from '@/contexts/background-color-store'; export interface ColorModeContextProps { isDarkMode: boolean; colorPalette: typeof defaultColorPalette; + switchMode: () => void; } +const MODE_LOCAL_STORAGE_KEY = 'mode'; + +const setModeInLocalStorage = (mode: 'dark' | 'light') => { + localStorage.setItem(MODE_LOCAL_STORAGE_KEY, mode); +}; + +const isDarkInModeLocalStorage = () => { + const mode = localStorage.getItem(MODE_LOCAL_STORAGE_KEY); + if (mode === 'dark') { + return true; + } + return false; +}; + +const isModeSetILocalStorage = () => { + return Boolean(localStorage.getItem(MODE_LOCAL_STORAGE_KEY)); +}; + export const ColorModeContext = createContext< ColorModeContextProps | undefined >(undefined); @@ -21,7 +40,17 @@ interface ColorModeProviderProps { } export function ColorModeProvider({ children }: ColorModeProviderProps) { - const [isDarkMode, setIsDarkMode] = useState(false); + const [isDarkMode, setIsDarkMode] = useState( + isDarkInModeLocalStorage() + ); + + const switchMode = () => { + setIsDarkMode((current) => { + const newMode = !current; + setModeInLocalStorage(newMode ? 'dark' : 'light'); + return newMode; + }); + }; const runColorMode = ( fn: (matches: boolean) => void @@ -41,6 +70,9 @@ export function ColorModeProvider({ children }: ColorModeProviderProps) { useEffect(() => { const handleColorModeChange = (matches: boolean) => { + if (isModeSetILocalStorage()) { + return; + } setIsDarkMode(matches); if (matches) { document.body.classList.add('dark-mode'); @@ -65,7 +97,9 @@ export function ColorModeProvider({ children }: ColorModeProviderProps) { ); return ( - + {children} From ef1a65fbb9443f16aff0091d0f6b00e63eb939ee Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Thu, 3 Oct 2024 17:51:52 +0200 Subject: [PATCH 55/57] fix(human-app): fix mode switching issue --- .../frontend/src/pages/worker/profile/profile.page.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx index b388396501..be5bd85e93 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx @@ -24,10 +24,13 @@ export function WorkerProfilePage() { useEffect(() => { setNotifications(); - setGrayBackground(); // eslint-disable-next-line react-hooks/exhaustive-deps -- call this once }, [isConnected]); + useEffect(() => { + setGrayBackground(); + }, [setGrayBackground]); + return ( Date: Mon, 7 Oct 2024 16:24:10 +0200 Subject: [PATCH 56/57] feat(human-app/worker-profile): fix notification banner --- packages/apps/human-app/frontend/src/i18n/en.json | 4 +--- .../frontend/src/pages/worker/profile/profile.page.tsx | 7 ++++++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/apps/human-app/frontend/src/i18n/en.json b/packages/apps/human-app/frontend/src/i18n/en.json index 99e67c6d1b..5a1dcfd6b8 100644 --- a/packages/apps/human-app/frontend/src/i18n/en.json +++ b/packages/apps/human-app/frontend/src/i18n/en.json @@ -197,9 +197,7 @@ "emailNotifications": "Email Notifications", "notificationsConsent": "I would like to be notified about News and Offers", "topNotifications": { - "noKYC": "Please set up your profile by completing the steps below.", - "noWalletConnected": "Please complete your profile! You still need to connect your wallet and add KYC info on-chain.", - "registerAddress": "Register Address" + "completeSteps": "Please set up your profile by completing the steps below." } }, "oraclesTable": { diff --git a/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx index 75dd7cbacf..d35dbdb9e6 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx @@ -8,8 +8,10 @@ import { useProtectedLayoutNotification } from '@/hooks/use-protected-layout-not import { useWalletConnect } from '@/hooks/use-wallet-connect'; import { useBackgroundColorStore } from '@/hooks/use-background-store'; import { useIsMobile } from '@/hooks/use-is-mobile'; +import { useAuthenticatedUser } from '@/auth/use-authenticated-user'; export function WorkerProfilePage() { + const { user } = useAuthenticatedUser(); const isMobile = useIsMobile(); const { isConnected } = useWalletConnect(); const { setGrayBackground } = useBackgroundColorStore(); @@ -17,9 +19,12 @@ export function WorkerProfilePage() { useProtectedLayoutNotification(); const setNotifications = () => { + if (user.wallet_address) { + return; + } setTopNotificationInLayout({ type: 'warning', - content: t('worker.profile.topNotifications.noKYC'), + content: t('worker.profile.topNotifications.completeSteps'), }); }; From d818d76506b4fa799236f742ccacaf852877d06c Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Mon, 7 Oct 2024 16:44:22 +0200 Subject: [PATCH 57/57] fix(human-app/worker/labeling): redirect user without site key to enable labeling page --- .../worker/jobs-discovery/oracles-table/oracles-table.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx index 04dc0d5b18..bb4520c445 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx @@ -15,6 +15,7 @@ import { routerPaths } from '@/router/router-paths'; import { OraclesTableMobile } from '@/pages/worker/jobs-discovery/oracles-table/oracles-table-mobile'; import type { OraclesDataQueryResult } from '@/pages/worker/jobs-discovery/jobs-discovery.page'; import { env } from '@/shared/env'; +import { useAuthenticatedUser } from '@/auth/use-authenticated-user'; const getColumns = ( selectOracle: (oracleAddress: string) => void @@ -77,8 +78,14 @@ export function OraclesTable({ } = oraclesQueryDataResult; const navigate = useNavigate(); const isMobile = useIsMobile(); + const { user } = useAuthenticatedUser(); const selectOracle = (oracleAddress: string) => { if (oracleAddress === env.VITE_H_CAPTCHA_ORACLE_ADDRESS) { + if (!user.site_key) { + navigate(routerPaths.worker.enableLabeler); + return; + } + navigate(routerPaths.worker.HcaptchaLabeling); return; }