From 4eea855d0f1f1a9a7400497e132496839f765d96 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 7 Feb 2023 17:47:07 +0100
Subject: [PATCH] #505 - Header theming

---
 .../components/ErrorView/index.tsx            |  5 ++++-
 .../components/Header/Breadcrumb.tsx          | 22 ++++++++++++++++---
 .../components/Header/ClearFilters.tsx        | 10 +++++++--
 .../components/Header/Header.tsx              | 12 +++++++---
 .../components/Header/PaginationStatus.tsx    |  9 +++++++-
 .../Header/RefreshDashboardData.tsx           |  9 +++++++-
 6 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/src/dashboardWebView/components/ErrorView/index.tsx b/src/dashboardWebView/components/ErrorView/index.tsx
index 892a3729..359871a0 100644
--- a/src/dashboardWebView/components/ErrorView/index.tsx
+++ b/src/dashboardWebView/components/ErrorView/index.tsx
@@ -1,14 +1,17 @@
 import { ExclamationIcon } from '@heroicons/react/solid';
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IErrorViewProps {}
 
 export const ErrorView: React.FunctionComponent<IErrorViewProps> = (
   props: React.PropsWithChildren<IErrorViewProps>
 ) => {
+  const { getColors } = useThemeColors();
+  
   return (
     <main className={`h-full w-full flex flex-col justify-center items-center space-y-2`}>
-      <ExclamationIcon className="w-24 h-24 text-red-500" />
+      <ExclamationIcon className={`w-24 h-24 ${getColors(`text-red-500`, `text-[var(--vscode-editorError-foreground)]`)}`} />
       <p className="text-xl">Sorry, something went wrong.</p>
       <p className="text-base">Please close the dashboard and try again.</p>
     </main>
diff --git a/src/dashboardWebView/components/Header/Breadcrumb.tsx b/src/dashboardWebView/components/Header/Breadcrumb.tsx
index 5cf08778..9a538a65 100644
--- a/src/dashboardWebView/components/Header/Breadcrumb.tsx
+++ b/src/dashboardWebView/components/Header/Breadcrumb.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
 import { parseWinPath } from '../../../helpers/parseWinPath';
+import useThemeColors from '../../hooks/useThemeColors';
 import { SearchAtom, SelectedMediaFolderAtom, SettingsAtom } from '../../state';
 
 export interface IBreadcrumbProps {}
@@ -15,6 +16,7 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
   const [, setSearchValue] = useRecoilState(SearchAtom);
   const [folders, setFolders] = React.useState<string[]>([]);
   const settings = useRecoilValue(SettingsAtom);
+  const { getColors } = useThemeColors();
 
   const updateFolder = (folder: string) => {
     setSearchValue('');
@@ -82,7 +84,10 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
         <div className="flex items-center">
           <button
             onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)}
-            className="text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500"
+            className={getColors(
+              `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
+              `text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
+            )}
           >
             <CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
             <span className="sr-only">Home</span>
@@ -94,7 +99,12 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
         <li key={folder} className="flex">
           <div className="flex items-center">
             <svg
-              className="flex-shrink-0 h-5 w-5 text-gray-300 dark:text-whisper-900"
+              className={`flex-shrink-0 h-5 w-5 ${
+                getColors(
+                  `text-gray-300 dark:text-whisper-900`,
+                  `text-[var(--vscode-tab-inactiveForeground)]`
+                )
+              }`}
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
               viewBox="0 0 20 20"
@@ -102,9 +112,15 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
             >
               <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
             </svg>
+
             <button
               onClick={() => updateFolder(folder)}
-              className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500"
+              className={`ml-4 text-sm font-medium ${
+                getColors(
+                  `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
+                  `text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
+                )
+              }`}
             >
               {basename(folder)}
             </button>
diff --git a/src/dashboardWebView/components/Header/ClearFilters.tsx b/src/dashboardWebView/components/Header/ClearFilters.tsx
index 0066661b..17036729 100644
--- a/src/dashboardWebView/components/Header/ClearFilters.tsx
+++ b/src/dashboardWebView/components/Header/ClearFilters.tsx
@@ -15,8 +15,8 @@ import {
 } from '../../state';
 
 import { DefaultValue } from 'recoil';
-import { useLocation } from 'react-router-dom';
 import { useEffect } from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export const guardRecoilDefaultValue = (candidate: any): candidate is DefaultValue => {
   if (candidate instanceof DefaultValue) return true;
@@ -29,6 +29,7 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
   props: React.PropsWithChildren<IClearFiltersProps>
 ) => {
   const [show, setShow] = React.useState(false);
+  const { getColors } = useThemeColors();
 
   const folder = useRecoilValue(FolderSelector);
   const tag = useRecoilValue(TagSelector);
@@ -63,7 +64,12 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
 
   return (
     <button
-      className="flex items-center hover:text-teal-600"
+      className={`flex items-center ${
+        getColors(
+          'hover:text-teal-600',
+          'hover:text-[var(--vscode-textLink-activeForeground)]'
+        )
+      }`}
       onClick={reset}
       title={`Clear filters, grouping, and sorting`}
     >
diff --git a/src/dashboardWebView/components/Header/Header.tsx b/src/dashboardWebView/components/Header/Header.tsx
index ad686abf..af352451 100644
--- a/src/dashboardWebView/components/Header/Header.tsx
+++ b/src/dashboardWebView/components/Header/Header.tsx
@@ -142,10 +142,16 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
 
   return (
     <div className={`w-full sticky top-0 z-40 ${
-      getColors(`bg-gray-100 dark:bg-vulcan-500`, `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`)
-    } `}>
+      getColors(
+        `bg-gray-100 dark:bg-vulcan-500`, 
+        `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`
+      )
+    }`}>
       <div className={`mb-0 border-b ${
-        getColors(`bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300`, `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--vscode-editorWidget-border)]`)
+        getColors(
+          `bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300`, 
+          `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--vscode-editorWidget-border)]`
+        )
       }`}>
         <Tabs onNavigate={updateView} />
       </div>
diff --git a/src/dashboardWebView/components/Header/PaginationStatus.tsx b/src/dashboardWebView/components/Header/PaginationStatus.tsx
index 4c74cb88..de3a6919 100644
--- a/src/dashboardWebView/components/Header/PaginationStatus.tsx
+++ b/src/dashboardWebView/components/Header/PaginationStatus.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import usePagination from '../../hooks/usePagination';
+import useThemeColors from '../../hooks/useThemeColors';
 import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
 
 export interface IPaginationStatusProps {
@@ -19,6 +20,7 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =
     totalPages || 0,
     totalMedia
   );
+  const { getColors } = useThemeColors();
 
   const totelItemsOnPage = useMemo(() => {
     const items = (page + 1) * pageSetNr;
@@ -30,7 +32,12 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =
 
   return (
     <div className="hidden sm:flex">
-      <p className="text-sm text-gray-500 dark:text-whisper-900">
+      <p className={`text-sm ${
+        getColors(
+          'text-gray-500 dark:text-whisper-900',
+          'text-[var(--vscode-tab-inactiveForeground)]'
+        )
+      }`}>
         Showing <span className="font-medium">{page * pageSetNr + 1}</span> to{' '}
         <span className="font-medium">{totelItemsOnPage}</span> of{' '}
         <span className="font-medium">{totalItems}</span> results
diff --git a/src/dashboardWebView/components/Header/RefreshDashboardData.tsx b/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
index 4a3ac666..749e4b38 100644
--- a/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
+++ b/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
+import useThemeColors from '../../hooks/useThemeColors';
 import { NavigationType } from '../../models';
 import {
   CategoryAtom,
@@ -32,6 +33,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
   // Media
   const resetPage = useResetRecoilState(PageAtom);
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
+  const { getColors } = useThemeColors();
 
   const refreshPages = () => {
     setLoading(true);
@@ -60,7 +62,12 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
 
   return (
     <button
-      className={`mr-2 text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`}
+      className={`mr-2 ${
+        getColors(
+          'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500',
+          'text-[var(--vscode-foreground)] hover:text-[var(--vscode-textLink-foreground)]'
+        )
+      }`}
       title="Refresh dashboard"
       onClick={refresh}
     >