fix: Consistent hover styles for tabs & improved dark mode side menu …

…UX (#5133) Co-authored-by: dcode2100 <dikshantsolanki@214@gmail.com>
Flagsmith · Feb 19, 2025 · 145bf1f · 145bf1f
1 parent a81d22e
commit 145bf1f
Showing 1 changed file with 34 additions and 8 deletions.
diff --git a/frontend/web/styles/project/_project-nav.scss b/frontend/web/styles/project/_project-nav.scss
@@ -13,10 +13,16 @@ nav a {
     border-radius: $border-radius;
 
     &:hover {
-      color: $body-color;
       background-color: $primary-alfa-8;
     }
   }
+  &:hover{
+    svg {
+      path {
+        fill: $link-hover-color;
+      }
+    }
+  }
   svg {
     width: 14px;
     height: 14px;
@@ -122,15 +128,22 @@ nav a {
     font-size: $font-size-base;
   }
 }
-  .collapsible-title {
-    line-height: 32px;
-    cursor: pointer;
-    border-radius: $border-radius;
-    &:hover {
-      color: $primary;
-      background-color: $primary-alfa-8;
+.aside-nav a:hover {
+  svg {
+    path {
+      fill: $primary;
     }
   }
+}
+.collapsible-title {
+  line-height: 32px;
+  cursor: pointer;
+  border-radius: $border-radius;
+  &:hover {
+    color: $primary;
+    background-color: $primary-alfa-8;
+  }
+}
   .collapsible.active {
     .collapsible-title {
       pointer-events: none;
@@ -157,4 +170,17 @@ nav a {
       opacity: 0.3;
     }
   }
+  .aside-nav a {
+    &.active {
+      background-color: $primary-alfa-16;
+    }
+  }
+  .aside-nav a:hover {
+    background-color: $primary-alfa-8;
+    svg {
+      path {
+        fill: $body-color-dark;
+      }
+    }
+  }
 }