#699 - Change border color

CHANGELOG.md

@@ -20,6 +20,7 @@
 - [#691](https://github.com/estruyf/vscode-front-matter/issues/691): Silent authentication retrieval for GitHub sponsors
 - [#694](https://github.com/estruyf/vscode-front-matter/issues/694): Start terminal session from the folder where the `frontmatter.json` file is located
 - [#696](https://github.com/estruyf/vscode-front-matter/issues/696): Close the local server terminal on restart
+- [#699](https://github.com/estruyf/vscode-front-matter/issues/699): Changing border theme variable for the dashboard header
 
 ## [9.3.1] - 2023-10-27
 

src/dashboardWebView/components/Header/FilterInput.tsx

@@ -39,7 +39,7 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
             name="search"
             className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${getColors(
               'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
-              'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+              'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-input-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
             )
               }`}
             placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}

src/dashboardWebView/components/Header/Header.tsx

@@ -25,7 +25,6 @@ import { Pagination } from './Pagination';
 import { GroupOption } from '../../constants/GroupOption';
 import usePagination from '../../hooks/usePagination';
 import { PaginationStatus } from './PaginationStatus';
-import useThemeColors from '../../hooks/useThemeColors';
 import { Navigation } from './Navigation';
 import { ProjectSwitcher } from './ProjectSwitcher';
 import * as l10n from '@vscode/l10n';
@@ -55,7 +54,6 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
   const location = useLocation();
   const navigate = useNavigate();
   const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination);
-  const { getColors } = useThemeColors();
 
   const createContent = () => {
     Messenger.send(DashboardMessage.createContent);
@@ -144,16 +142,8 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
   }, [location.search]);
 
   return (
-    <div className={`w-full sticky top-0 z-20 ${getColors(
-      `bg-gray-100 dark:bg-vulcan-500`,
-      `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`
-    )
-      }`}>
-      <div className={`mb-0 border-b flex justify-between ${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)]`
-      )
-        }`}>
+    <div className={`w-full sticky top-0 z-20 bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`}>
+      <div className={`mb-0 border-b flex justify-between bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}>
         <Tabs onNavigate={updateView} />
 
         <div className='flex'>
@@ -180,8 +170,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
             </div>
           </div>
 
-          <div className={`px-4 flex flex-row items-center border-b justify-between ${getColors(`border-gray-200 dark:border-vulcan-100`, `border-[var(--vscode-editorWidget-border)]`)
-            }`}>
+          <div className={`px-4 flex flex-row items-center border-b justify-between border-[var(--frontmatter-border)]`}>
             <div>
               <Navigation totalPages={totalPages || 0} />
             </div>
@@ -192,8 +181,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
           </div>
 
           <div
-            className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end border-b space-x-4 lg:space-x-6 xl:space-x-8 ${getColors(`bg-gray-200 border-gray-300 dark:bg-vulcan-400 dark:border-vulcan-100`, `bg-[var(--vscode-panel-background)] border-[var(--vscode-editorWidget-border)]`)
-              }`}
+            className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end border-b space-x-4 lg:space-x-6 xl:space-x-8 bg-[var(--vscode-panel-background)] border-[var(--frontmatter-border)]`}
           >
             <ClearFilters />
 
@@ -222,8 +210,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
             (totalPages || 0) > pageSetNr &&
             (!grouping || grouping === GroupOption.none) && (
               <div
-                className={`px-4 flex justify-between py-2 border-b ${getColors(`border-gray-300 dark:border-vulcan-100`, `border-[var(--vscode-editorWidget-border)]`)
-                  }`}
+                className={`px-4 flex justify-between py-2 border-b border-[var(--frontmatter-border)]`}
               >
                 <PaginationStatus totalPages={totalPages || 0} />
 

src/dashboardWebView/components/Header/Searchbox.tsx

@@ -56,7 +56,7 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
             name="search"
             className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${getColors(
               'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
-              'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+              'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-input-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
             )
               }`}
             placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}

src/dashboardWebView/components/Media/DetailsInput.tsx

@@ -14,12 +14,11 @@ export const DetailsInput: React.FunctionComponent<IDetailsInputProps> = ({ valu
     return (
       <textarea
         rows={3}
-        className={`py-1 px-2 sm:text-sm border w-full ${
-          getColors(
-            'bg-white dark:bg-vulcan-300 border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
-            'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
-          )
-        }`}
+        className={`py-1 px-2 sm:text-sm border w-full ${getColors(
+          'bg-white dark:bg-vulcan-300 border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
+          'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-input-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+        )
+          }`}
         value={value}
         onChange={onChange}
       />
@@ -28,12 +27,11 @@ export const DetailsInput: React.FunctionComponent<IDetailsInputProps> = ({ valu
 
   return (
     <input
-      className={`py-1 px-2 sm:text-sm border w-full ${
-        getColors(
-          'bg-white dark:bg-vulcan-300 border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
-          'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
-        )
-      }`}
+      className={`py-1 px-2 sm:text-sm border w-full ${getColors(
+        'bg-white dark:bg-vulcan-300 border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
+        'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-input-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+      )
+        }`}
       value={value}
       onChange={onChange}
     />

src/dashboardWebView/components/SnippetsView/NewForm.tsx

@@ -105,7 +105,7 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
               onChange={(e) => onMediaSnippetUpdate(e.currentTarget.checked)}
               className={`h-4 w-4 rounded ${getColors(
                 `focus:ring-teal-500 text-teal-600 border-gray-300 dark:border-vulcan-50`,
-                `focus:ring-[var(--frontmatter-button-background)] text-[var(--frontmatter-button-background)] border-[var(--vscode-editorWidget-border)]`
+                `focus:ring-[var(--frontmatter-button-background)] text-[var(--frontmatter-button-background)] border-[var(--frontmatter-border)]`
               )
                 }`}
             />

src/dashboardWebView/components/TaxonomyView/FilterInput.tsx

@@ -37,7 +37,7 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
           <input
             type="text"
             name="filter"
-            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent`}
+            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-input-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent`}
             placeholder={placeholder || ""}
             value={value}
             onChange={(e) => onChange && onChange(e.target.value)}

src/dashboardWebView/styles.css

@@ -351,7 +351,7 @@
   select {
     color: var(--vscode-input-foreground);
     background-color: var(--vscode-input-background);
-    border: 1px solid var(--vscode-editorWidget-border);
+    border: 1px solid var(--vscode-panel-border);
     font-size: var(--vscode-font-size);
     @apply rounded;
 

src/panelWebView/styles.css

@@ -969,7 +969,7 @@ vscode-divider {
 
 /* Divider */
 .divider {
-  background: var(--divider-background);
+  background: var(--vscode-panel-border);
 }
 
 /* Git actions */