Merge pull request #797 from Stremio/refactor/nav-tab-button-styles

refactor(NavBar): improve navigation buttons contrast
Stremio · Jan 17, 2025 · 1989baa · 1989baa
2 parents 6981680 + b266ae5
commit 1989baa
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/src/components/NavBar/HorizontalNavBar/styles.less b/src/components/NavBar/HorizontalNavBar/styles.less
@@ -69,7 +69,7 @@
         width: 3.5rem;
         height: 3.5rem;
         border-radius: 0.75rem;
-        opacity: 0.4;
+        opacity: 0.6;
 
         .icon {
             flex: none;
@@ -79,7 +79,7 @@
             opacity: 0.6;
         }
 
-        &:hover, &:global(.active) {
+        .active() {
             background-color: var(--overlay-color);
             opacity: 1;
 
@@ -88,6 +88,16 @@
                 opacity: 0.8;
             }
         }
+
+        &:global(.active) {
+            .active();
+        }
+
+        @media (pointer: fine) {
+            &:hover {
+                .active();
+            }
+        }
     }
 }
 

diff --git a/src/components/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/components/NavBar/VerticalNavBar/NavTabButton/styles.less
@@ -18,12 +18,21 @@
             .label {
                 opacity: 0.6;
             }
+
+            &:global(.selected) {
+                .label {
+                    opacity: 1;
+                }
+            }
         }
     }
 
     &:global(.selected) {
         .icon {
             opacity: 1;
+        }
+
+        .icon, .label {
             color: var(--primary-accent-color);
         }
     }
@@ -37,7 +46,7 @@
 
     .icon {
         color: var(--primary-foreground-color);
-        opacity: 0.2;
+        opacity: 0.35;
     }
 
     .label {
@@ -61,12 +70,12 @@
 @media only screen and (max-width: @minimum) {
     .nav-tab-button-container {
         .label {
-            opacity: 0.2;
+            opacity: 0.6;
         }
 
         &:global(.selected) {
             .label {
-                opacity: 0.6;
+                opacity: 1;
             }
         }
     }