From fe617fc02463e826db37a2e3c42f73da08979580 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Mon, 25 Aug 2025 12:01:08 +0200
Subject: [PATCH] Update admin topmenu bg color and user icon style (#1140)

---
 .../AliasVault.Admin/Main/Layout/TopMenu.razor    |  8 +++++---
 .../AliasVault.Admin/wwwroot/css/tailwind.css     | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/apps/server/AliasVault.Admin/Main/Layout/TopMenu.razor b/apps/server/AliasVault.Admin/Main/Layout/TopMenu.razor
index cfe6794f9..f0de6b9f8 100644
--- a/apps/server/AliasVault.Admin/Main/Layout/TopMenu.razor
+++ b/apps/server/AliasVault.Admin/Main/Layout/TopMenu.razor
@@ -2,7 +2,7 @@
 @implements IDisposable
 
 <header>
-    <nav class="fixed z-30 w-full border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 py-3 px-4 bg-primary-100">
+    <nav class="fixed z-30 w-full border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 py-3 px-4 bg-white">
         <div class="flex justify-between items-center max-w-screen-2xl mx-auto relative">
             <div class="flex justify-start items-center">
                 <a href="@NavigationService.BaseUri" class="flex mr-14 flex-shrink-0">
@@ -47,9 +47,11 @@
                     <div class="tooltip-arrow" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(68.5px, 0px, 0px);"></div>
                 </div>
 
-                <button @onclick="ToggleMenu" type="button" class="flex mx-3 text-sm bg-gray-800 rounded-full md:mr-0 flex-shrink-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" id="userMenuDropdownButton" aria-expanded="false" data-dropdown-toggle="userMenuDropdown">
+                <button @onclick="ToggleMenu" type="button" class="flex mx-3 text-sm rounded-full md:mr-0 flex-shrink-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" id="userMenuDropdownButton" aria-expanded="false" data-dropdown-toggle="userMenuDropdown">
                     <span class="sr-only">Open user menu</span>
-                    <img class="w-8 h-8 rounded-full" src="/img/avatar.webp" alt="user photo">
+                      <div class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+                             <span class="text-primary-600 dark:text-primary-300 text-lg font-medium">A</span>
+                    </div>
                 </button>
 
                 @if (isMenuOpen)
diff --git a/apps/server/AliasVault.Admin/wwwroot/css/tailwind.css b/apps/server/AliasVault.Admin/wwwroot/css/tailwind.css
index 0a9f92d58..9e649aaff 100644
--- a/apps/server/AliasVault.Admin/wwwroot/css/tailwind.css
+++ b/apps/server/AliasVault.Admin/wwwroot/css/tailwind.css
@@ -1340,11 +1340,6 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.bg-gray-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
@@ -2199,6 +2194,11 @@ video {
   background-color: rgb(214 131 56 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-primary-900:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(123 74 30 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-red-600:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -2291,6 +2291,11 @@ video {
   color: rgb(251 203 116 / var(--tw-text-opacity));
 }
 
+.dark\:text-primary-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(248 185 99 / var(--tw-text-opacity));
+}
+
 .dark\:text-primary-500:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(244 149 65 / var(--tw-text-opacity));