Implement new UI styles

2 files changed, 31 insertions, 3 deletions

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>
         );