feat: updated horizontal tab styles (#436)

clevercanary · Nov 10, 2023 · 8095d95 · 8095d95
1 parent 9381be5
commit 8095d95
Showing 1 changed file with 33 additions and 24 deletions.
diff --git a/packages/data-explorer-ui/src/theme/common/components.ts b/packages/data-explorer-ui/src/theme/common/components.ts
@@ -1296,32 +1296,8 @@ export const MuiTab = (theme: Theme): Components["MuiTab"] => {
         padding: 12,
         textTransform: "capitalize",
         // eslint-disable-next-line sort-keys -- disabling key order for readability
-        "&:hover": {
-          color: theme.palette.ink.main,
-          overflow: "visible",
-          // eslint-disable-next-line sort-keys -- disabling key order for readability
-          "&:after": {
-            backgroundColor: theme.palette.smoke.dark,
-            borderRadius: "12px 12px 0 0",
-            bottom: -3,
-            content: '""',
-            height: 3,
-            left: 0,
-            position: "absolute",
-            width: "100%",
-          },
-        },
-        // eslint-disable-next-line sort-keys -- disabling key order for readability
         "&.Mui-selected": {
           color: theme.palette.ink.main,
-          // eslint-disable-next-line sort-keys -- disabling key order for readability
-          "&:hover": {
-            overflow: "unset",
-            // eslint-disable-next-line sort-keys -- disabling key order for readability
-            "&:after": {
-              content: "none",
-            },
-          },
         },
         // eslint-disable-next-line sort-keys -- disabling key order for readability
         "& > .MuiTab-iconWrapper": {
@@ -1402,6 +1378,39 @@ export const MuiTabs = (theme: Theme): Components["MuiTabs"] => {
     styleOverrides: {
       flexContainer: {
         gap: 8,
+        // eslint-disable-next-line sort-keys -- disabling key order for readability
+        "&:not(.MuiTabs-flexContainerVertical)": {
+          // eslint-disable-next-line sort-keys -- disabling key order for readability
+          ".MuiTab-root": {
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+              color: theme.palette.ink.main,
+              overflow: "visible",
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:after": {
+                backgroundColor: theme.palette.smoke.dark,
+                borderRadius: "12px 12px 0 0",
+                bottom: -3,
+                content: '""',
+                height: 3,
+                left: 0,
+                position: "absolute",
+                width: "100%",
+              },
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-selected": {
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:hover": {
+                overflow: "unset",
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:after": {
+                  content: "none",
+                },
+              },
+            },
+          },
+        },
       },
       indicator: {
         borderTopLeftRadius: 12,