From 9f0d4f640219d85c87caf42f1ac3cb9b0ce66892 Mon Sep 17 00:00:00 2001 From: Marco Minerva Date: Tue, 28 Jul 2026 12:56:21 +0200 Subject: [PATCH] Refine icons, colors, and UI feedback for clarity Update icon choices and colors across the Blazor app for improved visual clarity and consistency. Use explicit InteractiveServerRenderMode in App.razor. Replace sidebar, header, and navigation icons with filled or colorized variants in MainLayout.razor. Update Ask.razor and Documents.razor with more descriptive icons. Enhance reconnect modal messaging and button visibility. Adjust app.css for individual sidebar icon colors and brand icon styling. Remove EFCore.SqlServer.VectorSearch from the home page feature list to focus on Agent Framework. These changes improve UI feedback, accessibility, and maintainability. --- SqlDatabaseVectorSearch/Components/App.razor | 4 ++-- .../Components/Layout/MainLayout.razor | 8 ++++---- .../Components/Layout/ReconnectModal.razor | 10 +++++----- .../Components/Pages/Ask.razor | 4 ++-- .../Components/Pages/Documents.razor | 8 ++++---- .../Components/Pages/Home.razor | 2 +- SqlDatabaseVectorSearch/wwwroot/css/app.css | 15 ++++++++++++++- 7 files changed, 32 insertions(+), 19 deletions(-) diff --git a/SqlDatabaseVectorSearch/Components/App.razor b/SqlDatabaseVectorSearch/Components/App.razor index 389a89c..1b22215 100644 --- a/SqlDatabaseVectorSearch/Components/App.razor +++ b/SqlDatabaseVectorSearch/Components/App.razor @@ -14,11 +14,11 @@ - + - + diff --git a/SqlDatabaseVectorSearch/Components/Layout/MainLayout.razor b/SqlDatabaseVectorSearch/Components/Layout/MainLayout.razor index 14c0325..3806144 100644 --- a/SqlDatabaseVectorSearch/Components/Layout/MainLayout.razor +++ b/SqlDatabaseVectorSearch/Components/Layout/MainLayout.razor @@ -5,10 +5,10 @@ - + - + @@ -44,8 +44,8 @@ { navItems = [ new() { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match = NavLinkMatch.All}, - new() { Id = "2", Href= "/documents", IconName = IconName.FileText, Text = "Documents" }, - new() { Id = "3", Href = "/ask", IconName = IconName.ChatDots, Text = "Ask"} + new() { Id = "2", Href= "/documents", IconName = IconName.FileEarmarkTextFill, Text = "Documents" }, + new() { Id = "3", Href = "/ask", IconName = IconName.ChatDotsFill, Text = "Ask"} ]; return navItems; diff --git a/SqlDatabaseVectorSearch/Components/Layout/ReconnectModal.razor b/SqlDatabaseVectorSearch/Components/Layout/ReconnectModal.razor index a55bcc1..e740b0c 100644 --- a/SqlDatabaseVectorSearch/Components/Layout/ReconnectModal.razor +++ b/SqlDatabaseVectorSearch/Components/Layout/ReconnectModal.razor @@ -10,7 +10,7 @@ Rejoining the server...

- Rejoin failed... Trying again in seconds. + Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page. @@ -21,11 +21,11 @@

The session has been paused by the server.

- -

- Failed to resume the session.
Please reload the page. -

diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor index b8f7091..d5cad35 100644 --- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor +++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor @@ -65,7 +65,7 @@
- +
@@ -99,7 +99,7 @@
- + diff --git a/SqlDatabaseVectorSearch/Components/Pages/Documents.razor b/SqlDatabaseVectorSearch/Components/Pages/Documents.razor index 165064a..8498767 100644 --- a/SqlDatabaseVectorSearch/Components/Pages/Documents.razor +++ b/SqlDatabaseVectorSearch/Components/Pages/Documents.razor @@ -9,7 +9,7 @@ Documents

- + Upload new document

@@ -21,7 +21,7 @@
- + @@ -31,7 +31,7 @@
- + Document ID @@ -56,7 +56,7 @@ else {

- + Available documents

diff --git a/SqlDatabaseVectorSearch/Components/Pages/Home.razor b/SqlDatabaseVectorSearch/Components/Pages/Home.razor index 8ce2e55..6e2d27e 100644 --- a/SqlDatabaseVectorSearch/Components/Pages/Home.razor +++ b/SqlDatabaseVectorSearch/Components/Pages/Home.razor @@ -17,7 +17,7 @@
  • Perform semantic search and RAG using Azure OpenAI agents
  • Interact via a Blazor Web App or programmatically via Minimal API
    • - Document import, question reformulation, and RAG are orchestrated with Microsoft Agent Framework. Vectors are managed with EFCore.SqlServer.VectorSearch. + Document import, question reformulation, and RAG are orchestrated with Microsoft Agent Framework.

    Supported Features

    diff --git a/SqlDatabaseVectorSearch/wwwroot/css/app.css b/SqlDatabaseVectorSearch/wwwroot/css/app.css index 3c0b751..c3037cb 100644 --- a/SqlDatabaseVectorSearch/wwwroot/css/app.css +++ b/SqlDatabaseVectorSearch/wwwroot/css/app.css @@ -11,7 +11,7 @@ body, html { --bb-sidebar2-top-row-background-color: rgba(0,0,0,0.08); --bb-sidebar2-top-row-border-color: rgb(194,192,192); --bb-sidebar2-title-text-color: rgb(0,0,0); - --bb-sidebar2-brand-icon-color: rgb(0,0,0); + --bb-sidebar2-brand-icon-color: #0d6efd; --bb-sidebar2-brand-image-width: 24px; --bb-sidebar2-brand-image-height: 24px; --bb-sidebar2-title-badge-text-color: rgb(255,255,255); @@ -37,6 +37,19 @@ body, html { color: rgba(0,0,0,0.9) !important; } +/* The nav item icons inherit the black link color, so they are colored individually. */ +.bb-sidebar2 nav .nav-item a .bi-house-door-fill { + color: #0d6efd; +} + +.bb-sidebar2 nav .nav-item a .bi-file-earmark-text-fill { + color: #0dcaf0; +} + +.bb-sidebar2 nav .nav-item a .bi-chat-dots-fill { + color: #198754; +} + h1:focus { outline: none; }