From 5ea2ccfb85da0823a30b8697339e16e95f8dd87d Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sat, 18 Sep 2021 22:41:55 +0200
Subject: fix: accent color customization regression (#1963)

PR #1959 removed the build-theme-info script, which was broken, along
with the themeInfo.json that we used to dynamically build CSS rules for
accent color customization. This resulted in the accent color not
getting applied to most of the UI.

Instead of trying to restore the build-theme-info functionality, this
commit takes a much simpler approach by statically adding the required
CSS rules to src/features/appearance/index.ts.

Since these rules are no longer automatically generated, we need to
update them once some CSS styling is added with the accent color.

A longer term fix would be to use CSS variables instead, but that
approach would not be supported by @meetfranz/theme.
---
 src/features/appearance/index.ts | 46 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index b00b9df3d..da5aa0333 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -27,8 +27,6 @@ function darkenAbsolute(originalColor, absoluteChange) {
 }
 
 function generateAccentStyle(accentColorStr) {
-  let style = '';
-
   let accentColor = color(DEFAULT_APP_SETTINGS.accentColor);
   try {
     accentColor = color(accentColorStr);
@@ -36,7 +34,47 @@ function generateAccentStyle(accentColorStr) {
     // Ignore invalid accent color.
   }
   const darkerColorStr = darkenAbsolute(accentColor, 5).hex();
-  style += `
+  return `
+    .theme__dark .app .sidebar .sidebar__button.is-muted,
+    .theme__dark .app .sidebar .sidebar__button.is-active,
+    .sidebar .sidebar__button.is-muted, .sidebar .sidebar__button.is-active,
+    .tab-item.is-active, .settings .account .invoices .invoices__action button,
+    .settings-navigation .settings-navigation__link.is-active .badge,
+    a.link,
+    button.link
+    .auth .welcome .button:hover
+    .auth .welcome .button__inverted
+    .franz-form .franz-form__radio.is-selected
+    .theme__dark .franz-form__button.franz-form__button--inverted
+    .franz-form__button.franz-form__button--inverted {
+      color: ${accentColorStr};
+    }
+
+    .theme__dark .app .sidebar .sidebar__button.is-muted
+    .theme__dark .app .sidebar .sidebar__button.is-active
+    .sidebar .sidebar__button.is-muted
+    .sidebar .sidebar__button.is-active
+    .tab-item.is-active
+    .settings .account .invoices .invoices__action button
+    .settings-navigation .settings-navigation__link.is-active .badge
+    a.link
+    button.link
+    .auth .welcome .button:hover
+    .auth .welcome .button__inverted
+    .franz-form .franz-form__radio.is-selected
+    .theme__dark .franz-form__button.franz-form__button--inverted
+    .franz-form__button.franz-form__button--inverted {
+      background: ${accentColorStr};
+    }
+
+    .settings .settings__header .separator {
+      border-right-color: ${accentColorStr};
+    }
+
+    .franz-form .franz-form__radio.is-selected {
+      border-color: ${accentColorStr};
+    }
+
     a.button:hover, button.button:hover {
       background: ${darkenAbsolute(accentColor, 10).hex()};
     }
@@ -65,8 +103,6 @@ function generateAccentStyle(accentColorStr) {
       background: ${accentColor.lighten(0.35).hex()};
     }
   `;
-
-  return style;
 }
 
 function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
-- 
cgit v1.2.3-54-g00ecf