From ca4c63d5ae5e1eb85fb3856dc8089fdccaa0181c Mon Sep 17 00:00:00 2001 From: Amir Pournasserian Date: Wed, 11 Mar 2026 17:40:58 -0400 Subject: [PATCH 01/13] Use CSS variables and redesign agent pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace hard-coded colors, sizes and radii with CSS custom properties across layout and nav styles to enable theming and easier customization. Rework NavMenu to use category color variables and simplify prompting category markup. Revamp multiple Agent pages (Agent01–Agent09, Agent11–Agent23, etc.) with a consistent page header, two-column config/result layout, streaming indicators, clearer panels (config, result, log, thread), improved buttons and accessibility cues. Add a local image asset (wwwroot/image.jpg) and a UI design system draft (plans/ui-design-system.md). Minor readme update included. These changes improve visual consistency, theming, and UX for the AgentsWebUI. --- .../Components/Layout/MainLayout.razor.css | 12 +- .../Components/Layout/NavMenu.razor | 28 +- .../Components/Layout/NavMenu.razor.css | 25 +- .../Components/Pages/Agent01.razor | 84 +- .../Components/Pages/Agent02.razor | 131 +- .../Components/Pages/Agent03.razor | 96 +- .../Components/Pages/Agent04.razor | 99 +- .../Components/Pages/Agent05.razor | 79 +- .../Components/Pages/Agent06.razor | 114 +- .../Components/Pages/Agent07.razor | 117 +- .../Components/Pages/Agent08.razor | 96 +- .../Components/Pages/Agent09.razor | 100 +- .../Components/Pages/Agent10.razor | 99 +- .../Components/Pages/Agent11.razor | 98 +- .../Components/Pages/Agent12.razor | 89 +- .../Components/Pages/Agent13.razor | 86 +- .../Components/Pages/Agent14.razor | 100 +- .../Components/Pages/Agent15.razor | 98 +- .../Components/Pages/Agent16.razor | 93 +- .../Components/Pages/Agent17.razor | 120 +- .../Components/Pages/Agent18.razor | 158 +- .../Components/Pages/Agent19.razor | 158 +- .../Components/Pages/Agent20.razor | 120 +- .../Components/Pages/Agent21.razor | 119 +- .../Components/Pages/Agent22.razor | 134 +- .../Components/Pages/Agent23.razor | 139 +- .../AgentsWebUI/Components/Pages/Error.razor | 49 +- .../AgentsWebUI/Components/Pages/Home.razor | 65 +- .../Components/Pages/Home.razor.css | 72 - .../Components/Pages/NotFound.razor | 17 +- 0-Agents/AgentsWebUI/wwwroot/app.css | 1275 ++++++++++++++++- 0-Agents/AgentsWebUI/wwwroot/image.jpg | Bin 0 -> 780359 bytes plans/ui-design-system.md | 640 +++++++++ readme.md | 205 ++- 34 files changed, 3892 insertions(+), 1023 deletions(-) delete mode 100644 0-Agents/AgentsWebUI/Components/Pages/Home.razor.css create mode 100644 0-Agents/AgentsWebUI/wwwroot/image.jpg create mode 100644 plans/ui-design-system.md diff --git a/0-Agents/AgentsWebUI/Components/Layout/MainLayout.razor.css b/0-Agents/AgentsWebUI/Components/Layout/MainLayout.razor.css index 38d1f25..9a23588 100644 --- a/0-Agents/AgentsWebUI/Components/Layout/MainLayout.razor.css +++ b/0-Agents/AgentsWebUI/Components/Layout/MainLayout.razor.css @@ -9,21 +9,21 @@ main { } .sidebar { - background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); + background-image: linear-gradient(180deg, var(--color-sidebar-start, #052767) 0%, var(--color-sidebar-end, #3a0647) 70%); } .top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; + background-color: var(--color-surface-alt, #f7f7f7); + border-bottom: 1px solid var(--color-border, #d6d5d5); justify-content: flex-end; - height: 3.5rem; + height: var(--toprow-height, 3.5rem); display: flex; align-items: center; } .top-row ::deep a, .top-row ::deep .btn-link { white-space: nowrap; - margin-left: 1.5rem; + margin-left: var(--space-6, 1.5rem); text-decoration: none; } @@ -52,7 +52,7 @@ main { } .sidebar { - width: 250px; + width: var(--sidebar-width, 250px); height: 100vh; position: sticky; top: 0; diff --git a/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor b/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor index 750cb0b..6551ce4 100644 --- a/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor +++ b/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor @@ -20,7 +20,7 @@ @* πŸš€ Basics *@