From 5a2e54b00a86b4ac0f91b69aa55ff3c36939e8ab Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Mon, 8 May 2023 22:38:02 +0200
Subject: [PATCH] Fix: style of tabbedGroup-elements needed an 'important' to
 work in production

---
 UI/Base/TabbedGroup.svelte | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/UI/Base/TabbedGroup.svelte b/UI/Base/TabbedGroup.svelte
index a7762bd3a..fe2047234 100644
--- a/UI/Base/TabbedGroup.svelte
+++ b/UI/Base/TabbedGroup.svelte
@@ -111,8 +111,12 @@
     }
 
     :global(.tab-selected) {
-        background-color: var(--catch-detail-color);
-        color: var(--catch-detail-color-contrast);
+        /**
+        For some reason, the exported tailwind style takes priority in production (but not in development)
+        As the tabs are buttons, tailwind restyles them
+         */
+        background-color: var(--catch-detail-color) !important;
+        color: var(--catch-detail-color-contrast) !important;
     }
 
     :global(.tab-selected svg) {
@@ -120,7 +124,7 @@
     }
 
     :global(.tab-unselected) {
-        background-color: rgb(255 255 255);
-        color: rgb(0 0 0);
+        background-color: var(--background-color) !important;
+        color: var(--foreground-color) !important;
     }
 </style>