fix: update appearance/index.ts to apply the accent color on tabs whe…

…n using sidebar in the horizontal mode (#1967)
ferdium · Nov 12, 2024 · 58fc88a · 58fc88a
1 parent 114b537
commit 58fc88a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
@@ -41,7 +41,7 @@ const generateUserCustomCSS = () => {
   return pathExistsSync(path) ? readFileSync(path).toString() : '';
 };
 
-const generateAccentStyle = accentColorStr => {
+const generateAccentStyle = (accentColorStr, useHorizontalStyle) => {
   let accentColor;
   try {
     accentColor = color(accentColorStr);
@@ -97,7 +97,7 @@ const generateAccentStyle = accentColorStr => {
     }
 
     .franz-form .franz-form__radio.is-selected, .tab-item.is-active {
-      border-color: ${accentColorStr};
+      box-shadow: inset ${useHorizontalStyle ? '0 4px' : '4px 0'} 0 0 ${accentColorStr};
     }
 
     a.button:hover, button.button:hover {
@@ -405,7 +405,7 @@ const generateStyle = (settings, app) => {
   if (
     accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase()
   ) {
-    style += generateAccentStyle(accentColor);
+    style += generateAccentStyle(accentColor, useHorizontalStyle);
   }
 
   style += generateServiceRibbonWidthStyle(

diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
@@ -33,7 +33,6 @@ $tabitem-bias: 30px;
 
     .tab-item {
       &.is-active {
-        box-shadow: inset 0 4px 0 0 $theme-brand-primary;
         overflow: hidden;
         height: $sidebar-width + 4;
       }