From 2986f503e4b952a128eb10b36c487f27e77d17ff Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Tue, 10 Aug 2021 17:23:50 +0200
Subject: [PATCH] Minor adjustments to Sidebar UX

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../core-components/src/layout/Sidebar/Bar.tsx   | 11 ++++-------
 .../core-components/src/layout/Sidebar/Items.tsx | 16 +++++++++-------
 .../core-components/src/layout/Sidebar/config.ts |  2 +-
 packages/theme/src/themes.ts                     |  2 ++
 packages/theme/src/types.ts                      |  1 +
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx
index 65da4d2d75..05bb751cc8 100644
--- a/packages/core-components/src/layout/Sidebar/Bar.tsx
+++ b/packages/core-components/src/layout/Sidebar/Bar.tsx
@@ -42,6 +42,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     msOverflowStyle: 'none',
     scrollbarWidth: 'none',
     width: sidebarConfig.drawerWidthClosed,
+    borderRight: `1px solid ${theme.palette.navigation.divider}`,
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.shortest,
@@ -60,14 +61,11 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
       duration: theme.transitions.duration.shorter,
     }),
   },
-  drawerPeek: {
-    width: sidebarConfig.drawerWidthClosed + 4,
-  },
 }));
 
 enum State {
   Closed,
-  Peek,
+  Idle,
   Open,
 }
 
@@ -103,7 +101,7 @@ export const Sidebar = ({
         setState(State.Open);
       }, openDelayMs);
 
-      setState(State.Peek);
+      setState(State.Idle);
     }
   };
 
@@ -115,7 +113,7 @@ export const Sidebar = ({
       clearTimeout(hoverTimerRef.current);
       hoverTimerRef.current = undefined;
     }
-    if (state === State.Peek) {
+    if (state === State.Idle) {
       setState(State.Closed);
     } else if (state === State.Open) {
       hoverTimerRef.current = window.setTimeout(() => {
@@ -143,7 +141,6 @@ export const Sidebar = ({
       >
         <div
           className={clsx(classes.drawer, {
-            [classes.drawerPeek]: state === State.Peek,
             [classes.drawerOpen]: isOpen,
           })}
         >
diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index 1068a877bd..00771c837b 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -344,13 +344,15 @@ export const SidebarSpacer = styled('div')({
   height: 8,
 });
 
-export const SidebarDivider = styled('hr')({
-  height: 1,
-  width: '100%',
-  background: '#383838',
-  border: 'none',
-  margin: '12px 0px',
-});
+export const SidebarDivider = styled('hr')(
+  ({ theme }: { theme: BackstageTheme }) => ({
+    height: 1,
+    width: '100%',
+    background: theme.palette.navigation.divider,
+    border: 'none',
+    margin: '12px 0px',
+  }),
+);
 
 const styledScrollbar = (theme: Theme): CreateCSSProperties => ({
   overflowY: 'auto',
diff --git a/packages/core-components/src/layout/Sidebar/config.ts b/packages/core-components/src/layout/Sidebar/config.ts
index 3d574d03bb..d2a690e38f 100644
--- a/packages/core-components/src/layout/Sidebar/config.ts
+++ b/packages/core-components/src/layout/Sidebar/config.ts
@@ -25,7 +25,7 @@ export const sidebarConfig = {
   drawerWidthOpen: 224,
   // As per NN/g's guidance on timing for exposing hidden content
   // See https://www.nngroup.com/articles/timing-exposing-content/
-  defaultOpenDelayMs: 300,
+  defaultOpenDelayMs: 100,
   defaultCloseDelayMs: 0,
   defaultFadeDuration: 200,
   logoHeight: 32,
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index b31786aae9..03a8fad2a2 100644
--- a/packages/theme/src/themes.ts
+++ b/packages/theme/src/themes.ts
@@ -66,6 +66,7 @@ export const lightTheme = createTheme({
       background: '#171717',
       indicator: '#9BF0E1',
       color: '#b5b5b5',
+      divider: '#383838',
       selectedColor: '#FFF',
     },
     pinSidebarButton: {
@@ -132,6 +133,7 @@ export const darkTheme = createTheme({
       background: '#424242',
       indicator: '#9BF0E1',
       color: '#b5b5b5',
+      divider: '#383838',
       selectedColor: '#FFF',
     },
     pinSidebarButton: {
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index c2758c29e7..2c4d198a4f 100644
--- a/packages/theme/src/types.ts
+++ b/packages/theme/src/types.ts
@@ -47,6 +47,7 @@ type PaletteAdditions = {
     background: string;
     indicator: string;
     color: string;
+    divider: string;
     selectedColor: string;
   };
   tabbar: {