From 69902c04bdf070c243f45445ca152f53b1e050d3 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 3 Dec 2024 00:04:12 +0200
Subject: [PATCH] style(next): draw tab workspace accent instead of background

---
 src/public/app/widgets/tab_row.js     | 15 ++++++++-------
 src/public/stylesheets/theme-next.css | 14 ++++++++++++++
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/public/app/widgets/tab_row.js b/src/public/app/widgets/tab_row.js
index 35b67cca1..0d00010e7 100644
--- a/src/public/app/widgets/tab_row.js
+++ b/src/public/app/widgets/tab_row.js
@@ -139,13 +139,14 @@ const TAB_ROW_TPL = `
         overflow: hidden;
         pointer-events: all;
         color: var(--inactive-tab-text-color);
-        background-color: var(--inactive-tab-background-color);
+        --tab-background-color: var(--workspace-tab-background-color);
+        background-color: var(--tab-background-color, var(--inactive-tab-background-color));
     }
     
     .tab-row-widget .note-tab[active] .note-tab-wrapper {
         font-weight: bold;
         color: var(--active-tab-text-color);
-        background-color : var(--active-tab-background-color);
+        background-color : var(--tab-background-color, var(--active-tab-background-color));
     }
     
     .tab-row-widget .note-tab[is-mini] .note-tab-wrapper {
@@ -189,11 +190,11 @@ const TAB_ROW_TPL = `
     }
     
     .tab-row-widget .note-tab:hover .note-tab-wrapper {
-        background-color: var(--inactive-tab-hover-background-color);
+        background-color: var(--tab-background-color, var(--inactive-tab-hover-background-color));
     }
     
     .tab-row-widget .note-tab[active]:hover .note-tab-wrapper {
-        background-color: var(--active-tab-hover-background-color);
+        background-color: var(--tab-background-color, var(--active-tab-hover-background-color));
     }
     
     .tab-row-widget .note-tab .note-tab-close:hover {
@@ -676,12 +677,12 @@ export default class TabRowWidget extends BasicWidget {
             const hoistedNote = froca.getNoteFromCache(noteContext.hoistedNoteId);
 
             if (hoistedNote) {
-                $tab.find('.note-tab-wrapper').css("background", hoistedNote.getWorkspaceTabBackgroundColor());
+                $tab.find('.note-tab-wrapper')
+                    .css("--workspace-tab-background-color", hoistedNote.getWorkspaceTabBackgroundColor());
                 if (!this.showNoteIcons) {
                     noteIcon = hoistedNote.getWorkspaceIconClass();
                 }
-            }
-            else {
+            } else {
                 $tab.find('.note-tab-wrapper').removeAttr("style");
             }
         }
diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css
index 1880d024c..4c8106928 100644
--- a/src/public/stylesheets/theme-next.css
+++ b/src/public/stylesheets/theme-next.css
@@ -774,6 +774,20 @@ div.quick-search .search-button.show  {
     border-bottom-right-radius: 0;   
 }
 
+.note-tab .note-tab-wrapper {
+    --tab-background-color: initial !important;
+}
+
+.note-tab .note-tab-wrapper::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background-color: var(--workspace-tab-background-color);
+}
+
 .tab-row-widget .note-tab:nth-child(1) {
     transform: translate3d(var(--tab-first-item-horiz-offset), 0, 0);
 }