#505 - Enhancements to theming of the data fields

src/dashboardWebView/components/Common/Button.tsx

@@ -21,7 +21,7 @@ export const Button: React.FunctionComponent<IButtonProps> = ({
     <button
       type="button"
       className={`${className || ''
-        } inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none ${getColors(
+        } inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded ${getColors(
           'text-white dark:text-vulcan-500 disabled:bg-gray-500',
           'disabled:opacity-50'
         )

src/dashboardWebView/components/Common/LinkButton.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
+
+export interface ILinkButtonProps {
+  title: string;
+  onClick: () => void;
+}
+
+export const LinkButton: React.FunctionComponent<ILinkButtonProps> = ({ children, title, onClick }: React.PropsWithChildren<ILinkButtonProps>) => {
+  const { getColors } = useThemeColors();
+
+  return (
+    <button
+      type="button"
+      className={
+        getColors(
+          `text-gray-500 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600`,
+          `text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`
+        )
+      }
+      title={title}
+      onClick={onClick}>
+      {children}
+    </button >
+  );
+};

src/dashboardWebView/components/DataView/SortableItem.tsx

@@ -2,6 +2,7 @@ import { PencilIcon, SelectorIcon, TrashIcon, XIcon } from '@heroicons/react/out
 import * as React from 'react';
 import { SortableHandle, SortableElement } from 'react-sortable-hoc';
 import useThemeColors from '../../hooks/useThemeColors';
+import { LinkButton } from '../Common/LinkButton';
 import { Alert } from '../Modals/Alert';
 
 export interface ISortableItemProps {
@@ -50,34 +51,19 @@ export const SortableItem = SortableElement(
           </div>
 
           <div className={`space-x-2 flex items-center`}>
-            <button
-              type="button"
-              className={
-                getColors(
-                  `text-gray-500 dark:text-whisper-900 hover:text-gray-600 dark:hover:text-whisper-500`,
-                  `text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`
-                )
-              }
+            <LinkButton
               title={`Edit "${value}"`}
-              onClick={() => onSelectedIndexChange(crntIndex)}
-            >
+              onClick={() => onSelectedIndexChange(crntIndex)}>
               <PencilIcon className="w-4 h-4" />
               <span className="sr-only">Edit</span>
-            </button>
-            <button
-              type="button"
-              className={
-                getColors(
-                  `text-gray-500 dark:text-whisper-900 hover:text-gray-600 dark:hover:text-whisper-500`,
-                  `text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`
-                )
-              }
+            </LinkButton>
+
+            <LinkButton
               title={`Delete "${value}"`}
-              onClick={() => deleteItemConfirm()}
-            >
+              onClick={() => deleteItemConfirm()}>
               <TrashIcon className="w-4 h-4" />
               <span className="sr-only">Delete</span>
-            </button>
+            </LinkButton>
           </div>
         </li>
 

src/dashboardWebView/components/SnippetsView/Item.tsx

@@ -145,7 +145,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
   return (
     <>
-      <li className={`group relative overflow-hidden shadow-md hover:shadow-xl dark:shadow-none border p-4 space-y-2 ${getColors(
+      <li className={`group relative overflow-hidden shadow-md hover:shadow-xl dark:shadow-none border p-4 space-y-2 rounded ${getColors(
         'bg-gray-50 dark:bg-vulcan-200 dark:hover:bg-vulcan-100 border-gray-200 dark:border-vulcan-50',
         'bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] border-[var(--frontmatter-border)]'
       )

src/dashboardWebView/components/TaxonomyView/TaxonomyActions.tsx

@@ -1,7 +1,6 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import {
   ArrowCircleUpIcon,
-  ArrowUpIcon,
   PencilIcon,
   PlusIcon,
   TrashIcon
@@ -10,6 +9,7 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import { MergeIcon } from '../../../components/icons/MergeIcon';
 import { DashboardMessage } from '../../DashboardMessage';
+import { LinkButton } from '../Common/LinkButton';
 
 export interface ITaxonomyActionsProps {
   field: string | null;
@@ -60,56 +60,41 @@ export const TaxonomyActions: React.FunctionComponent<ITaxonomyActionsProps> = (
   return (
     <div className={`space-x-2`}>
       {unmapped && (
-        <button
-          className="text-gray-500 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600"
-          type={`button`}
+        <LinkButton
           title={`Add ${value} to taxonomy settings`}
-          onClick={onAdd}
-        >
+          onClick={onAdd}>
           <PlusIcon className={`w-4 h-4`} aria-hidden={true} />
           <span className="sr-only">Add to settings</span>
-        </button>
+        </LinkButton>
       )}
 
-      <button
-        className="text-gray-500 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600"
-        type={`button`}
+      <LinkButton
         title={`Edit ${value}`}
-        onClick={onEdit}
-      >
+        onClick={onEdit}>
         <PencilIcon className={`w-4 h-4`} aria-hidden={true} />
         <span className="sr-only">Edit</span>
-      </button>
+      </LinkButton>
 
-      <button
-        className="text-gray-500 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600"
-        type={`button`}
+      <LinkButton
         title={`Merge ${value}`}
-        onClick={onMerge}
-      >
+        onClick={onMerge}>
         <MergeIcon className={`w-4 h-4`} aria-hidden={true} />
         <span className="sr-only">Merge</span>
-      </button>
+      </LinkButton>
 
-      <button
-        className="text-gray-500 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600"
-        type={`button`}
+      <LinkButton
         title={`Move to another taxonomy type`}
-        onClick={onMove}
-      >
+        onClick={onMove}>
         <ArrowCircleUpIcon className={`w-4 h-4`} aria-hidden={true} />
         <span className="sr-only">Move to another taxonomy type</span>
-      </button>
+      </LinkButton>
 
-      <button
-        className="text-gray-500 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600"
-        type={`button`}
+      <LinkButton
         title={`Delete ${value}`}
-        onClick={onDelete}
-      >
+        onClick={onDelete}>
         <TrashIcon className={`w-4 h-4`} aria-hidden={true} />
         <span className="sr-only">Delete</span>
-      </button>
+      </LinkButton>
     </div>
   );
 };

src/dashboardWebView/components/TaxonomyView/TaxonomyLookup.tsx

@@ -6,6 +6,7 @@ import { useRecoilValue } from 'recoil';
 import { getTaxonomyField } from '../../../helpers/getTaxonomyField';
 import { useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface ITaxonomyLookupProps {
   taxonomy: string | null;
@@ -20,6 +21,7 @@ export const TaxonomyLookup: React.FunctionComponent<ITaxonomyLookupProps> = ({
 }: React.PropsWithChildren<ITaxonomyLookupProps>) => {
   const settings = useRecoilValue(SettingsSelector);
   const navigate = useNavigate();
+  const { getColors } = useThemeColors();
 
   const total: number | undefined = useMemo(() => {
     if (!taxonomy || !value || !pages || !settings?.contentTypes) {
@@ -54,7 +56,7 @@ export const TaxonomyLookup: React.FunctionComponent<ITaxonomyLookupProps> = ({
   if (taxonomy === 'tags' || taxonomy === 'categories') {
     return (
       <button
-        className={total ? `text-teal-900 hover:text-teal-600 font-bold` : ``}
+        className={total ? `font-bold ${getColors(`text-teal-900 hover:text-teal-600 `, `text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`)}` : ``}
         title={total ? `Show contents with ${value} in ${taxonomy}` : ``}
         onClick={onNavigate}
       >

src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx

@@ -106,16 +106,24 @@ export const TaxonomyManager: React.FunctionComponent<ITaxonomyManagerProps> = (
     <div className={`py-6 px-4 flex flex-col h-full overflow-hidden`}>
       <div className={`flex w-full justify-between flex-shrink-0`}>
         <div>
-          <h2 className={`text-lg text-gray-500 dark:text-whisper-900 first-letter:uppercase`}>
+          <h2 className={`text-lg first-letter:uppercase ${getColors(
+            'text-gray-500 dark:text-whisper-900',
+            'text-[var(--frontmatter-text)]'
+          )
+            }`}>
             {taxonomy}
           </h2>
-          <p className={`mt-2 text-sm text-gray-500 dark:text-whisper-900 first-letter:uppercase`}>
+          <p className={`mt-2 text-sm first-letter:uppercase ${getColors(
+            'text-gray-500 dark:text-whisper-900',
+            'text-[var(--frontmatter-secondary-text)]'
+          )
+            }`}>
             Create, edit, and manage the {taxonomy} of your site
           </p>
         </div>
         <div>
           <button
-            className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none ${getColors(
+            className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none rounded ${getColors(
               `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
               `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
             )
@@ -135,36 +143,36 @@ export const TaxonomyManager: React.FunctionComponent<ITaxonomyManagerProps> = (
             <tr>
               <th
                 scope="col"
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-whisper-900 uppercase"
+                className={`px-6 py-3 text-left text-xs font-medium uppercase ${getColors('text-gray-500 dark:text-whisper-900', 'text-[var(--frontmatter-secondary-text)]')}`}
               >
                 Name
               </th>
               <th
                 scope="col"
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-whisper-900 uppercase"
+                className={`px-6 py-3 text-left text-xs font-medium uppercase ${getColors('text-gray-500 dark:text-whisper-900', 'text-[var(--frontmatter-secondary-text)]')}`}
               >
                 Count
               </th>
               <th
                 scope="col"
-                className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-whisper-900 uppercase"
+                className={`px-6 py-3 text-right text-xs font-medium uppercase ${getColors('text-gray-500 dark:text-whisper-900', 'text-[var(--frontmatter-secondary-text)]')}`}
               >
                 Action
               </th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-gray-200 dark:divide-vulcan-300">
+          <tbody className={`divide-y ${getColors(`divide-gray-200 dark:divide-vulcan-300`, `divide-[var(--frontmatter-border)]`)}`}>
             {items && items.length > 0
               ? items.map((item, index) => (
                 <tr key={index}>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
+                  <td className={`px-6 py-4 whitespace-nowrap text-sm font-medium ${getColors(`text-gray-800 dark:text-gray-200`, `text-[var(--frontmatter-text)]`)}`}>
                     <TagIcon className="inline-block h-4 w-4 mr-2" />
                     <span>{item}</span>
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
+                  <td className={`px-6 py-4 whitespace-nowrap text-sm font-medium ${getColors(`text-gray-800 dark:text-gray-200`, `text-[var(--frontmatter-text)]`)}`}>
                     <TaxonomyLookup taxonomy={taxonomy} value={item} pages={pages} />
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <td className={`px-6 py-4 whitespace-nowrap text-right text-sm font-medium`}>
                     <TaxonomyActions field={taxonomy} value={item} />
                   </td>
                 </tr>
@@ -173,7 +181,7 @@ export const TaxonomyManager: React.FunctionComponent<ITaxonomyManagerProps> = (
               (unmappedItems.length === 0 && (
                 <tr>
                   <td
-                    className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200"
+                    className={`px-6 py-4 whitespace-nowrap text-sm font-medium ${getColors(`text-gray-800 dark:text-gray-200`, `text-[var(--frontmatter-text)]`)}`}
                     colSpan={4}
                   >
                     No {taxonomy} found
@@ -186,16 +194,16 @@ export const TaxonomyManager: React.FunctionComponent<ITaxonomyManagerProps> = (
               unmappedItems.map((item, index) => (
                 <tr key={index}>
                   <td
-                    className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200"
+                    className={`px-6 py-4 whitespace-nowrap text-sm font-medium ${getColors(`text-gray-800 dark:text-gray-200`, `text-[var(--frontmatter-text)]`)}`}
                     title="Missing in your settings"
                   >
                     <ExclamationIcon className="inline-block h-4 w-4 mr-2" />
                     <span>{item}</span>
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
+                  <td className={`px-6 py-4 whitespace-nowrap text-sm font-medium ${getColors(`text-gray-800 dark:text-gray-200`, `text-[var(--frontmatter-text)]`)}`}>
                     <TaxonomyLookup taxonomy={taxonomy} value={item} pages={pages} />
                   </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                  <td className={`px-6 py-4 whitespace-nowrap text-right text-sm font-medium`}>
                     <TaxonomyActions field={taxonomy} value={item} unmapped />
                   </td>
                 </tr>

src/dashboardWebView/components/UnknownView/UnknownView.tsx

@@ -1,14 +1,17 @@
 import { StopIcon } from '@heroicons/react/outline';
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 
-export interface IUnknownViewProps {}
+export interface IUnknownViewProps { }
 
 export const UnknownView: React.FunctionComponent<IUnknownViewProps> = (
   props: React.PropsWithChildren<IUnknownViewProps>
 ) => {
+  const { getColors } = useThemeColors();
+
   return (
     <div className={`w-full h-full flex items-center justify-center`}>
-      <div className="flex flex-col items-center text-gray-500 dark:text-whisper-900">
+      <div className={`flex flex-col items-center ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}`}>
         <StopIcon className="w-32 h-32" />
         <p className="text-3xl mt-2">View does not exist</p>
         <p className="text-xl mt-4">

src/dashboardWebView/index.tsx

@@ -76,10 +76,6 @@ const mutationObserver = new MutationObserver((mutationsList, observer) => {
 
 const elm = document.querySelector('#app');
 if (elm) {
-  updateCssVariables();
-
-  mutationObserver.observe(document.body, { childList: false, attributes: true })
-
   const welcome = elm?.getAttribute('data-showWelcome');
   const version = elm?.getAttribute('data-version');
   const environment = elm?.getAttribute('data-environment');
@@ -88,6 +84,11 @@ if (elm) {
   const url = elm?.getAttribute('data-url');
   const experimental = elm?.getAttribute('data-experimental');
 
+  if (experimental) {
+    updateCssVariables();
+    mutationObserver.observe(document.body, { childList: false, attributes: true });
+  }
+
   if (isProd === 'true') {
     Sentry.init({
       dsn: SENTRY_LINK,
@@ -104,7 +105,7 @@ if (elm) {
   }
 
   if (experimental) {
-    elm.setAttribute("class", "bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]");
+    elm.setAttribute("class", "experimental bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]");
   }
 
   if (type === 'preview') {

src/dashboardWebView/styles.css

@@ -75,7 +75,7 @@
   @apply py-4;
 
   h2 {
-    @apply text-sm mb-2;
+    @apply mb-2 text-sm;
   }
 
   form {
@@ -86,7 +86,7 @@
     }
 
     input {
-      @apply w-full text-vulcan-500 px-2 py-1;
+      @apply w-full px-2 py-1 text-vulcan-500;
 
       &::placeholder {
         @apply text-gray-500;
@@ -111,10 +111,10 @@
     }
 
     .ant-form-item-has-error .ant-form-item-children-icon {
-      @apply text-red-400 absolute right-1 top-1;
+      @apply absolute right-1 top-1 text-red-400;
 
       svg {
-        @apply w-4 h-4;
+        @apply h-4 w-4;
       }
     }
 
@@ -124,12 +124,12 @@
       }
 
       ul {
-        @apply list-disc pl-6 pr-4 py-4 bg-opacity-50;
+        @apply list-disc bg-opacity-50 py-4 pl-6 pr-4;
       }
     }
 
     input[type='submit'] {
-      @apply w-auto mt-4 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white bg-teal-600 cursor-pointer;
+      @apply mt-4 inline-flex w-auto cursor-pointer items-center border border-transparent bg-teal-600 px-3 py-2 text-sm font-medium leading-4 text-white;
 
       &:hover {
         @apply bg-teal-700;
@@ -153,10 +153,10 @@
   }
 
   .ant-btn-dashed {
-    @apply border border-gray-300 border-dashed flex items-center justify-center py-1 mt-2;
+    @apply mt-2 flex items-center justify-center border border-dashed border-gray-300 py-1;
 
     &:hover {
-      @apply text-teal-900 border-teal-900;
+      @apply border-teal-900 text-teal-900;
     }
   }
 
@@ -168,7 +168,7 @@
 
   .ant-btn-ghost:focus,
   .ant-btn-ghost:hover {
-    @apply text-teal-600 border-teal-700;
+    @apply border-teal-700 text-teal-600;
   }
 
   .ant-switch-checked {
@@ -315,7 +315,7 @@
     }
 
     input[type='submit'] {
-      @apply text-vulcan-500;
+      @apply rounded text-vulcan-500;
     }
   }
 
@@ -327,7 +327,70 @@
     @apply border-vulcan-50;
 
     &:hover {
-      @apply text-teal-400 border-teal-900;
+      @apply border-teal-900 text-teal-400;
+    }
+  }
+}
+
+.experimental {
+  [type='text'],
+  [type='email'],
+  [type='url'],
+  [type='password'],
+  [type='number'],
+  [type='date'],
+  [type='datetime-local'],
+  [type='month'],
+  [type='search'],
+  [type='tel'],
+  [type='time'],
+  [type='week'],
+  [multiple],
+  textarea,
+  select {
+    color: var(--vscode-input-foreground);
+    background-color: var(--vscode-input-background);
+    border: 1px solid var(--vscode-editorWidget-border);
+    font-size: var(--vscode-font-size);
+    @apply rounded;
+
+    &::placeholder {
+      color: var(--vscode-input-placeholderForeground);
+    }
+
+    &:focus {
+      outline: 1px solid var(--vscode-focusBorder);
+      border-color: transparent;
+      outline-offset: 0;
+    }
+  }
+
+  .autoform {
+    form {
+      label {
+        color: var(--frontmatter-secondary-text);
+      }
+
+      input[type='submit'] {
+        color: var(--vscode-button-foreground);
+        background-color: var(--vscode-button-background);
+
+        &:hover {
+          background-color: var(--vscode-button-hoverBackground);
+        }
+      }
+    }
+
+    .ant-list.ant-list-bordered {
+      border-color: var(--frontmatter-border);
+    }
+
+    .ant-btn-dashed {
+      border-color: var(--frontmatter-border);
+
+      &:hover {
+        @apply border-teal-900 text-teal-400;
+      }
     }
   }
 }