Skip to content

Refactor UI navigation and improve visual consistency with SVGs #1009

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaberjaber23 merged 5 commits into from
Apr 10, 2026
Merged

Refactor UI navigation and improve visual consistency with SVGs #1009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ded95f3
refactor(ui): restructure navigation sidebar with Overview as primary…
normal-coder Apr 7, 2026
d3972b2
refactor(ui): introduce CSS theme tokens for consistent accent text c…
normal-coder Apr 7, 2026
ae32af1
fix(manifest): align the `logo.png` with the icon size to resolve bro…
normal-coder Apr 7, 2026
c000392
refactor(ui): replace HTML entity icons with inline SVGs for consiste…
normal-coder Apr 7, 2026
77bef77
Merge branch 'main' into feat-ux-optimize
normal-coder Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions crates/openfang-api/static/css/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-primary {
background: var(--accent);
color: var(--bg-primary);
color: var(--text-on-accent);
box-shadow: var(--shadow-xs), var(--shadow-inset);
}
.btn-primary:hover { background: var(--accent-dim); box-shadow: var(--shadow-sm), var(--shadow-accent); transform: translateY(-1px); }
Expand Down Expand Up @@ -538,7 +538,7 @@ tr:hover td { background: var(--surface2); }
height: 14px;
border-radius: 50%;
background: var(--accent);
color: var(--bg-primary);
color: var(--text-on-accent);
font-size: 9px;
font-weight: 700;
display: flex;
Expand Down Expand Up @@ -864,7 +864,7 @@ mark.search-highlight {
border-radius: 50%;
border: none;
background: var(--accent);
color: var(--bg-primary);
color: var(--text-on-accent);
cursor: pointer;
display: flex;
align-items: center;
Expand Down Expand Up @@ -1994,7 +1994,7 @@ mark.search-highlight {
}

.filter-pill:hover { border-color: var(--accent); color: var(--text); }
.filter-pill.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }
.filter-pill.active { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }

/* ── Difficulty badges ── */
.difficulty-badge {
Expand Down Expand Up @@ -2258,7 +2258,7 @@ mark.search-highlight {
.wizard-progress-step.wiz-active .wizard-progress-circle {
border-color: var(--accent);
background: var(--accent);
color: var(--bg-primary);
color: var(--text-on-accent);
box-shadow: 0 0 0 4px var(--accent-glow);
}

Expand Down Expand Up @@ -2485,7 +2485,7 @@ mark.search-highlight {
/* ── Try-It Mini Chat ── */
.tryit-messages { max-height: 200px; overflow-y: auto; margin: 12px 0; }
.tryit-msg { padding: 6px 10px; border-radius: 6px; margin: 4px 0; font-size: 12px; line-height: 1.5; word-break: break-word; }
.tryit-msg-user { background: var(--accent); color: var(--bg-primary); margin-left: 40px; }
.tryit-msg-user { background: var(--accent); color: var(--text-on-accent); margin-left: 40px; }
.tryit-msg-agent { background: var(--surface2); margin-right: 40px; }

/* ── Suggested Message Chips ── */
Expand All @@ -2503,7 +2503,7 @@ mark.search-highlight {
.channel-steps { display: flex; align-items: center; gap: 0; margin-bottom: 20px; }
.channel-step-item { display: flex; align-items: center; gap: 6px; flex: 1; }
.channel-step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 2px solid var(--border); color: var(--text-dim); flex-shrink: 0; transition: all 0.2s; }
.channel-step-num.active { border-color: var(--accent); background: var(--accent); color: var(--bg-primary); }
.channel-step-num.active { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
.channel-step-num.done { border-color: var(--success); background: var(--success); color: #000; }
.channel-step-label { font-size: 11px; color: var(--text-dim); }
.channel-step-label.active { color: var(--accent); font-weight: 600; }
Expand All @@ -2520,7 +2520,7 @@ mark.search-highlight {
.wizard-category-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.wizard-category-pill { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-dim); transition: all 0.15s; font-family: var(--font-mono); }
.wizard-category-pill:hover { border-color: var(--accent); color: var(--text); }
.wizard-category-pill.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }
.wizard-category-pill.active { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }

/* ── Capability Preview Panel ── */
.capability-preview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-top: 12px; }
Expand Down Expand Up @@ -2626,7 +2626,7 @@ mark.search-highlight {
.personality-pill.active {
border-color: var(--accent);
background: var(--accent);
color: var(--bg-primary);
color: var(--text-on-accent);
box-shadow: 0 0 12px var(--accent-subtle);
}

Expand Down Expand Up @@ -2693,7 +2693,7 @@ mark.search-highlight {
justify-content: space-between;
}
.nav-section-chevron {
font-size: 8px;
font-size: 16px;
transition: transform var(--transition-fast);
color: var(--text-muted);
}
Expand Down Expand Up @@ -2799,7 +2799,7 @@ mark.search-highlight {
.hand-step-item.active .hand-step-num {
border-color: var(--accent);
background: var(--accent);
color: var(--bg-primary);
color: var(--text-on-accent);
}
.hand-step-item.done .hand-step-num {
border-color: var(--success);
Expand Down
6 changes: 3 additions & 3 deletions crates/openfang-api/static/css/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,11 +120,11 @@
}

.nav-section-title {
font-size: 9px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-muted);
padding: 12px 12px 4px;
padding: 12px 12px 6px 3px;
font-weight: 600;
}

Expand Down Expand Up @@ -154,7 +154,7 @@

.nav-item.active {
background: var(--accent);
color: var(--bg-primary);
color: var(--text-on-accent);
font-weight: 600;
box-shadow: var(--shadow-sm), 0 2px 8px rgba(255, 92, 0, 0.2);
}
Expand Down
20 changes: 11 additions & 9 deletions crates/openfang-api/static/css/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
/* Chat-specific */
--agent-bg: #F5F4F2;
--user-bg: #FFF3E6;
--text-on-accent: #FFFFFF;

/* Layout */
--sidebar-width: 240px;
Expand Down Expand Up @@ -91,16 +92,17 @@
--bg: #080706;
--bg-primary: #0F0E0E;
--bg-elevated: #161413;
--surface: #1F1D1C;
--surface2: #2A2725;
--surface: #242221;
--surface2: #2F2D2C;
--surface3: #1A1817;
--border: #2D2A28;
--border-light: #3D3A38;
--border-subtle: #232120;
--text: #F0EFEE;
--text-secondary: #C4C0BC;
--text-dim: #8A8380;
--text-muted: #5C5754;
--border: #363230;
--border-light: #4A4644;
--border-subtle: #2D2A28;
--text: #FFFFFF;
--text-secondary: #D1D1D1;
--text-dim: #9FA0A0;
--text-muted: #6B6663;
--text-on-accent: #FFFFFF;
--accent: #FF5C00;
--accent-light: #FF7A2E;
--accent-dim: #E05200;
Expand Down
Loading