Files
openhuman/app
Cyrus GrayandGitHub 0472cf2c86 feat(ui): light theme redesign — part 2 (onboarding, nav bar, page layouts) (#309)
* feat(ui): full light theme redesign based on Figma design tokens

Redesign the entire app from dark glass-morphism to a clean light theme
per the Figma reference (OpenHuman-Prod / Ref for mithil). This is a
purely visual change — zero logic, handlers, state, or API changes.

- Update Tailwind color tokens: neutral grayscale, primary #2F6EF4,
  success #34C759, alert #E8A728, error #EF4444
- Switch global CSS from dark (black bg, white text) to light (#F5F5F5
  bg, #171717 text)
- Replace left MiniSidebar with bottom BottomTabBar (Home, Chat, Skills,
  Intelligence, Automation, Notification)
- Add Settings gear icon on Home page header for persistent access
- Restyle Home: white card, Welcome Onboard title, connection badge pill
- Restyle Chat: gray agent bubbles, blue user bubbles, white input with
  mic icon, circular send button, model pill selector
- Restyle Skills: white card, filter tabs, + Add button, skill rows
- Restyle Intelligence: light containers, filters, cards
- Convert all 25+ settings panels from dark to light theme
- Convert all shared components (modals, cards, inputs, status badges)

* fix(test): update ConnectionIndicator tests for pill badge redesign

The component no longer renders a description prop — it's now a compact
pill badge. Remove description-related test cases, add pill badge test.

* fix(ui): address CodeRabbit review — contrast, dead controls, regressions

- Remove unused description prop from ConnectionIndicator interface
- Fix Save Note button hover affordance (MemoryWorkspace)
- Fix low-contrast text in AccessibilityPanel vision summary
- Fix AIPanel metadata text contrast (gray-400 → stone-500)
- Fix ActionPanel spinner visibility on light bg variants
- Fix LocalModelPanel ollama link hover color
- Fix MessagingPanel error chip to light theme tokens
- Fix RecoveryPhrasePanel import inputs from dark to light tokens
- Fix TeamMembersPanel avatar initial contrast + modal name text
- Fix Intelligence refresh button text contrast
- Remove non-functional + Add button and filter tabs from Skills page

* feat(ui): center conversation page in a white card container

Match the Figma design where the chat is inside a centered white card
with rounded corners and shadow, consistent with the Skills page layout.

* feat(ui): wrap all remaining pages in centered white card containers

Apply the centered card layout (max-w-2xl, white bg, rounded-2xl,
shadow-soft) to every page for visual consistency with Figma designs:

- Settings: wrap Routes container in centered card with max-height
- Intelligence: centered card with padding
- Agents: centered card with empty state
- Invites: centered card, replace glass with white cards
- Webhooks: centered cards for tunnel list and activity
- Mnemonic: centered card, replace glass with white card
- Welcome: light bg, updated text colors

* fix(ui): stretch settings menu items to fill card container

Remove max-w-md constraint from SettingsHome scrollable area so menu
items fill the full width of the centered card wrapper.

* fix(ui): convert onboarding screens from dark to light theme

All onboarding steps (Welcome, LocalAI, ScreenPermissions, Analytics,
Tools, Skills, Connect, InviteCode, Mnemonic) and the overlay container
now use white cards with light backgrounds, matching the app redesign.

- Card containers: bg-black → bg-white with border-stone-200
- Info boxes: dark tinted → bg-stone-50 with border-stone-200
- Text: text-white → text-stone-900, secondary to text-stone-600
- Progress dots: inactive bg-stone-700 → bg-stone-300
- Toggle rows, permission badges, inputs all converted to light tokens

* fix(ui): fix onboarding Continue button hover turning green

Replace sage hover styles with proper primary blue hover (bg-primary-600)
on the shared OnboardingNextButton component.

* fix(ui): reapply light theme to Home.tsx after upstream merge overwrite

The merge with upstream (Local AI preset bootstrap PR #304) reverted
Home.tsx to the dark theme. Reapply the Figma-based light redesign while
preserving the new first-run bootstrap logic from upstream.

* fix(ui): light theme cleanup for MemoryWorkspace component

Remaining dark-theme classes from upstream merge — update borders,
text colors, and backgrounds to match light theme.

* feat(ui): match Figma floating pill nav bar exactly

- Floating centered pill shape with rounded-full, white bg, subtle
  border and shadow
- 5 tabs only: Chat, Skills, Intelligence, Automation, Notification
  (removed Home tab per Figma)
- Horizontal icon + label layout (not stacked)
- Active state: bg-stone-100 with bold text
- No dock to bottom edge — floats with padding

* fix(ui): increase nav bar spacing to match Figma exactly

Wider gaps (gap-6), more padding, larger touch targets, and bolder
active state to match the zoomed Figma reference.

* feat(ui): add Home tab back to bottom navigation

* feat(ui): add Settings tab to nav bar, replace Home gear with notification bell

- Add Settings tab as last item in bottom navigation
- Home page top-right icon now shows notification bell linking to
  /settings/messaging instead of gear icon linking to /settings
2026-04-03 13:23:48 -07:00
..
2026-04-03 15:57:59 +00:00
2026-03-29 10:30:18 -07:00
2026-03-29 10:30:18 -07:00
2026-04-03 15:57:59 +00:00
2026-03-29 10:30:18 -07:00
2026-03-29 10:30:18 -07:00
2026-03-29 10:30:18 -07:00

Tauri + React + Typescript

This template should help get you started developing with Tauri, React and Typescript in Vite.