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.

1 files changed, 41 insertions, 5 deletions

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) {