Merge pull request #2375 from daostack/cw-2350-tabs-layout-click-issue

Clicking on items in mobile navigation bar (Inbox, Spaces and Profile) sometimes not being clicked #2350
daostack · Dec 5, 2023 · 0cf1236 · 0cf1236
2 parents 7e4d419 + 1e0b34a
commit 0cf1236
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/src/index.scss b/src/index.scss
@@ -204,15 +204,6 @@ body {
   }
 }
 
-/* Disable hover effects globally when using a touch device */
-@media (hover: none) {
-  * {
-    :hover {
-      opacity: unset !important;
-    }
-  }
-}
-
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;

diff --git a/src/shared/components/Tabs/Tab/index.scss b/src/shared/components/Tabs/Tab/index.scss
@@ -24,16 +24,14 @@
   border-bottom: 0.25rem solid var(--tab-bb-color);
   cursor: pointer;
   transition: color 0.2s, border-bottom-color 0.2s;
+  user-select: none;
+  -webkit-user-select: none;
 
   &:active {
     --tab-bb-color: var(--tab-inactive-hover-color);
     --tab-color: var(--tab-inactive-hover-color);
   }
 
-  &:hover {
-    --tab-color: var(--tab-inactive-hover-color);
-  }
-
   &:first-child {
     --tab-ml: 0;
   }
@@ -48,8 +46,7 @@
   --tab-bb-color: var(--secondary-text);
   --tab-color: var(--secondary-text);
 
-  &:active,
-  &:hover {
+  &:active {
     --tab-bb-color: var(--secondary-text);
     --tab-color: var(--secondary-text);
   }
@@ -62,3 +59,18 @@
   align-items: center;
   border: 0;
 }
+
+@media (hover: hover) and (pointer: fine) {
+  .custom-tab {
+    &:hover {
+      --tab-color: var(--tab-inactive-hover-color);
+    }
+  }
+
+  .custom-tab--active {
+    &:hover {
+      --tab-bb-color: var(--secondary-text);
+      --tab-color: var(--secondary-text);
+    }
+  }
+}