Adjust colors for Tabs in dark mode

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
2021-08-09 15:51:56 +02:00
parent 1c83fb643d
commit 135e6ba84e
2 changed files with 13 additions and 1 deletions
@@ -36,6 +36,12 @@ const useStyles = makeStyles(theme => ({
  selected: {
    color: theme.palette.text.primary,
  },
+  tabRoot: {
+    '&:hover': {
+      backgroundColor: theme.palette.background.default,
+      color: theme.palette.text.primary,
+    },
+  },
 }));

 export type Tab = {
@@ -89,7 +95,7 @@ export const HeaderTabs = ({
            key={tab.id}
            value={index}
            className={styles.defaultTab}
-            classes={{ selected: styles.selected }}
+            classes={{ selected: styles.selected, root: styles.tabRoot }}
          />
        ))}
      </Tabs>
@@ -98,6 +98,7 @@ const TabbedCard = ({
      <ErrorBoundary {...errProps}>
        {title && <BoldHeader title={title} />}
        <Tabs
+          selectionFollowsFocus
          classes={tabsClasses}
          value={value || selectedIndex}
          onChange={handleChange}
@@ -119,6 +120,11 @@ const useCardTabStyles = makeStyles(theme => ({
    margin: theme.spacing(0, 2, 0, 0),
    padding: theme.spacing(0.5, 0, 0.5, 0),
    textTransform: 'none',
+    '&:hover': {
+      opacity: 1,
+      backgroundColor: 'transparent',
+      color: theme.palette.text.primary,
+    },
  },
  selected: {
    fontWeight: 'bold',