[PR #5262] [MERGED] Refactor onboarding welcome screen to v2 design #5379

Closed
opened 2026-06-05 15:21:10 -04:00 by yindo · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/Mintplex-Labs/anything-llm/pull/5262
Author: @angelplusultra
Created: 3/24/2026
Status: Merged
Merged: 3/25/2026
Merged by: @timothycarambat

Base: masterHead: refactor-v2-onboarding-welcome-screen


📝 Commits (10+)

  • 6ebff0e refactor onboarding home page to v2 design
  • d70b1ed fixc typography and buttons
  • c7bb99e refactor useTheme to return isLight variable | call useTheme from inside SVG component | apply light mode background gradient | polish styles to match designs
  • c2d7191 add welcome i18n
  • 4ca95ba simplify isLight variable
  • a2fbfe1 add new welcome translation key to locales
  • 1969ccb Merge branch 'master' into refactor-v2-onboarding-welcome-screen
  • 62a9c8d delete unused images
  • b8a8ef5 move OnboardingLogoSVG into module | compute isLight directly in component
  • 8831ca6 Merge branch 'refactor-v2-onboarding-welcome-screen' of github.com:Mintplex-Labs/anything-llm into refactor-v2-onboarding-welcome-screen

📊 Changes

31 files changed (+163 additions, -50 deletions)

View changed files

📝 frontend/src/hooks/useTheme.js (+20 -3)
📝 frontend/src/locales/ar/common.js (+1 -0)
📝 frontend/src/locales/cs/common.js (+1 -0)
📝 frontend/src/locales/da/common.js (+1 -0)
📝 frontend/src/locales/de/common.js (+1 -0)
📝 frontend/src/locales/en/common.js (+1 -0)
📝 frontend/src/locales/es/common.js (+1 -0)
📝 frontend/src/locales/et/common.js (+1 -0)
📝 frontend/src/locales/fa/common.js (+1 -0)
📝 frontend/src/locales/fr/common.js (+1 -0)
📝 frontend/src/locales/he/common.js (+1 -0)
📝 frontend/src/locales/it/common.js (+1 -0)
📝 frontend/src/locales/ja/common.js (+1 -0)
📝 frontend/src/locales/ko/common.js (+1 -0)
📝 frontend/src/locales/lt/common.js (+1 -0)
📝 frontend/src/locales/lv/common.js (+1 -0)
📝 frontend/src/locales/nl/common.js (+1 -0)
📝 frontend/src/locales/pl/common.js (+1 -0)
📝 frontend/src/locales/pt_BR/common.js (+1 -0)
📝 frontend/src/locales/ro/common.js (+1 -0)

...and 11 more files

📄 Description

Pull Request Type

  • feat (New feature)
  • 🐛 fix (Bug fix)
  • ♻️ refactor (Code refactoring without changing behavior)
  • 💄 style (UI style changes)
  • 🔨 chore (Build, CI, maintenance)
  • 📝 docs (Documentation updates)

Relevant Issues

resolves #

Description

Refactors the onboarding welcome screen to match the v2 design from Figma:

  • Replaced the old corner-positioned PNG images (l_group.png, r_group.png) with a single centered inline SVG of the AnythingLLM logo, with theme-aware gradient fills and inner shadow filter
  • Added radial background gradients for both dark and light modes (light blue wash for light mode, blue-gray for dark mode)
  • Updated typography: "Welcome" as the hero text at 160px with tight letter-spacing, "AnythingLLM" as a subtle header
  • Updated button to match design specs (36px height, 14px medium font, 300px wide)
  • Updated light mode colors from zinc to slate palette (bg-slate-50, text-slate-600, text-slate-700) to match Figma tokens
  • Added isLight derived value to useTheme hook (simplified to use resolvedTheme)
  • Added onboarding.home.welcome i18n key

Visuals (if applicable)

image image

Additional Information

Developer Validations

  • I ran yarn lint from the root of the repo & committed changes
  • Relevant documentation has been updated (if applicable)
  • I have tested my code functionality
  • Docker build succeeds locally

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/Mintplex-Labs/anything-llm/pull/5262 **Author:** [@angelplusultra](https://github.com/angelplusultra) **Created:** 3/24/2026 **Status:** ✅ Merged **Merged:** 3/25/2026 **Merged by:** [@timothycarambat](https://github.com/timothycarambat) **Base:** `master` ← **Head:** `refactor-v2-onboarding-welcome-screen` --- ### 📝 Commits (10+) - [`6ebff0e`](https://github.com/Mintplex-Labs/anything-llm/commit/6ebff0efd1e9e85568c2123de79661ae55b07e5a) refactor onboarding home page to v2 design - [`d70b1ed`](https://github.com/Mintplex-Labs/anything-llm/commit/d70b1ed4470320520cdb50513c6a9db3dba665ba) fixc typography and buttons - [`c7bb99e`](https://github.com/Mintplex-Labs/anything-llm/commit/c7bb99ebd97a23e8b6bcc8c13a81ddf740e9f995) refactor useTheme to return isLight variable | call useTheme from inside SVG component | apply light mode background gradient | polish styles to match designs - [`c2d7191`](https://github.com/Mintplex-Labs/anything-llm/commit/c2d719158273f28e2e1b45257cbbe461b851ef51) add welcome i18n - [`4ca95ba`](https://github.com/Mintplex-Labs/anything-llm/commit/4ca95bab449ab4d9746ef2ee7b2cb235fa3c37af) simplify isLight variable - [`a2fbfe1`](https://github.com/Mintplex-Labs/anything-llm/commit/a2fbfe1a3a71e0a52d7ef7547e48984dfd4dee19) add new welcome translation key to locales - [`1969ccb`](https://github.com/Mintplex-Labs/anything-llm/commit/1969ccb836ac45f89e9819843ab39247d94bc3b4) Merge branch 'master' into refactor-v2-onboarding-welcome-screen - [`62a9c8d`](https://github.com/Mintplex-Labs/anything-llm/commit/62a9c8d450a36439dc3b4dd1fdd7c1da00b157e3) delete unused images - [`b8a8ef5`](https://github.com/Mintplex-Labs/anything-llm/commit/b8a8ef53cac906b1b9e06c4f835d64c304b4e29a) move OnboardingLogoSVG into module | compute isLight directly in component - [`8831ca6`](https://github.com/Mintplex-Labs/anything-llm/commit/8831ca65bb0d1437c5cccd6d72585cf9be693c28) Merge branch 'refactor-v2-onboarding-welcome-screen' of github.com:Mintplex-Labs/anything-llm into refactor-v2-onboarding-welcome-screen ### 📊 Changes **31 files changed** (+163 additions, -50 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/hooks/useTheme.js` (+20 -3) 📝 `frontend/src/locales/ar/common.js` (+1 -0) 📝 `frontend/src/locales/cs/common.js` (+1 -0) 📝 `frontend/src/locales/da/common.js` (+1 -0) 📝 `frontend/src/locales/de/common.js` (+1 -0) 📝 `frontend/src/locales/en/common.js` (+1 -0) 📝 `frontend/src/locales/es/common.js` (+1 -0) 📝 `frontend/src/locales/et/common.js` (+1 -0) 📝 `frontend/src/locales/fa/common.js` (+1 -0) 📝 `frontend/src/locales/fr/common.js` (+1 -0) 📝 `frontend/src/locales/he/common.js` (+1 -0) 📝 `frontend/src/locales/it/common.js` (+1 -0) 📝 `frontend/src/locales/ja/common.js` (+1 -0) 📝 `frontend/src/locales/ko/common.js` (+1 -0) 📝 `frontend/src/locales/lt/common.js` (+1 -0) 📝 `frontend/src/locales/lv/common.js` (+1 -0) 📝 `frontend/src/locales/nl/common.js` (+1 -0) 📝 `frontend/src/locales/pl/common.js` (+1 -0) 📝 `frontend/src/locales/pt_BR/common.js` (+1 -0) 📝 `frontend/src/locales/ro/common.js` (+1 -0) _...and 11 more files_ </details> ### 📄 Description ### Pull Request Type <!-- For change type, change [ ] to [x]. --> - [ ] ✨ feat (New feature) - [ ] 🐛 fix (Bug fix) - [x] ♻️ refactor (Code refactoring without changing behavior) - [x] 💄 style (UI style changes) - [ ] 🔨 chore (Build, CI, maintenance) - [ ] 📝 docs (Documentation updates) ### Relevant Issues <!-- Use "resolves #xxx" to auto resolve on merge. Otherwise, please use "connect #xxx" --> resolves # ### Description Refactors the onboarding welcome screen to match the v2 design from Figma: - Replaced the old corner-positioned PNG images (`l_group.png`, `r_group.png`) with a single centered inline SVG of the AnythingLLM logo, with theme-aware gradient fills and inner shadow filter - Added radial background gradients for both dark and light modes (light blue wash for light mode, blue-gray for dark mode) - Updated typography: "Welcome" as the hero text at 160px with tight letter-spacing, "AnythingLLM" as a subtle header - Updated button to match design specs (36px height, 14px medium font, 300px wide) - Updated light mode colors from zinc to slate palette (`bg-slate-50`, `text-slate-600`, `text-slate-700`) to match Figma tokens - Added `isLight` derived value to `useTheme` hook (simplified to use `resolvedTheme`) - Added `onboarding.home.welcome` i18n key ### Visuals (if applicable) <!-- Add screenshots or screen recordings to demonstrate the changes, especially for UI updates. --> <img width="1822" height="1186" alt="image" src="https://github.com/user-attachments/assets/bc09cd45-c1fa-4702-a21a-1d946835f579" /> <img width="1822" height="1186" alt="image" src="https://github.com/user-attachments/assets/e74f1523-b9f0-4641-a456-e18b86bfeace" /> ### Additional Information ### Developer Validations <!-- All of the applicable items should be checked. --> - [x] I ran `yarn lint` from the root of the repo & committed changes - [x] Relevant documentation has been updated (if applicable) - [x] I have tested my code functionality - [x] Docker build succeeds locally --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-06-05 15:21:10 -04:00
yindo closed this issue 2026-06-05 15:21:10 -04:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Mintplex-Labs/anything-llm#5379