Implement new UI styles

1 files changed, 28 insertions, 2 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
+  );
+}