5-11 - #4770
Conversation
Replace generic one-api visual identity with a clean, professional look inspired by OpenRouter/Vercel. Changes include: - System font stack replacing Lato - Unified 8px border-radius (was 10px) - Remove blur ball and pastel ball decorations - Neutralize sidebar hover/selected colors (gray instead of blue) - Remove shine-text animation (static accent color) - Homepage: compact hero, smaller heading, muted subtitle, icon opacity - Dashboard: white cards with borders (no colored backgrounds) - Dashboard header: neutral gray buttons (no green/blue) - Header: add bottom border, adjust dark background - Auth pages: clean background, rounded-lg buttons, bordered cards - All changes are CSS/className only, no functional changes
- Add full-page warm pastel gradient background (pink/lavender/blue/peach) - Override Semi Design primary color to orange-brown (#c06030) - Make sidebar transparent with orange active state - Make header transparent (no border, no backdrop) - Add semi-transparent glassmorphism to all cards - Make all layout components transparent to show gradient - Update border-radius to 12px globally - Auth pages: transparent background, shadow cards, rounded buttons - Homepage: restore hero height, rounded buttons - Dark mode: deep blue gradient background
WalkthroughThis PR implements a comprehensive visual theme rebrand toward the right.codes palette, replacing gray backgrounds with transparency, updating button corner rounding from fully rounded to moderately rounded, and introducing orange-brown accent colors across authentication, dashboard, and home page components. No functional changes or API modifications are included. ChangesRight.codes Theme Rebrand
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
web/src/components/dashboard/DashboardHeader.jsx (1)
32-32: ⚡ Quick winConsider importing the shared constant instead of duplicating.
The
ICON_BUTTON_CLASSconstant is defined both here and inweb/src/constants/dashboard.constants.js. Importing from the constants file would eliminate duplication and ensure consistency.♻️ Proposed refactor
import React from 'react'; import { Button } from '@douyinfe/semi-ui'; import { RefreshCw, Search } from 'lucide-react'; +import { ICON_BUTTON_CLASS } from '../../constants/dashboard.constants'; const DashboardHeader = ({ getGreeting, greetingVisible, showSearchModal, refresh, loading, t, }) => { - const ICON_BUTTON_CLASS = 'text-semi-color-text-1 hover:bg-semi-color-fill-1 !rounded-lg'; return (🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/src/components/dashboard/DashboardHeader.jsx` at line 32, Replace the duplicated ICON_BUTTON_CLASS in DashboardHeader.jsx with the shared constant from dashboard.constants.js: remove the local const ICON_BUTTON_CLASS and add a named import for ICON_BUTTON_CLASS from the module that exports it, then use that imported symbol wherever the local constant was used (e.g., className for icon buttons) to ensure a single source of truth.web/src/index.css (1)
776-847: ⚡ Quick winConsider removing unused blur-ball styles.
Since
.blur-balland.with-pastel-balls::beforeare set todisplay: noneand the corresponding markup has been removed from the JSX files, the remaining style definitions (lines 781-806, 809-847) are now dead code.🧹 Cleanup suggestion
You can safely remove the entire blur-ball section (lines 776-847) to reduce CSS bundle size and improve maintainability.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/src/index.css` around lines 776 - 847, Remove the unused blur-ball CSS block: delete the rules for .blur-ball, .blur-ball-indigo, .blur-ball-teal and the related .with-pastel-balls::before rules (including the html:not(.dark) and html.dark overrides for these selectors) since the JSX no longer renders blur-ball elements; keep the remaining .with-pastel-balls variables/parent rules (e.g., .with-pastel-balls and html.dark .with-pastel-balls) if you still use the pastel-ball feature, otherwise remove that as well—verify no markup references .blur-ball or ::before before committing.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/src/components/layout/Footer.jsx`:
- Around line 202-204: Replace the incomplete "New" label in Footer.jsx with the
full project identifier (e.g., "New API" or the actual organization name)
wherever it appears; locate the span elements with class
'!text-semi-color-text-1 font-medium' (used around lines showing "New") and
update their inner text to the complete name so both occurrences (the standalone
label and the "设计与开发由 New" phrase) read correctly and consistently.
In `@web/src/index.css`:
- Around line 36-37: The font-family declaration contains an unnecessary quoted
font name; update the font-family rule (the font-family: -apple-system,
BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, Oxygen, Ubuntu, 'Microsoft
YaHei', sans-serif;) by removing the quotes around Inter so it reads ...Segoe
UI, Inter, Roboto... ensuring only names with spaces or special characters
remain quoted (e.g., 'Segoe UI' and 'Microsoft YaHei').
---
Nitpick comments:
In `@web/src/components/dashboard/DashboardHeader.jsx`:
- Line 32: Replace the duplicated ICON_BUTTON_CLASS in DashboardHeader.jsx with
the shared constant from dashboard.constants.js: remove the local const
ICON_BUTTON_CLASS and add a named import for ICON_BUTTON_CLASS from the module
that exports it, then use that imported symbol wherever the local constant was
used (e.g., className for icon buttons) to ensure a single source of truth.
In `@web/src/index.css`:
- Around line 776-847: Remove the unused blur-ball CSS block: delete the rules
for .blur-ball, .blur-ball-indigo, .blur-ball-teal and the related
.with-pastel-balls::before rules (including the html:not(.dark) and html.dark
overrides for these selectors) since the JSX no longer renders blur-ball
elements; keep the remaining .with-pastel-balls variables/parent rules (e.g.,
.with-pastel-balls and html.dark .with-pastel-balls) if you still use the
pastel-ball feature, otherwise remove that as well—verify no markup references
.blur-ball or ::before before committing.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9467ec82-4399-41a1-8450-f70a8958431a
⛔ Files ignored due to path filters (2)
web/public/logo-c.pngis excluded by!**/*.pngweb/public/logo.pngis excluded by!**/*.png
📒 Files selected for processing (9)
web/src/components/auth/LoginForm.jsxweb/src/components/auth/RegisterForm.jsxweb/src/components/dashboard/DashboardHeader.jsxweb/src/components/dashboard/StatsCards.jsxweb/src/components/layout/Footer.jsxweb/src/components/layout/headerbar/index.jsxweb/src/constants/dashboard.constants.jsweb/src/index.cssweb/src/pages/Home/index.jsx
| <span className='!text-semi-color-text-1 font-medium'> | ||
| New | ||
| </span> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check for other references to the GitHub repository for attribution/source availability
# Search for GitHub URLs to the project repository
rg -n --type=js --type=jsx --type=ts --type=tsx -C2 'github\.com/QuantumNous/new-api'
# Also check for any other footer or attribution links
rg -n --type=js --type=jsx --type=ts --type=tsx -C2 'GitHub|Source Code|Repository' -g '**/Footer*' -g '**/About*'Repository: QuantumNous/new-api
Length of output: 119
🏁 Script executed:
# Search for GitHub repository links without specifying jsx type
rg -n 'github\.com/QuantumNous/new-api' --type jsRepository: QuantumNous/new-api
Length of output: 511
🏁 Script executed:
# Also search more broadly for the GitHub link
rg -n 'github.com/QuantumNous'Repository: QuantumNous/new-api
Length of output: 50376
🏁 Script executed:
# Examine the specific lines in Footer.jsx
sed -n '195,210p' web/src/components/layout/Footer.jsxRepository: QuantumNous/new-api
Length of output: 477
🏁 Script executed:
# Also check around line 229-231
sed -n '220,240p' web/src/components/layout/Footer.jsxRepository: QuantumNous/new-api
Length of output: 754
🌐 Web query:
AGPL-3.0 license attribution requirements source code availability
💡 Result:
AGPL-3.0 attribution requirements (what you must keep/show) 1) Keep license/copyright/warranty notices intact, and provide the license text - When conveying copies, you must “keep intact all notices” and ensure the work “carry prominent notices stating that it is released under this License and any conditions added under section 7” (i.e., you can’t strip out the AGPL notices). [1][2] 2) If you modify and convey: mark that you modified + the relevant date - For conveying modified source versions under section 5, you must include prominent notices stating that you modified the work and giving a relevant date. [1][2] 3) If the program has interactive user interfaces: show “Appropriate Legal Notices” - AGPL-3.0 requires “Appropriate Legal Notices” when the program has interactive user interfaces. [3] AGPL-3.0 source-code availability requirements (the “Corresponding Source” obligation) A) If you convey/distribute object code (distributed software) - When conveying object code, you must provide the “Corresponding Source” (including the scripts and source needed to generate/install the object code) under the AGPL’s conveying terms. [4][5] B) If you run a modified AGPL program over a network (SaaS/web app use) - Unlike GPL, AGPL section 13 adds a network-interaction requirement: if you modify the Program and users interact with it remotely over a computer network, you must “prominently offer” those users an opportunity to receive the Corresponding Source “by providing access … from a network server at no charge.” [1][2][5] - The license gives an example approach: a web app interface could display a “Source” link to an archive of the code. [1][2] Bottom line - “Attribution” under AGPL-3.0 is primarily about preserving required prominent legal/copyright/license notices, and adding “modified” notices + date when you convey modified versions. [1][2] - “Source code availability” under AGPL-3.0 is primarily about providing “Corresponding Source”: via the conveying rules when distributing, and via a network-offer mechanism when running modified versions for remote users (SaaS). [4][5]
Citations:
- 1: https://opensource.org/license/AGPL-v3
- 2: https://www.gnu.org/licenses/agpl-3.0-standalone.html
- 3: https://www.gnu.org/licenses/agpl-3.0
- 4: http://www.gnu.org/licenses/agpl-3.0.txt
- 5: https://www.gnu.org/licenses/agpl-3.0.html
Incomplete text: "New" should be "New API" or similar.
The text "设计与开发由 New" (Designed and developed by New) is grammatically incomplete and unclear. "New" alone is not a recognizable entity name—it should likely be "New API" or the actual project/organization name. This affects both line ranges (202-204 and 229-231).
Update the span text to reflect the complete project identifier.
Also applies to: 229-231
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/src/components/layout/Footer.jsx` around lines 202 - 204, Replace the
incomplete "New" label in Footer.jsx with the full project identifier (e.g.,
"New API" or the actual organization name) wherever it appears; locate the span
elements with class '!text-semi-color-text-1 font-medium' (used around lines
showing "New") and update their inner text to the complete name so both
occurrences (the standalone label and the "设计与开发由 New" phrase) read correctly
and consistently.
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, | ||
| Oxygen, Ubuntu, 'Microsoft YaHei', sans-serif; |
There was a problem hiding this comment.
Remove unnecessary quotes around font name.
The font family name 'Inter' doesn't require quotes. Per CSS best practices and the stylelint hint, only font names containing spaces or special characters need quotes.
✨ Proposed fix
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto,
- Oxygen, Ubuntu, 'Microsoft YaHei', sans-serif;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto,
+ Oxygen, Ubuntu, 'Microsoft YaHei', sans-serif;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, | |
| Oxygen, Ubuntu, 'Microsoft YaHei', sans-serif; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, | |
| Oxygen, Ubuntu, 'Microsoft YaHei', sans-serif; |
🧰 Tools
🪛 Stylelint (17.10.0)
[error] 36-36: Expected no quotes around "Inter" (font-family-name-quotes)
(font-family-name-quotes)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/src/index.css` around lines 36 - 37, The font-family declaration contains
an unnecessary quoted font name; update the font-family rule (the font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, Oxygen, Ubuntu,
'Microsoft YaHei', sans-serif;) by removing the quotes around Inter so it reads
...Segoe UI, Inter, Roboto... ensuring only names with spaces or special
characters remain quoted (e.g., 'Segoe UI' and 'Microsoft YaHei').
2 participants
Important
📝 变更描述 / Description
(简述：做了什么？为什么这样改能生效？请基于你对代码逻辑的理解来写，避免粘贴未经整理的内容)
🚀 变更类型 / Type of change
🔗 关联任务 / Related Issue
✅ 提交前检查项 / Checklist
Bug fix，我已提交或关联对应 Issue，且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。📸 运行证明 / Proof of Work
(请在此粘贴截图、关键日志或测试报告，以证明变更生效)
Summary by CodeRabbit