[Human App Frontend] App Redesign - #3980
Draft
KirillKirill wants to merge 10 commits into
Draft
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
4 Skipped Deployments
|
There was a problem hiding this comment.
Pull request overview
This PR implements a significant HUMAN App frontend redesign, primarily updating theming/styling, reworking the unauth/protected layouts and navigation, and introducing a new post-sign-in verification UX (KYC + wallet) for workers. It also removes several older homepage/operator sign-in flows and cleans up unused components/exports.
Changes:
- Updated design system foundations (palette, dark palette, typography variants) and MUI component theme overrides, including an
accentbutton color. - Reworked unprotected/protected layout UI (navbar/footer/page-card) and refreshed several auth-related screens (sign up, sign in, email verification, reset password).
- Introduced a new worker verification flow (KYC + wallet) and refactored IDV start behavior to open in a new tab.
Reviewed changes
Copilot reviewed 89 out of 115 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/apps/human-app/frontend/src/shared/styles/typography.ts | Removes unused typography variants and simplifies responsive typography config. |
| packages/apps/human-app/frontend/src/shared/styles/theme.ts | Adds accent button color override and updates MUI component style overrides. |
| packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts | Keeps dark theme typography mapping aligned with removed variants. |
| packages/apps/human-app/frontend/src/shared/styles/dark-color-palette.ts | Extends dark palette with auxiliary/background/accent/border tokens. |
| packages/apps/human-app/frontend/src/shared/styles/color-palette.ts | Extends light palette with auxiliary/background/accent/border tokens. |
| packages/apps/human-app/frontend/src/shared/providers/notifications-provider.tsx | Adds warning icon handling and tweaks provider props typing. |
| packages/apps/human-app/frontend/src/shared/i18n/en.json | Updates copy for navbar/auth/verification/worker profile flows. |
| packages/apps/human-app/frontend/src/shared/hooks/use-notification.tsx | Adds ERROR notification type and centralizes type→color mapping. |
| packages/apps/human-app/frontend/src/shared/hooks/use-handle-main-nav-icon-click.tsx | Removes homepage-state dependency from nav icon click handling. |
| packages/apps/human-app/frontend/src/shared/contexts/homepage-state/use-homepage-state.tsx | Removes homepage state hook. |
| packages/apps/human-app/frontend/src/shared/contexts/homepage-state/index.ts | Removes homepage-state barrel exports. |
| packages/apps/human-app/frontend/src/shared/contexts/homepage-state/homepage-state.tsx | Removes homepage-state provider/context implementation. |
| packages/apps/human-app/frontend/src/shared/contexts/color-mode/color-mode-settings.ts | Simplifies isDarkColorMode() implementation. |
| packages/apps/human-app/frontend/src/shared/components/ui/success-label.tsx | Removes old success label component. |
| packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card.tsx | Refactors PageCard UI and extracts back button. |
| packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card-loader.tsx | Adjusts loader sizing responsively. |
| packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card-error.tsx | Updates error card layout and adds accent button usage. |
| packages/apps/human-app/frontend/src/shared/components/ui/page-card/back-button.tsx | Introduces reusable back button component for redesigned pages. |
| packages/apps/human-app/frontend/src/shared/components/ui/loader.tsx | Switches loader color to accent. |
| packages/apps/human-app/frontend/src/shared/components/ui/icons.tsx | Removes legacy homepage icons; adds new SVG-based icons (Inbox/Success/Veriff/Hourglass). |
| packages/apps/human-app/frontend/src/shared/components/ui/dark-mode-switch.tsx | Replaces switch with segmented ColorModeSwitch control. |
| packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx | Prevents chip shrinking in flex layouts. |
| packages/apps/human-app/frontend/src/shared/components/ui/alert.tsx | Consolidates MUI imports and keeps alert icon usage. |
| packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha.tsx | Sets HCaptcha theme to contrast and removes color-mode dependency. |
| packages/apps/human-app/frontend/src/shared/components/data-entry/slider.tsx | Removes unused Slider form component. |
| packages/apps/human-app/frontend/src/shared/components/data-entry/password/index.tsx | Simplifies imports and updates visibility icon coloring. |
| packages/apps/human-app/frontend/src/shared/components/data-entry/input.tsx | Minor cleanup (!!error) and adjusts autofill styling. |
| packages/apps/human-app/frontend/src/router/hooks/use-is-main-page.ts | Adds hook to determine if current route is the homepage. |
| packages/apps/human-app/frontend/src/router/components/layout/unprotected/use-mobile-layout-background.ts | Adds per-route mobile background image selection. |
| packages/apps/human-app/frontend/src/router/components/layout/unprotected/navbar.tsx | Redesigns unprotected navbar and replaces menu drawer with inline links + color mode switch. |
| packages/apps/human-app/frontend/src/router/components/layout/unprotected/layout.tsx | Redesigns unprotected layout sizing/padding and removes homepage-state/mobile branching. |
| packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx | Updates protected navbar logo button and spacing. |
| packages/apps/human-app/frontend/src/router/components/layout/protected/drawer-navigation.tsx | Minor handler simplification and typing cleanup. |
| packages/apps/human-app/frontend/src/router/components/footer.tsx | Redesigns footer layout/styling and simplifies mobile/desktop branching. |
| packages/apps/human-app/frontend/src/router/components/drawer-menu-items/drawer-menu-items-worker.tsx | Swaps in ColorModeSwitch for worker drawer. |
| packages/apps/human-app/frontend/src/router/components/drawer-menu-items/drawer-menu-items-operator.tsx | Swaps in ColorModeSwitch for operator drawer. |
| packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link.page.tsx | Adjusts PageCard navigation prop usage. |
| packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password.page.tsx | Updates Password import path and PageCard navigation props. |
| packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password-success.page.tsx | Removes obsolete PageCard cancel button usage. |
| packages/apps/human-app/frontend/src/modules/worker/profile/views/profile.page.tsx | Removes embedded verification/wallet controls from profile page layout. |
| packages/apps/human-app/frontend/src/modules/worker/profile/hooks/use-worker-profile-status.tsx | Switches to useAuth() and makes user access null-safe. |
| packages/apps/human-app/frontend/src/modules/worker/profile/hooks/use-start-idv.ts | Opens IDV in a new tab and exposes idvStarted state. |
| packages/apps/human-app/frontend/src/modules/worker/profile/hooks/use-start-idv-mutation.ts | Switches to useAuth() and makes mutation key null-safe. |
| packages/apps/human-app/frontend/src/modules/worker/profile/components/wallet-connection-control.tsx | Redesigns wallet connection UI and removes KYC gating from this component. |
| packages/apps/human-app/frontend/src/modules/worker/profile/components/wallet-connect-done.tsx | Removes old “wallet connected” display component. |
| packages/apps/human-app/frontend/src/modules/worker/profile/components/index.ts | Stops exporting removed wallet connected component. |
| packages/apps/human-app/frontend/src/modules/worker/profile/components/identity-verification-control.tsx | Replaces status-chip UI with redesigned Veriff-driven flow + “check status” cooldown. |
| packages/apps/human-app/frontend/src/modules/worker/profile/components/custom-text-field.tsx | Removes old custom text field styles. |
| packages/apps/human-app/frontend/src/modules/worker/profile/components/buttons/start-idv-btn.tsx | Removes old start IDV button component. |
| packages/apps/human-app/frontend/src/modules/worker/profile/components/buttons/register-address-btn.tsx | Updates register address button to use accent styling. |
| packages/apps/human-app/frontend/src/modules/worker/profile/components/buttons/index.ts | Removes old buttons barrel exports. |
| packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/jobs-discovery.page.tsx | Removes KYC redirect and updates layout styling. |
| packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/hooks/index.ts | Removes unused hooks barrel export. |
| packages/apps/human-app/frontend/src/modules/worker/hooks/use-register-address.ts | Switches to useAuth() and makes mutation key null-safe. |
| packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/hcaptcha-labeling.page.tsx | Removes KYC redirect and consolidates MUI imports. |
| packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/components/index.ts | Removes unused barrel exports for labeling components. |
| packages/apps/human-app/frontend/src/modules/worker/email-verification/pages/index.ts | Removes email-verification pages barrel exports. |
| packages/apps/human-app/frontend/src/modules/worker/email-verification/components/resend-verification-email-form.tsx | Redesigns verify-email UI (new inbox icon, new copy, cancel action). |
| packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-success-message.tsx | Redesigns verified screen using new success icon and paper layout. |
| packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-process.tsx | Minor typing cleanup. |
| packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-form-container.tsx | Replaces PageCard wrapper with Paper and updates notification severity. |
| packages/apps/human-app/frontend/src/modules/smart-contracts/EthKVStore/eth-kv-store-get-kyc-data.ts | Removes on-chain KYC data retrieval helper. |
| packages/apps/human-app/frontend/src/modules/signup/worker/views/sign-up-worker.page.tsx | Redesigns sign-up page layout and moves errors to top notifications. |
| packages/apps/human-app/frontend/src/modules/signup/operator/views/edit-existing-keys-success.page.tsx | Removes obsolete PageCard cancel button usage. |
| packages/apps/human-app/frontend/src/modules/signin/worker/verification-flow.tsx | Adds new post-sign-in verification stepper (KYC + wallet). |
| packages/apps/human-app/frontend/src/modules/signin/worker/use-sign-in.tsx | Exposes isSuccess from sign-in hook. |
| packages/apps/human-app/frontend/src/modules/signin/worker/use-sign-in-mutation.ts | Refactors sign-in to delegate token handling to useAuth.signIn. |
| packages/apps/human-app/frontend/src/modules/signin/worker/sign-in.page.tsx | Redesigns sign-in page and adds conditional verification flow on success. |
| packages/apps/human-app/frontend/src/modules/signin/worker/sign-in-form.tsx | Updates sign-in form styling/copy and adds sign-up link section. |
| packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx | Simplifies homepage rendering and redirects only fully verified workers. |
| packages/apps/human-app/frontend/src/modules/homepage/services/homepage.service.ts | Removes web3 sign-in service for homepage. |
| packages/apps/human-app/frontend/src/modules/homepage/hooks/use-web3-signin.ts | Removes web3 sign-in hook. |
| packages/apps/human-app/frontend/src/modules/homepage/hooks/index.ts | Removes homepage hooks barrel exports. |
| packages/apps/human-app/frontend/src/modules/homepage/components/worker-sign-up.tsx | Removes old worker sign-up panel component. |
| packages/apps/human-app/frontend/src/modules/homepage/components/worker-sign-in.tsx | Removes old worker sign-in button component. |
| packages/apps/human-app/frontend/src/modules/homepage/components/welcome.tsx | Minor layout tweak for welcome section alignment/padding. |
| packages/apps/human-app/frontend/src/modules/homepage/components/sign-in-section.tsx | Replaces multi-option sign-in section with simple sign up / sign in buttons. |
| packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-up.tsx | Removes operator sign-up panel component. |
| packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-in.tsx | Removes operator sign-in component. |
| packages/apps/human-app/frontend/src/modules/homepage/components/logo-section.tsx | Removes legacy homepage icon strip logic. |
| packages/apps/human-app/frontend/src/modules/homepage/components/index.ts | Removes homepage components barrel export. |
| packages/apps/human-app/frontend/src/modules/homepage/components/home-container.tsx | Removes homepage container/state-driven view switching. |
| packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx | Removes account-type chooser page-card flow. |
| packages/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx | Removes KYC gating from governance banner rendering. |
| packages/apps/human-app/frontend/src/modules/auth/hooks/index.ts | Removes auth hooks barrel exports. |
| packages/apps/human-app/frontend/src/main.tsx | Removes homepage state provider and React Query devtools. |
| packages/apps/human-app/frontend/src/assets/icons/veriff.svg | Adds light Veriff logo asset. |
| packages/apps/human-app/frontend/src/assets/icons/sun.svg | Updates light-mode sun icon asset. |
| packages/apps/human-app/frontend/src/assets/icons/moon.svg | Updates light-mode moon icon asset. |
| packages/apps/human-app/frontend/src/assets/icons/icons-navbar/human-logo-navbar.svg | Updates navbar logo asset (new sizing/branding). |
| packages/apps/human-app/frontend/src/assets/icons/icons-homepage/work.svg | Removes legacy homepage “work” icon asset. |
| packages/apps/human-app/frontend/src/assets/icons/icons-homepage/user.svg | Removes legacy homepage “user” icon asset. |
| packages/apps/human-app/frontend/src/assets/icons/icons-homepage/logo.svg | Removes legacy homepage “logo” icon asset. |
| packages/apps/human-app/frontend/src/assets/icons/icons-homepage/discord.svg | Removes legacy homepage discord icon asset. |
| packages/apps/human-app/frontend/src/assets/icons/hourglass.svg | Adds light hourglass icon asset. |
| packages/apps/human-app/frontend/src/assets/icons/chat.svg | Removes chat icon asset. |
| packages/apps/human-app/frontend/src/assets/icons-dark-mode/veriff.svg | Adds dark-mode Veriff logo asset. |
| packages/apps/human-app/frontend/src/assets/icons-dark-mode/sun.svg | Updates dark-mode sun icon asset. |
| packages/apps/human-app/frontend/src/assets/icons-dark-mode/moon.svg | Updates dark-mode moon icon asset. |
| packages/apps/human-app/frontend/src/assets/icons-dark-mode/icons-navbar/human-logo-navbar.svg | Updates dark-mode navbar logo asset. |
| packages/apps/human-app/frontend/src/assets/icons-dark-mode/icons-homepage/work.svg | Removes legacy dark homepage “work” icon asset. |
| packages/apps/human-app/frontend/src/assets/icons-dark-mode/icons-homepage/user.svg | Removes legacy dark homepage “user” icon asset. |
| packages/apps/human-app/frontend/src/assets/icons-dark-mode/icons-homepage/logo.svg | Removes legacy dark homepage “logo” icon asset. |
| packages/apps/human-app/frontend/src/assets/icons-dark-mode/hourglass.svg | Adds dark hourglass icon asset. |
| packages/apps/human-app/frontend/src/api/hooks/use-access-token-refresh.ts | Exposes isRefreshingAccessToken flag from refresh mutation. |
| packages/apps/human-app/frontend/src/api/auth-service.ts | Changes signIn to return tokens instead of directly persisting them. |
| packages/apps/human-app/frontend/package.json | Removes unused dependencies/devDependencies (devtools, SDKs, lint extras). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
KirillKirill
force-pushed
the
kb/app-redesign
branch
from
July 22, 2026 16:28
d143ecc to
1f22dbd
Compare
KirillKirill
force-pushed
the
kb/app-redesign
branch
from
July 27, 2026 14:26
3f36287 to
627a111
Compare
KirillKirill
force-pushed
the
kb/app-redesign
branch
from
July 31, 2026 07:54
f2e76c0 to
e099d73
Compare
dnechay
reviewed
Aug 3, 2026
| }; | ||
| }, [proposal]); | ||
|
|
||
| if (!isVerificationCompleted || isLoading || isError || !proposal) { |
Collaborator
There was a problem hiding this comment.
Note: removing this might cause issues for operator UI (ref) so we either need to double-check it or get rid of operator UI as a cleanup step (to be added to todo list in PR description
| ); | ||
|
|
||
| const { colorPalette } = useColorMode(); | ||
| const { status } = useWorkerIdentityVerificationStatus(); |
Collaborator
There was a problem hiding this comment.
Maybe use user.kyc_status as in other places and remove useWorkerIdentityVerificationStatus that is used only here now?
| }; | ||
| `; | ||
|
|
||
| const CHECK_STATUS_COOLDOWN_TIME = 10000; |
Collaborator
There was a problem hiding this comment.
Let's add a todo to extend it to 30 seconds
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue tracking
Context behind the change
How has this been tested?
Release plan
Potential risks; What to monitor; Rollback plan