Skip to content

Refactor UI navigation and improve visual consistency with SVGs#1009

Open
normal-coder wants to merge 5 commits intoRightNow-AI:mainfrom
normal-coder:feat-ux-optimize
Open

Refactor UI navigation and improve visual consistency with SVGs#1009
normal-coder wants to merge 5 commits intoRightNow-AI:mainfrom
normal-coder:feat-ux-optimize

Conversation

@normal-coder
Copy link
Copy Markdown

@normal-coder normal-coder commented Apr 7, 2026

Summary

Adjustments have been made to the UI details of the OpenFang Web Console to improve overall UI/UX consistency and product experience:

  1. Optimized sidebar navigation and adjusted UI element sizes

    • Overview is now the first navigation item, which is more in line with the existing modern Web Console usage habits (Chat remains the default entry)
    • The Chat window now has both the function to create a new agent and to start a new conversation, which is more suitable for categorization under the "Agent" section
    • Optimized primary navigation: diamond icon size (8px → 16px), increased font size of some titles (9px → 12px) to improve visibility
  2. To address the visual weakness of text color under the "Dark" mode, CSS theme markers have been introduced to achieve consistent emphasis text contrast

    • Added the CSS variable --text-on-accent (white) for emphasizing text on the background
    • Replaced the hardcoded var(--bg-primary) in components with --text-on-accent
    • Updated the surface, border, and text color markers of the dark theme to improve contrast
    • Adjusted the surface color of the dark mode (#1F1D1C → #242221) to enhance the sense of hierarchy
    • Optimized border and text fade colors to enhance visual hierarchy
  3. Inline SVG has been used to replace HTML entity icons to improve visual consistency

    • In all modal windows and panels, the × close icon has been replaced with an SVG X icon
    • In the settings list, step indicators, and success status, the ✓ checkmark has been replaced with an SVG check icon
    • The • and · separators have been replaced with small SVG dot icons to improve visual consistency
    • Improved icon size, alignment, and stroke properties for clearer rendering
  4. Fixed the issue where the browser refused to load the Logo due to inconsistent definition of icon size between logo.png and manifest.json

Changes

  1. Optimized sidebar navigation and adjusted UI element sizes
  2. To address the visual weakness of text color under the "Dark" mode, CSS theme markers have been introduced to achieve consistent emphasis text contrast
    image
  3. Inline SVG has been used to replace HTML entity icons to improve visual consistency
    image

Testing

  • cargo clippy --workspace --all-targets -- -D warnings passes
  • cargo test --workspace passes
  • Live integration tested (if applicable)

Security

  • No new unsafe code
  • No secrets or API keys in diff
  • User input validated at boundaries

… entry

- Move Overview to first navigation item for better UX
- Consolidate `Chat` into `Agents` section
- Increase chevron and section title font sizes for improved readability
- Adjust section title padding for better visual spacing

Signed-off-by: 诺墨 <normal@normalcoder.com>
…ontrast

- Add `--text-on-accent` CSS variable (white) for text on accent backgrounds
- Replace hardcoded `var(--bg-primary)` with `--text-on-accent` across components
- Update dark theme surface, border, and text color tokens for better contrast
- Adjust dark mode surface colors (`#1F1D1C` → `#242221`) for improved depth
- Refine border and text-muted colors for better visual hierarchy

Signed-off-by: 诺墨 <normal@normalcoder.com>
…wser loading issues.

Signed-off-by: 诺墨 <normal@normalcoder.com>
…nt rendering

- Replace `&times;` close icons with SVG X icons across all modals and panels
- Replace `&#10003;` checkmarks with SVG check icons in setup checklist, step indicators, and success states
- Replace `&bull;` and `&middot;` separators with small SVG dot icons for better visual consistency
- Improve icon sizing, alignment, and stroke properties for crisp rendering

Signed-off-by: 诺墨 <normal@normalcoder.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant