fix icon ui

src/App.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import SortDropdown from "./components/SortDropdown.vue";
-import { browserIconOptions, browserIconSrc } from "./features/browser-assistant/icons";
+import {
+  browserIconOptions,
+  browserIconSrc,
+  configurationIconSrc,
+} from "./features/browser-assistant/icons";
 import { useBrowserAssistant } from "./features/browser-assistant/useBrowserAssistant";
 
 const {
@@ -87,7 +91,9 @@ const {
         type="button"
         @click="page = 'configuration'"
       >
-        <div class="browser-nav-icon config-nav-icon">CF</div>
+        <div class="browser-nav-icon config-nav-icon">
+          <img :src="configurationIconSrc" alt="Configuration icon" />
+        </div>
         <div class="browser-nav-body">
           <strong>Configuration</strong>
           <span>Manage custom scan sources and paths</span>

src/features/browser-assistant/icons.ts

@@ -1,6 +1,7 @@
 import braveIcon from "../../assets/brave.png";
 import chromeIcon from "../../assets/google-chrome.png";
 import edgeIcon from "../../assets/microsoft-edge.png";
+import settingsIcon from "../../assets/settings.png";
 
 export const browserIconOptions = [
   { key: "chrome", label: "Google Chrome", src: chromeIcon },
@@ -11,3 +12,5 @@ export const browserIconOptions = [
 export function browserIconSrc(iconKey: string | null | undefined) {
   return browserIconOptions.find((option) => option.key === iconKey)?.src ?? null;
 }
+
+export const configurationIconSrc = settingsIcon;

src/styles.css

@@ -214,47 +214,27 @@ button {
 .browser-nav-icon {
   width: 42px;
   height: 42px;
-  border-radius: 13px;
+  border-radius: 0;
   color: #fff;
   font-weight: 700;
   font-size: 0.86rem;
   letter-spacing: 0.08em;
-  background: linear-gradient(135deg, #10213f, #365f9f);
+  background: transparent;
+  overflow: visible;
 }
 
 .browser-nav-icon img,
 .config-icon img {
-  width: 100%;
+  display: block;
-  height: 100%;
+  width: auto;
-  object-fit: cover;
+  height: auto;
-}
+  max-width: 38px;
-
+  max-height: 38px;
-.browser-nav-item.chrome .browser-nav-icon {
+  object-fit: contain;
-  --accent: var(--chrome);
-}
-
-.browser-nav-item.edge .browser-nav-icon {
-  --accent: var(--edge);
-}
-
-.browser-nav-item.brave .browser-nav-icon {
-  --accent: var(--brave);
-}
-
-.browser-nav-item.chrome .browser-nav-icon {
-  background: linear-gradient(135deg, #2563eb, #22c55e);
-}
-
-.browser-nav-item.edge .browser-nav-icon {
-  background: linear-gradient(135deg, #0f766e, #38bdf8);
-}
-
-.browser-nav-item.brave .browser-nav-icon {
-  background: linear-gradient(135deg, #c2410c, #fb923c);
 }
 
 .config-nav-icon {
-  background: linear-gradient(135deg, #334155, #64748b);
+  background: transparent;
 }
 
 .sidebar-utility-nav {
@@ -482,8 +462,9 @@ button {
 .config-icon {
   width: 36px;
   height: 36px;
-  border-radius: 11px;
+  border-radius: 0;
   font-size: 0.8rem;
+  overflow: visible;
 }
 
 .config-meta {