From 110bebc37efbb11ffe801a2c1347d84345e55c24 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Fri, 30 Jul 2021 11:38:31 +0200
Subject: [PATCH 1/2] Fix MaterialUI errors & warnings

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 packages/core-components/src/layout/Content/Content.tsx | 7 ++++++-
 packages/core-components/src/layout/Sidebar/Items.tsx   | 2 +-
 plugins/shortcuts/src/AddShortcut.tsx                   | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/core-components/src/layout/Content/Content.tsx b/packages/core-components/src/layout/Content/Content.tsx
index cb6a841cf3..323565159a 100644
--- a/packages/core-components/src/layout/Content/Content.tsx
+++ b/packages/core-components/src/layout/Content/Content.tsx
@@ -24,7 +24,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     minWidth: 0,
     paddingTop: theme.spacing(3),
     paddingBottom: theme.spacing(3),
-    ...theme.mixins.gutters({}),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+    },
   },
   stretch: {
     display: 'flex',
diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index d675b73a2c..b930c455b5 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -167,7 +167,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
     <Badge
       color="secondary"
       variant="dot"
-      overlap="circle"
+      overlap="circular"
       invisible={!hasNotifications}
     >
       <Icon fontSize="small" />
diff --git a/plugins/shortcuts/src/AddShortcut.tsx b/plugins/shortcuts/src/AddShortcut.tsx
index 4429dbaeb0..87c2750206 100644
--- a/plugins/shortcuts/src/AddShortcut.tsx
+++ b/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',

From 135e6ba84e0662fa77394a1d1a2a2a7f89891724 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Mon, 9 Aug 2021 15:51:56 +0200
Subject: [PATCH 2/2] Adjust colors for Tabs in dark mode

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../core-components/src/layout/HeaderTabs/HeaderTabs.tsx  | 8 +++++++-
 .../core-components/src/layout/TabbedCard/TabbedCard.tsx  | 6 ++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
index 1b300df5a2..20742114c9 100644
--- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
+++ b/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>
diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx
index 41b39984a5..c9f2a477ef 100644
--- a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx
+++ b/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',