From a87ed77e9634fda598dd62c7c45f349acdbc2d45 Mon Sep 17 00:00:00 2001 From: BartoszSolkaBD <129835794+BartoszSolkaBD@users.noreply.github.com> Date: Wed, 17 Jul 2024 15:21:38 +0200 Subject: [PATCH] Human APP frontend fixes after UI review (#2292) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(app/worker-profile/my-jobs): integrate my jobs table with api * feat(app/worker-profile/jobs): separate common logic to hooks * feat(app/worker-profile/jobs): fix naming * feat(app/worker-profile/my-jobs): fix according to review * save * feat(app/worker/profile): add synaps KYC verification * feat(app/worker/profile): remove empty file * feat(app/worker/profile): remove unused hook * feat(app/worker/profile/jobs): refactor according to review * feat(app/operator): prepare operator layout * feat(app/operator): add preapare siganture for web3 auth * feat(app/operator/profile): update signup flow * fix(app/use-connected-wallet-hook): add initial state handling * fix(app/worker-profile): fix actions buttons states * feat(app/operator/profile): add disable button * fix(app/protected-layouts): prevent multi logging * feat(app/operator): disable operator * feat(app/operator/profile): separate auth providers * feat(app/operator/profile): fix logout button * fix(app): add layout fixes * feat(app): prepare demo * feat(app): fix table buttons * feat(app/worker/jobs): add oracles table * fix(app/auth): use one browser auth provider * fix(app/worker/jobs): add oracles table * feat(app/worker/jobs-discovery-page: add jobs discovery page * reafactor(app/browser-auth-provider): remove useless methods * refactor(app/auth): refactor auth provider * fix(app/worker/profile): refactor according to review * HAF-93: Hide cancel button * HAF-92: Change add stake form submit text * HAF-89: Style fixes on Setup operator mobile page * HAF-87: Add arrow back to reset page * HAF-88: Hide cancel button on password changed page * HAF-85: Change text weight on reset password page * HAF-83: Change worker sign up link styles * HAF-81: Verify email page styles * HAF-80: Sign up worker styles * HAF-79: Sign Up choose accout type styles * HAF-77: Reset password page styles * HAF-75: Reset password styles update * HAF-74: Sign up form errors * HAF-73: Sign in validation messages * remove unused react imports * HAF-66: Add captcha to sign worker sign up * feat(app/operator/signin): add operator singin * fix(worker/profile/reset-password): fix link to profile * feat(app/operator/signin): handle logged operator * feat(app/worker/signin): add hcaptacha * feat(app/operator/signin): add error handler * Haf 59 wfb add successful kyc info on chain (#115) * feat(app/worker/profile): add register-address service * feat(app/user/worker): add KYC info on chain * feat(app/user/worker): handle rpc errors during KYC registration * feat(app/user/worker): add kyc on chain * feat(app/user/worker): fix according to review * feat(app): add wallet connect custom modal * feat(app/worker/profile/hcaptcha-labeling): add labeling page * feat(app/worker/profile): add text field for connected wallet address * feat(app/worker/profile/my-jobs): add icons to my-jobs table headers * feat(app/multi-select): fix and apply new mulit select * feat(app/worker/send-email-verification): fix copy and remove resend button * feat(app/worker/reset-password): add hcaptcha and resend button * fix(app/layout): fix layout * feat(app/worker/email-verification): add verification mutation state * fix(app/worker/email-verification): add resend email error handling * fix(app/worker/profile/jobs): add missing filters and icons * refactor(app/worker/profile/jobs-discovery/table): move react query to parent component * refactor(app/worker/jobs): improve table headers * refactor(app/profile/worker/tabel): fix naming * refactor(app/profile/worker/tabel): remove reduntant headers * feat(app/worker/hcaptcha-labeling): update hcaptcha labeling * feat(app/worker/hcaptcha): add servces * feat(app/worker/hcaptcha): add props * feat(app/worker): update services * fix(app): layout * feat(app): add json rpc error * feat(app/worker/auth): add updating JWT payload * feat(app/worker/auth): update signout * fix(app/worker): fix register address * fix(app/layout): add layout fixes * fix(app/worker/stats): fix user stats details * feat(app/worker/labeling): fix stats, labaling page reload and hard reload after signin * fix(app/worker/labeling): fix copy * refactor(app/worker/labeling): fix axxroding to review * add demo fixes * add demo fixes * fix(app): demo updates * fix(app/worker/profile): fix profile layout * refactor(app/woreker/profile/labling): refactor according to review * fix(app): fixes after demo * refactor(app): refactor according to review * fix(app/worker/profile/jobs): fix drawer * 4th milestone features (#79) * Milestone 4 - draft: TODO * User stats endpoint, test and possible rework of response mapping * Add unit tests * Add proxy endpoints for: - user/register-address - auth/signin/web3 * Adds test coverage, minor fixes * Adds additional proxies for 4 milestone * Reworks reputation oracle gateway test suite, adds necessary mappings * adds missing await * Review fixes * Adds /user/register-address handling * Changes endpoint name * Adds import fixes * Adds controller and module to the main app module * Updates README.md (#125) * Updates README.md: Adds Caching section, Changes in signature type * README.md updates * README.md updates * fix(app/user/worker): remove chain id validation (#114) * fix(app/user/worker): remove chain id validation * Test fix and JWT User data align * Updates README.md: Adds Caching section, Changes in signature type * Removes commented code * Changes after hcaptcha api check * Adds interceptor for axios requests * Fix/signature (#126) * Updates README.md (#125) * Updates README.md: Adds Caching section, Changes in signature type * README.md updates * README.md updates * fix(app/worker): add signature field to req body * update(app): revert readme * fix(app/register-address): fix test --------- Co-authored-by: macnablocky <143715306+macnablocky@users.noreply.github.com> Co-authored-by: Kacper Koza * Fixes undefined in POST data, fixes unit tests * Adds Resign job feature, small changes in the gateway config (#134) * Fixes * Fixes in dependencies --------- Co-authored-by: Kacper Koza Co-authored-by: maciej.nabialek Co-authored-by: macnablocky <143715306+macnablocky@users.noreply.github.com> * Fixes restore password * Fixes restore password part 2. * review fixes --------- Co-authored-by: KacperKoza343 <165884432+KacperKoza343@users.noreply.github.com> Co-authored-by: Kacper Koza Co-authored-by: Bartosz Solka * fixes after merge * feat(app/worker/jobs): add tasks rejecting * feat(app/worker/jobs): add infinite scroll on mobile * fix(app/worker/jobs): fix jobs resigning (#138) Co-authored-by: = * feat(app/worker/jobs): connect drawer with api * feat(app/worker/jobs): add sorting by escrow address * refactor(app/worker/jobs): fix props naming * Add TokenRefresh feature in reputation oracle integration (#141) * Update endpoint paths in `reputation-oracle.gateway.spec.ts`. * Add TokenRefresh feature in reputation oracle integration * fix(app): build * fix(app/auth): fix refresh token flow (#143) * fix(app/worker/jobs/filters): update table filters * fix(app): layout fixes * Update mapping conventions for pagination and sorting (#144) * update(app/operator/set-up): update setup flow * fix(app/nav-bar): show navbar buttons only on main page * fix(app/nav-bar): add envs links * feat(app): add refreshing token after requests * update(app/worker/sign-up): update signup flow * fix(app): fix error page and evm address displaying * fix(app/operator/sign-up): add skip button for existing keys * feat(app): add chat icon * feat(app): fix chat icons styles * refactor(app/worker/jobs): refactor filters * refactor(app/operator/set-up): refactor according to review * refactor(app/operator/set-up): refactor according to review * fix(app/operator/set-up): fix keys forms * fix(app/worker/jobs): oracles table fix * fix(app/operator/set-up): update inputs order * Fixes after client review (#150) * Fixes after client review * Fixes after client review * Fixes after client review * Fixes failing test * small fix in displaying axios interceptor logs * Adds filtering to oracle discovery (#154) * Adds filtering to oracle discovery * Adds and passes tests for controller, adds mapper * Adds and passes tests for service * Rework of oracle-discovery.service.ts in alignment with code review remark * update server * update yarn.lock * Modifies filtering in oracle discovery to be case insensitive (but will return original data) (#159) * fix(app/auth): fix getting refersh token * feat(app/operator/set-up): add url field * feat(app/operator/profile): add fetching stats on profile (#162) * fix(app/worker/profile): refetch KVStore data after setting address (#163) * fix(app): fix chat icon position (#164) * fix(app/woreker/jobs): fix jobs tables * Fixes in validators, fixes in parsing Oracle Discovery DTO * Revert "Fixes in validators, fixes in parsing Oracle Discovery DTO" This reverts commit 68953aea2d9e891db535563cb53b3c3380897f92. * Validator fixes (#166) * Fixes in validators, fixes in parsing Oracle Discovery DTO * Removes TransformToArray from decorator list, * Rollbacks yarn lock in dashboard admin * Changes to improve swagger readablity * refactor(app/woreker/jobs): refactor according to review * fix(app/worker/jobs): type pagination arguments * Adds optional validator to jobsDiscoveryParamsDto.sort_field (#168) * Adds optional validator to jobsDiscoveryParamsDto.sort_field * Adds optional validator to jobsDiscoveryParamsDto.job_type * feat(app/worker/jobs): fix oracles dto and jobs pagination (#169) * feat(app/worker/jobs): fix oracles dto and jobs pagination * fix(app/worker/jobs): fix oracles dto * docs(app): update readme and .env.example (#170) * Add lock * Human app maintanance (#178) * HAM-2 * HAM-6 * HAM-3 * HAM-3 part 2 * HAM-9 * HAM-1 * HAM-5 * HAM-1 rework * Fix to HAM-9 * Fix to HAM-6 * HAM-16/30/31/32 (#181) * HAM-16/30/31/32 * Fixes in resing job (#187) * fix(app/worker/jobs): fix resign job dto * Fixes ut --------- Co-authored-by: KacperKoza343 * Changes assignment id back from number to string (#190) * Changes assignment id back from number to string (#188) * Changes assignment id back from number to string * Update job-assignment.model.ts * Ham 8 backend implementation (#192) * feat(app/worker/password): add hcaptcha field * Fixes endpoint model for forgot password, adds h-captcha token to email verification resend endpoint model * Adds proper handling of ttl and changes address to wallet_address in JWT token decoding * Adds proper handling of ttl and changes address to wallet_address in JWT token decoding * small fix * small fix * Adds cache reset on demand --------- Co-authored-by: KacperKoza343 * updates default allowed headers (#199) * Feature/human app frontend 2nd milestone (#200) * Add lock * feat(app/worker): add missing hcaptcha * fix(app/hcaptcha): refresh form captcha after FetchError * feat(app): add missing captcha * feat(app): add error to captcha * feat(app): add gracefull error handling (#172) * fix(app/worker/profile): fix KYC start process * feat(app/worker/profile): fix mobile jobs tables * fix(app): fix copy (#176) * fix(app/worker/profile): disable job discovery when did not register address (#175) * fix(app/wallet-connect): improve networks narrowing * fix(app/operator/set-up/stake): redirect after successfull stake * fix(app/operator/set-up/stake): remove useless changes * feat(app/auth): logout user when tokens expire * fix(app/worker/jobs): extend job routing * feat(app/operator/set-up): ommit approve if not nesseccary while staking * feat(app/auth): allow user to switch account on homepage * fix(app/auth/jwt-expiration): fix naming * fix(app/worker/profile): remove callbacks from KYC mutation hook * feat(app/worker/email-verification): redirect unverified user to veri… (#189) * feat(app/worker/email-verification): redirect unverified user to verify page * feat(app/worker/email-verification): logout on cancel button * fix(app/auth): update jwt payload (#194) * feat(app/worker/email-verification): prevent unathenticated user from resend email verification (#195) * Ham 20 register address and add kyc on chain should be two different steps (#191) * feat(app/worker/register-address): separate address registering from KVStore setup * feat(app/worker/profile): change adding value to KVStore * feat(app/worker/profile): update KYC on chain feature * feat(app/worker/profile): update profile actions * feat(app/worker/profile): handle new KYC responses (#196) * feat(app/worker/profile): remove oracle address * fix(app/worker/jobs): change assigment_id type (#193) * Ham 44 missing oracle address in my jobs table (#197) * fix(app/worker/jobs): fix my jobs fetching * fix(app/worker/jobs/resign-job): fix resign jobs dto * feat(app/layout): close drawer on link click (#198) * fix(app): add fixes after review * revert yarn.lock --------- Co-authored-by: MicDebBlocky <162431379+MicDebBlocky@users.noreply.github.com> * revert unwanted changes * fix(app/worker/profile): fix response validation and enable labeling notification (#201) * Ham 49 after password reset user should be logged out (#202) * fix(app/worker/profile): fix response validation and enable labeling notification * fix(app/worker/profile/reset-password): logout user after password reset * Ham 50 log out user when enters signup page (#204) * fix(app/worker/signout): logout user when visiting sign up page * fix(app/auth-pages): logout users * Ham 52 fix help button in worker profile (#205) * fix(app/worker/signout): logout user when visiting sign up page * fix(app/auth-pages): logout users * fix(app/profiles): update help buttons in drawers * Fix/help url (#206) * fix(app/worker/signout): logout user when visiting sign up page * fix(app/auth-pages): logout users * fix(app/profiles): update help buttons in drawers * fix(app/profiles): help url redirect * fix(app/worker/password): fix cancel button (#207) * feat(app/operator/profile): update UI according to operator (#208) * feat(app/operator/profile): update UI according to operator * fix(app/operator/profile): update JWT data after deactivation * feat(app/networks): add deafult mainnet and testnet networks (#209) * feat(app): fixes after review (#210) * feat(app): fixes after review * fix(app): styles * Fixes after merge * Removed indentation in test_transaction_utils --------- Co-authored-by: MicDebBlocky <162431379+MicDebBlocky@users.noreply.github.com> Co-authored-by: KacperKoza343 Co-authored-by: portuu3 <61605646+portuu3@users.noreply.github.com> Co-authored-by: Mateusz Marcinkowski Co-authored-by: KacperKoza343 <165884432+KacperKoza343@users.noreply.github.com> Co-authored-by: macnablocky <143715306+macnablocky@users.noreply.github.com> Co-authored-by: Kacper Koza Co-authored-by: maciej.nabialek Co-authored-by: Michał Walczak <137490000+MWBlocky@users.noreply.github.com> --- packages/apps/human-app/frontend/.env.example | 2 + .../src/assets/icons/icons-homepage/logo.svg | 95 ++++--------------- .../src/assets/icons/icons-homepage/user.svg | 57 ++++------- .../src/assets/icons/icons-homepage/work.svg | 48 +++++----- .../password/password-check-label.tsx | 4 +- .../data-entry/password/password.tsx | 28 +++++- .../drawer-menu-items-operator.tsx | 11 ++- .../drawer-menu-items-worker.tsx | 11 ++- .../frontend/src/components/layout/footer.tsx | 51 ++++++---- .../layout/protected/drawer-navigation.tsx | 34 ++++--- .../components/layout/protected/layout.tsx | 86 +++++++++++++---- .../components/layout/protected/navbar.tsx | 48 ++++++++-- .../frontend/src/components/ui/page-card.tsx | 2 +- .../src/components/ui/top-notification.tsx | 13 ++- .../apps/human-app/frontend/src/i18n/en.json | 10 +- .../src/pages/homepage/components/chat.tsx | 21 ++-- .../choose-sign-up-account-type.tsx | 8 +- .../src/pages/homepage/components/welcome.tsx | 9 +- .../pages/operator/profile/profile.page.tsx | 4 +- .../sign-up/add-keys/add-keys.page.tsx | 6 +- .../sign-up/add-stake/add-stake.page.tsx | 6 +- .../operator/sign-up/connect-wallet.page.tsx | 6 +- .../operator/sign-up/set-up-operator.tsx | 1 - .../email-verification/verify-email.page.tsx | 8 +- .../hcaptcha-labeling/enable-labeler.page.tsx | 2 +- .../hcaptcha-labeling.page.tsx | 2 +- .../jobs-discovery/jobs-discovery.page.tsx | 2 +- .../src/pages/worker/jobs/jobs.page.tsx | 2 +- .../src/pages/worker/profile/profile.page.tsx | 4 +- .../reset-password/reset-password.page.tsx | 1 - .../send-reset-link/send-reset-link.page.tsx | 1 - .../src/pages/worker/sign-in.page.tsx | 1 - .../src/pages/worker/sign-up.page.tsx | 6 +- .../apps/human-app/frontend/src/shared/env.ts | 1 + .../frontend/src/shared/helpers/regex.ts | 6 +- 35 files changed, 340 insertions(+), 257 deletions(-) diff --git a/packages/apps/human-app/frontend/.env.example b/packages/apps/human-app/frontend/.env.example index e196f93364..b60b85ac5e 100644 --- a/packages/apps/human-app/frontend/.env.example +++ b/packages/apps/human-app/frontend/.env.example @@ -8,6 +8,8 @@ VITE_TERMS_OF_SERVICE_URL= #string VITE_HUMAN_PROTOCOL_HELP_URL= #string # link to human web page VITE_HUMAN_PROTOCOL_URL= #string +# link to "Learn more" in wallet connect modal +VITE_WALLET_CONNECT_MODAL_LINK= #string # link to human web page in main page navbar VITE_NAVBAR__LINK__PROTOCOL_URL= #string # link to human web page section in main page navbar diff --git a/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/logo.svg b/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/logo.svg index ab908043f3..40ae9fc71a 100644 --- a/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/logo.svg +++ b/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/logo.svg @@ -1,96 +1,35 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + - + - - + + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - + - + - - - - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/user.svg b/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/user.svg index ef8357c321..6d1000e608 100644 --- a/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/user.svg +++ b/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/user.svg @@ -1,61 +1,38 @@ - - - - - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - + - - + + - - + + - + + - + - + - + - - - diff --git a/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/work.svg b/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/work.svg index 66c9cb892b..4602c220fe 100644 --- a/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/work.svg +++ b/packages/apps/human-app/frontend/src/assets/icons/icons-homepage/work.svg @@ -1,47 +1,47 @@ - - - + + + - - + + - - - - - - + + + + + + - + - - + + - - + + - + - - + + - - + + - + - + - + diff --git a/packages/apps/human-app/frontend/src/components/data-entry/password/password-check-label.tsx b/packages/apps/human-app/frontend/src/components/data-entry/password/password-check-label.tsx index 7ecc0ca4bd..02206b63fd 100644 --- a/packages/apps/human-app/frontend/src/components/data-entry/password/password-check-label.tsx +++ b/packages/apps/human-app/frontend/src/components/data-entry/password/password-check-label.tsx @@ -12,13 +12,13 @@ export interface PasswordCheck { const getColor = (isSubmitted: boolean, isValid: boolean) => { if (isSubmitted) { if (isValid) { - return colorPalette.success.main; + return colorPalette.success.dark; } return colorPalette.error.main; } if (isValid) { - return colorPalette.success.main; + return colorPalette.success.dark; } return colorPalette.text.primary; 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 ef0fa37cf2..12bac3bc6c 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 @@ -10,6 +10,7 @@ import { PasswordCheckLabel, type PasswordCheck, } from '@/components/data-entry/password/password-check-label'; +import { colorPalette } from '@/styles/color-palette'; type CommonProps = InputProps & { type?: never }; @@ -43,7 +44,12 @@ export function Password({ const customError = passwordCheckHeader ? ( - {passwordCheckHeader} + + {passwordCheckHeader} + {passwordChecks.map((checks) => { return ( @@ -64,19 +70,35 @@ export function Password({ {...rest} InputProps={{ endAdornment: ( - + - {showPassword ? : } + {showPassword ? ( + + ) : ( + + )} ), }} customError={customError} + onKeyDown={(e) => { + // ignore space + if (e.keyCode === 32) { + e.preventDefault(); + e.stopPropagation(); + } + }} type={showPassword ? 'text' : 'password'} /> ); diff --git a/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-operator.tsx b/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-operator.tsx index 3dee341dd5..1f845e0869 100644 --- a/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-operator.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/drawer-menu-items/drawer-menu-items-operator.tsx @@ -2,7 +2,6 @@ import { t } from 'i18next'; import type { BottomMenuItem } from '@/components/layout/protected/drawer-navigation'; import { HelpIcon, UserOutlinedIcon } from '@/components/ui/icons'; import { routerPaths } from '@/router/router-paths'; -import { env } from '@/shared/env'; export const operatorDrawerBottomMenuItems: BottomMenuItem[] = [ { @@ -12,7 +11,15 @@ export const operatorDrawerBottomMenuItems: BottomMenuItem[] = [ }, { label: t('components.DrawerNavigation.help'), - href: env.VITE_HUMAN_PROTOCOL_HELP_URL, icon: , + onClick: () => { + // @ts-expect-error -- ... + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- ... + if ($zoho?.salesiq?.chat?.start) { + // @ts-expect-error -- ... + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call -- ... + $zoho.salesiq.chat.start(); + } + }, }, ]; 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 fc6d18f5b8..b7eff4ce7c 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 @@ -7,7 +7,6 @@ import type { } from '@/components/layout/protected/drawer-navigation'; import { HelpIcon, UserOutlinedIcon, WorkIcon } from '@/components/ui/icons'; import { routerPaths } from '@/router/router-paths'; -import { env } from '@/shared/env'; export const workerDrawerTopMenuItems = ( addressRegistered: boolean @@ -48,7 +47,15 @@ export const workerDrawerBottomMenuItems: BottomMenuItem[] = [ }, { label: t('components.DrawerNavigation.help'), - href: env.VITE_HUMAN_PROTOCOL_HELP_URL, icon: , + onClick: () => { + // @ts-expect-error -- ... + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- ... + if ($zoho?.salesiq?.chat?.start) { + // @ts-expect-error -- ... + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call -- ... + $zoho.salesiq.chat.start(); + } + }, }, ]; 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 8ec7f00e77..b7c96515a8 100644 --- a/packages/apps/human-app/frontend/src/components/layout/footer.tsx +++ b/packages/apps/human-app/frontend/src/components/layout/footer.tsx @@ -4,11 +4,13 @@ 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'; interface FooterProps { + displayChatIcon?: boolean; isProtected?: boolean; } -export function Footer({ isProtected }: FooterProps) { +export function Footer({ isProtected, displayChatIcon = true }: FooterProps) { const { t } = useTranslation(); const isMobile = useIsMobile('md'); @@ -31,22 +33,36 @@ export function Footer({ isProtected }: FooterProps) { pl: parseLeftPadding(), pb: isMobile ? 0 : '44px', pt: '32px', + [breakpoints.mobile]: { + pr: 0, + pl: 0, + pb: 0, + pt: 0, + padding: '32px', + }, }} > - + @@ -57,7 +73,6 @@ export function Footer({ isProtected }: FooterProps) { @@ -78,17 +93,17 @@ export function Footer({ isProtected }: FooterProps) { {t('components.footer.humanProtocol')} + {isMobile ? ( + + {t('components.footer.copyrightNote')} + + ) : null} - - {t('components.footer.copyrightNote')} - + {!isMobile ? ( + + {t('components.footer.copyrightNote')} + + ) : null} - + ); 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 7d1c4ec89e..44235ed439 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 @@ -12,6 +12,7 @@ import type { Dispatch, SetStateAction } from 'react'; import { HumanLogoNavbarIcon } from '@/components/ui/icons'; import { Button } from '@/components/ui/button'; import { useIsMobile } from '@/hooks/use-is-mobile'; +import { paddingX } from '@/components/layout/protected/navbar'; const drawerWidth = 240; @@ -45,7 +46,11 @@ export function DrawerNavigation({ const isMobile = useIsMobile(); return ( - + {!isMobile && ( - + )} @@ -80,16 +85,11 @@ export function DrawerNavigation({ {topMenuItems?.map((item, index) => { if (!('label' in item)) { return ( - { - setDrawerOpen(false); - }} - > + {item} @@ -98,12 +98,16 @@ export function DrawerNavigation({ ); } - const { link, label, disabled, href } = item; + const { link, label, disabled, href, onClick } = item; return ( { + if (onClick) { + onClick(); + return; + } if (disabled) return; if (isMobile) setDrawerOpen(false); if (href) { @@ -122,7 +126,7 @@ export function DrawerNavigation({ - {bottomMenuItems?.map(({ label, link, icon, href }) => ( + {bottomMenuItems?.map(({ label, link, icon, href, onClick }) => ( { + if (onClick) { + onClick(); + return; + } if (isMobile) setDrawerOpen(false); if (href) { const element = document.createElement('a'); @@ -171,7 +179,7 @@ export function DrawerNavigation({ direction="row" justifyContent="center" sx={{ - ml: isMobile ? '12px' : '56px', + ml: isMobile ? '28px' : paddingX, }} > {icon} 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 c02b2b043e..e7ba58c860 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 @@ -1,6 +1,6 @@ import { Grid } from '@mui/material'; import type { Dispatch, SetStateAction } from 'react'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { styled } from '@mui/material/styles'; import { Outlet } from 'react-router-dom'; import { useIsMobile } from '@/hooks/use-is-mobile'; @@ -49,6 +49,10 @@ export function Layout({ ) => JSX.Element; renderHCaptchaStatisticsDrawer?: (isOpen: boolean) => JSX.Element; }) { + const [notificationWith, setNotificationWith] = useState< + number | undefined + >(); + const layoutElementRef = useRef(); const isHCaptchaLabelingPage = useIsHCaptchaLabelingPage(); const [notification, setNotification] = useState(null); @@ -72,6 +76,25 @@ export function Layout({ } }, [isMobile]); + const setNotificationWidth = () => { + if (layoutElementRef.current) { + setNotificationWith(layoutElementRef.current.clientWidth); + } + }; + useEffect(() => { + setNotificationWidth(); + window.addEventListener('resize', () => { + setNotificationWidth(); + }); + return () => { + window.removeEventListener('resize', setNotificationWidth); + }; + }, []); + + useEffect(() => { + setNotificationWidth(); + }, [notification]); + return ( - {notification ? ( - { - setNotification(null); - }} - type={notification.type} - > - {notification.content} - - ) : null} + + {notification ? ( + + { + setNotification(null); + }} + type={notification.type} + > + {notification.content} + + + ) : null} + - + -
+
); 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 a310261bc6..ec5eedbb73 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 @@ -8,6 +8,8 @@ import { colorPalette } from '@/styles/color-palette'; import { Button } from '@/components/ui/button'; import { useIsHCaptchaLabelingPage } from '@/hooks/use-is-hcaptcha-labeling-page'; +export const paddingX = '44px'; + interface NavbarProps { open: boolean; setOpen: (open: boolean) => void; @@ -23,6 +25,39 @@ export function Navbar({ }: NavbarProps) { const isMobile = useIsMobile(); const isHCaptchaLabelingPage = useIsHCaptchaLabelingPage(); + const getIcon = () => { + switch (true) { + case open: + return ( + { + setOpen(false); + }} + /> + ); + case !open && !userStatsDrawerOpen: + return ( + { + setOpen(true); + }} + /> + ); + case userStatsDrawerOpen: + return ( + { + if (toggleUserStatsDrawer) { + toggleUserStatsDrawer(); + } + }} + /> + ); + default: + return null; + } + }; + return ( {isHCaptchaLabelingPage && toggleUserStatsDrawer ? ( ) : null} - { - setOpen(!open); - }} - > - {open ? : } - + {getIcon()} ); 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 6a1e58c1a9..9e4bca01ea 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 @@ -56,7 +56,7 @@ export function PageCard({ title, alert, childrenMaxWidth = '486px', - backArrowPath, + backArrowPath = -1, cancelRouterPathOrCallback = routerPaths.homePage, withLayoutBackground = true, hiddenCancelButton = false, 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 fcec827cc6..a23525bc45 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 @@ -4,6 +4,7 @@ import type { AlertProps as MuiAlertProps } from '@mui/material/Alert'; import { Typography } from '@mui/material'; import ErrorIcon from '@mui/icons-material/Error'; import { colorPalette } from '@/styles/color-palette'; +import { breakpoints } from '@/styles/theme'; export type TopNotificationType = 'success' | 'warning'; @@ -33,7 +34,17 @@ export function TopNotification({ diff --git a/packages/apps/human-app/frontend/src/i18n/en.json b/packages/apps/human-app/frontend/src/i18n/en.json index 86104fa56f..c2416f5778 100644 --- a/packages/apps/human-app/frontend/src/i18n/en.json +++ b/packages/apps/human-app/frontend/src/i18n/en.json @@ -58,7 +58,7 @@ "jobsDiscovery": "Jobs discovery", "profile": "Profile", "help": "Help", - "logout": "Log out" + "logout": "Log Out" }, "footer": { "privacyPolicy": "Privacy Policy", @@ -121,7 +121,7 @@ "emailTaken": "Email is already taken. Please sign in." }, "title": "Sign Up", - "submitBtn": "Sign up", + "submitBtn": "Sign Up", "passwordDetailedValidation": "Password must contain at least:", "termsOfServiceAndPrivacyPolicy": "By clicking Sign Up, you agree to our <1>Terms of Service and that you have read our <2>Privacy Policy" }, @@ -134,8 +134,8 @@ "invalidCredentials": "Incorrect email or password!" }, "title": "Sign In", - "submitBtn": "Sign in", - "forgotPassword": "Forgot password?" + "submitBtn": "Sign In", + "forgotPassword": "Forgot Password?" }, "sendEmailVerification": { "title": "Verify Email", @@ -275,7 +275,7 @@ }, "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" + "enableButton": "Enable Labeling" }, "hcaptchaLabelingStats": { "hCapchaStatistics": "hCapcha Statistics", diff --git a/packages/apps/human-app/frontend/src/pages/homepage/components/chat.tsx b/packages/apps/human-app/frontend/src/pages/homepage/components/chat.tsx index f1a5d74f5b..2843a778f0 100644 --- a/packages/apps/human-app/frontend/src/pages/homepage/components/chat.tsx +++ b/packages/apps/human-app/frontend/src/pages/homepage/components/chat.tsx @@ -1,6 +1,10 @@ import { useEffect, useRef } from 'react'; -export function Chat() { +export function Chat({ + displayChatIcon = true, +}: { + displayChatIcon?: boolean; +}) { const ref = useRef(null); useEffect(() => { @@ -14,10 +18,15 @@ export function Chat() { const rootRect = root.getBoundingClientRect(); chatElement.style.position = 'absolute'; - chatElement.style.top = `${refRect.top - rootRect.top}px`; - chatElement.style.left = `${refRect.left - rootRect.left}px`; - chatElement.style.width = `${refRect.width}px`; - chatElement.style.height = `${refRect.height}px`; + if (displayChatIcon) { + chatElement.style.opacity = '1'; + chatElement.style.top = `${refRect.top - rootRect.top}px`; + chatElement.style.left = `${refRect.left - rootRect.left}px`; + chatElement.style.width = `${refRect.width}px`; + chatElement.style.height = `${refRect.height}px`; + } else { + chatElement.style.opacity = '0'; + } } }; @@ -60,7 +69,7 @@ export function Chat() { resizeObserverElement.parentNode.removeChild(resizeObserverElement); } }; - }, [ref]); + }, [ref, displayChatIcon]); return (
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 28ed89ffdd..595bb747d0 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 @@ -33,13 +33,18 @@ export function Welcome({ setStage }: WelcomeProps) { {isMobile ? ( - + ) : ( - + 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 9cbb082860..c578efed32 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: '40px', + padding: isMobile ? 0 : '40px', borderRadius: '20px', }} > @@ -176,7 +176,7 @@ export function OperatorProfilePage() { width: '100%', display: 'flex', flexDirection: 'column', - padding: '40px', + padding: isMobile ? 0 : '40px', borderRadius: '20px', }} > 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 9550bfc56f..f290dcf886 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 @@ -51,11 +51,7 @@ export function AddKeysOperatorPage() { } 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 038bb74515..f960ef742a 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 @@ -75,11 +75,7 @@ export function AddStakeOperatorPage() { } 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 84cecb7ff4..5e0b8ebbf8 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 @@ -17,7 +17,6 @@ export function SetUpOperatorPage() { {t('operator.connectWallet.successAlert')} } - backArrowPath={-1} title={t('operator.connectWallet.title')} > 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 0048a52889..a16071813f 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 @@ -114,7 +114,13 @@ export function VerifyEmailWorkerPage() { , + 1: ( + + ), 2: ( diff --git a/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/hcaptcha-labeling.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/hcaptcha-labeling.page.tsx index cb4a221dfb..0eddbb0bb6 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/hcaptcha-labeling.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/hcaptcha-labeling/hcaptcha-labeling/hcaptcha-labeling.page.tsx @@ -97,7 +97,7 @@ export function HcaptchaLabelingPage() { : colorPalette.white, height: '100%', boxShadow: 'none', - padding: '40px', + padding: isMobile ? 0 : '40px', borderRadius: '20px', }} > 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 6ac0894f09..615e4a2857 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: '40px', + padding: isMobile ? 0 : '40px', minHeight: '800px', borderRadius: '20px', }} 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 0d77344a80..6581f05c93 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 @@ -71,7 +71,7 @@ export function JobsPage() { : colorPalette.white, height: '100%', boxShadow: 'none', - padding: '40px', + padding: isMobile ? 0 : '40px', minHeight: '800px', borderRadius: '20px', }} 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 884c79b90f..35314c1709 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,6 +9,7 @@ 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 } @@ -24,6 +25,7 @@ const getNotificationMessage = ( }; export function WorkerProfilePage() { + const isMobile = useIsMobile(); const { user } = useAuthenticatedUser(); const { isConnected } = useWalletConnect(); const { setGrayBackground } = useBackgroundColorStore(); @@ -52,7 +54,7 @@ export function WorkerProfilePage() { backgroundColor: colorPalette.white, height: '100%', boxShadow: 'none', - padding: '40px', + padding: isMobile ? 0 : '40px', display: 'flex', flexDirection: 'column', borderRadius: '20px', 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 3709099653..21cf5b47a5 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 @@ -56,7 +56,6 @@ export function ResetPasswordWorkerPage() { ) : undefined } - backArrowPath={routerPaths.worker.profile} cancelRouterPathOrCallback={routerPaths.worker.profile} hiddenCancelButton title={t('worker.resetPassword.title')} diff --git a/packages/apps/human-app/frontend/src/pages/worker/send-reset-link/send-reset-link.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/send-reset-link/send-reset-link.page.tsx index 0c06f21b83..4394ae5ded 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/send-reset-link/send-reset-link.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/send-reset-link/send-reset-link.page.tsx @@ -49,7 +49,6 @@ export function SendResetLinkWorkerPage() { ) : undefined } - backArrowPath={-1} cancelRouterPathOrCallback={routerPaths.worker.profile} title={t('worker.sendResetLinkForm.title')} > 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 2bd5c9aa13..8e169c2743 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 @@ -70,7 +70,6 @@ export function SignInWorkerPage() { ) : undefined } - backArrowPath={routerPaths.homePage} title={t('worker.signInForm.title')} > diff --git a/packages/apps/human-app/frontend/src/pages/worker/sign-up.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/sign-up.page.tsx index d6c325561f..65ccd68a77 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/sign-up.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/sign-up.page.tsx @@ -17,7 +17,6 @@ import { Input } from '@/components/data-entry/input'; import { Password } from '@/components/data-entry/password/password'; import { PageCard } from '@/components/ui/page-card'; import { env } from '@/shared/env'; -import { routerPaths } from '@/router/router-paths'; import { defaultErrorMessage } from '@/shared/helpers/default-error-message'; import { Alert } from '@/components/ui/alert'; import { FetchError } from '@/api/fetcher'; @@ -74,7 +73,6 @@ export function SignUpWorkerPage() { ) : undefined } - backArrowPath={routerPaths.homePage} title={t('worker.signUpForm.title')} > @@ -100,8 +98,8 @@ export function SignUpWorkerPage() { Terms - - + + diff --git a/packages/apps/human-app/frontend/src/shared/env.ts b/packages/apps/human-app/frontend/src/shared/env.ts index 73109c2413..6e56a271d9 100644 --- a/packages/apps/human-app/frontend/src/shared/env.ts +++ b/packages/apps/human-app/frontend/src/shared/env.ts @@ -9,6 +9,7 @@ const envSchema = z.object({ VITE_NAVBAR__LINK__PROTOCOL_URL: z.string(), VITE_NAVBAR__LINK__HOW_IT_WORK_URL: z.string(), VITE_HUMAN_PROTOCOL_HELP_URL: z.string(), + VITE_WALLET_CONNECT_MODAL_LINK: z.string(), VITE_H_CAPTCHA_SITE_KEY: z.string(), VITE_HMT_DAILY_SPENT_LIMIT: z .string() diff --git a/packages/apps/human-app/frontend/src/shared/helpers/regex.ts b/packages/apps/human-app/frontend/src/shared/helpers/regex.ts index d27aaa982c..957e76e5eb 100644 --- a/packages/apps/human-app/frontend/src/shared/helpers/regex.ts +++ b/packages/apps/human-app/frontend/src/shared/helpers/regex.ts @@ -1,11 +1,11 @@ export const password8Chars = - /^[A-Za-z0-9$^*.[\]{}()?"!@#%&/\\,><':;|_~`=+\- ]{8,}$/; + /^[A-Za-z0-9$^*.[\]{}()?"!@#%&/\\,><':;|_~`=+-]{8,}$/; export const passwordUppercase = /(?=.*[A-Z])/; export const passwordLowercase = /(?=.*[a-z])/; export const passwordNumeric = /(?=.*[0-9])/; export const passwordSpecialCharacter = - /(?=.*[$^*.[\]{}()?"!@#%&/\\,><':;|_~`=+\- ])/; + /(?=.*[$^*.[\]{}()?"!@#%&/\\,><':;|_~`=+-])/; // this is sum of all above regular expressions export const passwordRegex = - /^(?!\s+)(?!.*\s+$)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[$^*.[\]{}()?"!@#%&/\\,><':;|_~`=+\- ])[A-Za-z0-9$^*.[\]{}()?"!@#%&/\\,><':;|_~`=+\- ]{8,}$/; + /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[$^*.[\]{}()?"!@#%&/\\,><':;|_~`=+-])[A-Za-z0-9$^*.[\]{}()?"!@#%&/\\,><':;|_~`=+-]{8,}$/;