Merge pull request #6761 from tudi2d/dark-mode-improvements

Dark mode improvements of Tabbed Card & Layout

packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx

@@ -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>

packages/core-components/src/layout/TabbedCard/TabbedCard.tsx

@@ -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',

plugins/shortcuts/src/AddShortcut.tsx

@@ -86,7 +86,7 @@ export const AddShortcut = ({ onClose, anchorEl, api }: Props) => {
     <Popover
       open={open}
       anchorEl={anchorEl}
-      onExit={handleClose}
+      TransitionProps={{ onExit: handleClose }}
       onClose={onClose}
       anchorOrigin={{
         vertical: 'top',