From 4c7d5bacea50fec0a837708a171aa8100561d898 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 25 Aug 2023 13:23:58 +0200
Subject: [PATCH] #635 - Fix navigation theming issues

---
 .../components/Header/Navigation.tsx          | 10 ++--------
 .../components/Header/Tab.tsx                 | 20 +++++--------------
 .../components/Menu/MenuButton.tsx            | 12 ++---------
 3 files changed, 9 insertions(+), 33 deletions(-)

diff --git a/src/dashboardWebView/components/Header/Navigation.tsx b/src/dashboardWebView/components/Header/Navigation.tsx
index acbc49f1..8debe991 100644
--- a/src/dashboardWebView/components/Header/Navigation.tsx
+++ b/src/dashboardWebView/components/Header/Navigation.tsx
@@ -28,14 +28,8 @@ const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
     <button
       className={`${isCrntTab
         ?
-        getColors(
-          'border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300',
-          'border-[var(--vscode-textLink-foreground)] text-[var(--vscode-textLink-foreground)]'
-        ) :
-        getColors(
-          `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`,
-          `border-transparent text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-textLink-activeForeground)] hover:border-[var(--vscode-textLink-activeForeground)]`
-        )
+        `border-[var(--vscode-textLink-foreground)] text-[var(--vscode-textLink-foreground)]` :
+        `border-transparent text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-textLink-activeForeground)] hover:border-[var(--vscode-textLink-activeForeground)]`
         } whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
       aria-current={isCrntTab ? 'page' : undefined}
       onClick={onClick}
diff --git a/src/dashboardWebView/components/Header/Tab.tsx b/src/dashboardWebView/components/Header/Tab.tsx
index 8edf1a99..5d175e06 100644
--- a/src/dashboardWebView/components/Header/Tab.tsx
+++ b/src/dashboardWebView/components/Header/Tab.tsx
@@ -18,21 +18,11 @@ export const Tab: React.FunctionComponent<ITabProps> = ({
 
   return (
     <button
-      className={`h-full flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent ${
-        getColors(
-          'hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300',
-          'text-[var(--vscode-tab-inactiveForeground)] hover:border-[var(--vscode-list-activeSelectionForeground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
-        )
-      } ${
-        location.pathname === `/${navigationType}`
-          ? getColors(
-              'text-vulcan-500 dark:text-whisper-500 border-vulcan-500 dark:border-whisper-500',
-              'text-[var(--vscode-tab-activeForeground)] border-[var(--vscode-tab-activeForeground)]'
-            ) : getColors(
-              'text-gray-500 dark:text-gray-400',
-              'text-[var(--vscode-tab-inactiveForeground)]'
-            )
-      }`}
+      className={`h-full flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent hover:border-[var(--vscode-tab-activeForeground)] hover:text-[var(--vscode-tab-activeForeground)] ${location.pathname === `/${navigationType}`
+        ?
+        `text-[var(--vscode-tab-activeForeground)] border-[var(--vscode-tab-activeForeground)]` :
+        `text-[var(--vscode-tab-inactiveForeground)]`
+        }`}
       type="button"
       role="tab"
       aria-controls="profile"
diff --git a/src/dashboardWebView/components/Menu/MenuButton.tsx b/src/dashboardWebView/components/Menu/MenuButton.tsx
index abda1b96..3b976474 100644
--- a/src/dashboardWebView/components/Menu/MenuButton.tsx
+++ b/src/dashboardWebView/components/Menu/MenuButton.tsx
@@ -22,19 +22,11 @@ export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
 
       <Menu.Button
         disabled={disabled}
-        className={`group inline-flex justify-center text-sm font-medium ${getColors(
-          'text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600',
-          'text-[var(--vscode-list-activeSelectionForeground)] hover:text-[var(--vscode-list-highlightForeground)]'
-        )
-          }`}
+        className={`group inline-flex justify-center text-sm font-medium text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]`}
       >
         {title}
         <ChevronDownIcon
-          className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5 ${getColors(
-            'text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700',
-            'text-[var(--vscode-list-activeSelectionForeground)] group-hover:text-[var(--vscode-list-highlightForeground)]'
-          )
-            }`}
+          className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-[var(--vscode-textLink-foreground)] group-hover:text-[var(--vscode-textLink-activeForeground)]`}
           aria-hidden="true"
         />
       </Menu.Button>