add hover effect for drawer workspace items

3 files changed, 8 insertions, 0 deletions

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index cb7ffc1cf..1c0ede8e5 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -69,6 +69,7 @@ export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex
 export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter;
 export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke;
 export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex();
+export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex();
 export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary;
 export const workspaceDrawerItemNameColor = colorText;
 export const workspaceDrawerItemNameActiveColor = 'white';
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index f2632ee20..718ccf485 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -149,6 +149,7 @@ export const workspaceDrawerPadding = 20;
 export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex();
 export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight;
 export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex();
+export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex();
 export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest;
 export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex();
 export const workspaceDrawerItemNameColor = colorText;
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 1e28ebea6..17a7882b8 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -20,9 +20,15 @@ const styles = theme => ({
     '&:first-child': {
       borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`,
     },
+    '&:hover': {
+      backgroundColor: theme.workspaceDrawerItemHoverBackground,
+    },
   },
   isActiveItem: {
     backgroundColor: theme.workspaceDrawerItemActiveBackground,
+    '&:hover': {
+      backgroundColor: theme.workspaceDrawerItemActiveBackground,
+    },
   },
   name: {
     marginTop: '4px',