From 9ed46bea58dbb81ceada2a957fd1db653fb21e52 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Wed, 24 Dec 2025 17:53:32 +0100
Subject: Implement new UI styles

---
 .../app/components/layout/NavBar.module.css        | 30 ++++++++++++++++++++--
 src/frontend/app/components/layout/NavBar.tsx      |  4 ++-
 2 files changed, 31 insertions(+), 3 deletions(-)

(limited to 'src/frontend/app/components/layout')

diff --git a/src/frontend/app/components/layout/NavBar.module.css b/src/frontend/app/components/layout/NavBar.module.css
index 19d0a93..32827c6 100644
--- a/src/frontend/app/components/layout/NavBar.module.css
+++ b/src/frontend/app/components/layout/NavBar.module.css
@@ -28,6 +28,16 @@
   color: var(--text-color);
   padding: 0.25rem 0;
   border-radius: 0.5rem;
+  gap: 4px;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 20px;
+  border-radius: 20px;
+  transition: background-color 0.2s ease;
 }
 
 .link svg {
@@ -38,11 +48,27 @@
 }
 
 .link span {
-  font-size: 13px;
+  font-size: 11px;
   line-height: 1;
-  font-family: system-ui;
+  font-family: var(--font-ui);
 }
 
 .active {
   color: var(--button-background-color);
 }
+
+.active .iconWrapper {
+  background-color: color-mix(
+    in oklab,
+    var(--button-background-color) 15%,
+    transparent
+  );
+}
+
+[data-theme="dark"] .active .iconWrapper {
+  background-color: color-mix(
+    in oklab,
+    var(--button-background-color) 20%,
+    transparent
+  );
+}
diff --git a/src/frontend/app/components/layout/NavBar.tsx b/src/frontend/app/components/layout/NavBar.tsx
index 9c42987..58228c7 100644
--- a/src/frontend/app/components/layout/NavBar.tsx
+++ b/src/frontend/app/components/layout/NavBar.tsx
@@ -112,7 +112,9 @@ export default function NavBar({ orientation = "horizontal" }: NavBarProps) {
             title={item.name}
             aria-label={item.name}
           >
-            <Icon size={24} />
+            <div className={styles.iconWrapper}>
+              <Icon size={24} />
+            </div>
             <span>{item.name}</span>
           </Link>
         );
-- 
cgit v1.3