5 files changed, 66 insertions, 33 deletions

diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
index 039ef7711..3bd6a6575 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.js
@@ -1,18 +1,10 @@
+import color from 'color';
 import { reaction } from 'mobx';
 import themeInfo from '../../assets/themeInfo.json';
 import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config';
 
 const STYLE_ELEMENT_ID = 'custom-appearance-style';
 
-// Additional styles needed to make accent colors work properly
-// "[ACCENT]" will be replaced with the accent color
-const ACCENT_ADDITIONAL_STYLES = `
-.franz-form__button {
-  background: inherit !important;
-  border: 2px solid [ACCENT] !important;
-}
-`;
-
 function createStyleElement() {
   const styles = document.createElement('style');
   styles.id = STYLE_ELEMENT_ID;
@@ -26,18 +18,53 @@ function setAppearance(style) {
   styleElement.innerHTML = style;
 }
 
-function generateAccentStyle(color) {
+function generateAccentStyle(accentColorStr) {
   let style = '';
 
   Object.keys(themeInfo).forEach((property) => {
     style += `
       ${themeInfo[property]} {
-        ${property}: ${color};
+        ${property}: ${accentColorStr};
       }
     `;
   });
 
-  style += ACCENT_ADDITIONAL_STYLES.replace(/\[ACCENT\]/g, color);
+  let accentColor = color(DEFAULT_APP_SETTINGS.accentColor);
+  try {
+    accentColor = color(accentColorStr);
+  } catch (e) {
+    // Ignore invalid accent color.
+  }
+  const darkerColorStr = accentColor.darken(0.05).hex();
+  style += `
+    a.button:hover, button.button:hover {
+      background: ${accentColor.darken(0.1).hex()};
+    }
+
+    .franz-form__button:hover,
+    .franz-form__button.franz-form__button--inverted:hover,
+    .settings .settings__close:hover,
+    .theme__dark .franz-form__button:hover,
+    .theme__dark .franz-form__button.franz-form__button--inverted:hover,
+    .theme__dark .settings .settings__close:hover {
+      background: ${darkerColorStr};
+    }
+
+    .franz-form__button:active,
+    .theme__dark .franz-form__button:active {
+      background: ${darkerColorStr};
+    }
+
+    .theme__dark .franz-form__button.franz-form__button--inverted,
+    .franz-form__button.franz-form__button--inverted {
+      background: none;
+      border-color: ${accentColorStr};
+    }
+
+    .tab-item.is-active {
+      background: ${accentColor.lighten(0.35).hex()};
+    }
+  `;
 
   return style;
 }
@@ -60,7 +87,7 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
     }
   ` : `
     .sidebar {
-      width: ${width - 1}px !important;
+      width: ${width - 2}px !important;
     }
     .tab-item {
       width: ${width - 2}px !important;
@@ -102,22 +129,27 @@ function generateVerticalStyle(widthStr, alwaysShowWorkspaces) {
     document.head.appendChild(link);
   }
   const width = Number(widthStr);
+  const sidebarWidthStr = `${width - 4}px`;
 
   return `
-  .app_service {
-    top: ${width}px !important;
+  .sidebar {
+    height: ${sidebarWidthStr} !important;
+  ${alwaysShowWorkspaces ? `
+    width: calc(100% - 300px) !important;
+  ` : ''}
   }
-  .darwin .sidebar {
-    height: ${width + 19}px !important;
+
+  .sidebar .sidebar__button {
+    width: ${width}px;
   }
-  .darwin .sidebar .sidebar__button--workspaces.is-active {
-      height: ${width - 20}px !important;
+
+  .app .app__content {
+    padding-top: ${sidebarWidthStr} !important;
   }
-  ${alwaysShowWorkspaces ? `
-  .sidebar {
-    width: calc(100% - 300px) !important;
+
+  .workspaces-drawer {
+    maring-top: -${sidebarWidthStr} !important;
   }
-  ` : ''}
   `;
 }
 
@@ -145,7 +177,7 @@ function generateStyle(settings) {
     alwaysShowWorkspaces,
   } = settings;
 
-  if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) {
+  if (accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase()) {
     style += generateAccentStyle(accentColor);
   }
   if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index cc2775178..58479e7ef 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -44,7 +44,8 @@ const styles = theme => ({
   services: {
     width: '100%',
     maxHeight: '50vh',
-    overflow: 'scroll',
+    overflowX: 'hidden',
+    overflowY: 'auto',
   },
   service: {
     background: theme.styleTypes.primary.contrast,
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 90575ebac..18a900e8a 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -235,10 +235,10 @@ class TodosWebview extends Component {
       isTodoUrlValid = validURL(todoUrl);
     }
 
-    let displayedWidth = isVisible ? width : 0;
-    if (isTodosServiceActive) {
-      displayedWidth = null;
-    }
+    const todosPanelStyle = {
+      width: isVisible ? width : 0,
+      borderLeftWidth: isVisible ? '1px' : 0,
+    };
 
     return (
       <div
@@ -246,7 +246,7 @@ class TodosWebview extends Component {
           [classes.root]: true,
           [classes.isTodosServiceActive]: isTodosServiceActive,
         })}
-        style={{ width: displayedWidth }}
+        style={todosPanelStyle}
         onMouseUp={() => this.stopResize()}
         ref={(node) => { this.node = node; }}
         id="todos-panel"
diff --git a/src/features/todos/index.js b/src/features/todos/index.js
index 8ff06f190..ebd2c60ef 100644
--- a/src/features/todos/index.js
+++ b/src/features/todos/index.js
@@ -10,7 +10,7 @@ export const TODOS_MIN_WIDTH = 200;
 export const DEFAULT_TODOS_VISIBLE = true;
 export const DEFAULT_IS_FEATURE_ENABLED_BY_USER = true;
 export const TODOS_RECIPE_ID = 'franz-todos';
-export const TODOS_PARTITION_ID = 'persist:todos"';
+export const TODOS_PARTITION_ID = 'persist:todos';
 
 export const TODOS_ROUTES = {
   TARGET: '/todos',
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index baa94f6b3..bf7016e2f 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -76,7 +76,7 @@ const styles = theme => ({
   },
   workspaces: {
     height: 'auto',
-    overflowY: 'scroll',
+    overflowY: 'auto',
   },
   premiumAnnouncement: {
     padding: '20px',
@@ -142,7 +142,7 @@ class WorkspaceDrawer extends Component {
     } = workspaceStore;
     const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace;
     return (
-      <div className={classes.drawer}>
+      <div className={`${classes.drawer} workspaces-drawer`}>
         <H1 className={classes.headline}>
           {workspaceStore.isPremiumUpgradeRequired && (
             <span