Fix some appearance issues (#1398)

* Fix property spelling in Sidebar component

* Fix typo in todos partition name

* Use the FerdiDev setting.json in dev mode

The app.setPath calls are still a mess and need to be fixed, but this at
least allows me to experiment locally.

* Make @meetfranz/theme follow the accent color

We inject the value of the accent color into the themes, so the buttons
show the appropriate color. This allows removing some existing css
hacks.

In order to do this, the themes had to be turned into functions that
take the brand color (accent color) as an argument instead of
hard-coding it.

The css-based accent color for legacy components is left unchanged.

* Remove superfluous scrollbars

While overflow: scroll doesn't look ugly on macs, because the system
hides scrollbars by default (except on hower), on Linux and Windows, the
disabled scrollbars appearing by default look ugly.

We set overflow-y: auto instead to display a scrollbar only when needed.

* Simplify theme generation in @meetfranz/themes

* Remove default accent color code duplication

* Apply accent color to styles not in themeInfo.json

Some colors are darkened/lightened versions of the primary brand color,
so they are not caught by build-theme-info. We create these styles with
`color` manually.

* Inset shadow on sidebar

This creates a more flat look that projecting a shadow over the service,
and avoid compositing a shadow over the webview.

* Apply accent color to vertical style tab bar

* Workspace drawer styling in vertical mode

* Fix sidebar layout

In vertical mode, the top of the service was clipped by the sidebar

Also removes unnecessary whitespace in sidebar

* Fix 1px wide line on right when todos are hidden

* Fix window menu

When building the menu bar, the File / app menu is added later, so we
must be careful about indexing the menu bar.

* Update locale files

* Report the default accent color accurately

* Fix inverted button with dark theme

* Fix crash with invalid accent color

Fall back to the default accent color instead

* Darker secondary buttons in dark mode

* Vertical workspace drawer style outside debug mode

In order to reliably apply the style, we need to add a class name to the
drawer manually, as component names only appear in class names in debug
mode.

1 files changed, 56 insertions, 24 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