Merge pull request #1009 from normal-coder/feat-ux-optimize

Refactor UI navigation and improve visual consistency with SVGs

Author: jaberjaber23

crates/openfang-api/static/css/components.css

@@ -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); }
@@ -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;
@@ -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;
@@ -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 {
@@ -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);
 }
 
@@ -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 ── */
@@ -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; }
@@ -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; }
@@ -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);
 }
 
@@ -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);
 }
@@ -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);

crates/openfang-api/static/css/layout.css

@@ -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;
 }
 
@@ -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);
 }

crates/openfang-api/static/css/theme.css

@@ -50,6 +50,7 @@
   /* Chat-specific */
   --agent-bg: #F5F4F2;
   --user-bg: #FFF3E6;
+  --text-on-accent: #FFFFFF;
 
   /* Layout */
   --sidebar-width: 240px;
@@ -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;