#505 - Media folder items styling

src/dashboardWebView/components/Media/FolderItem.tsx

@@ -2,6 +2,7 @@ import { DocumentIcon, FolderIcon } from '@heroicons/react/solid';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
+import useThemeColors from '../../hooks/useThemeColors';
 import { SelectedMediaFolderAtom } from '../../state';
 
 export interface IFolderItemProps {
@@ -16,6 +17,7 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
   staticFolder
 }: React.PropsWithChildren<IFolderItemProps>) => {
   const [, setSelectedFolder] = useRecoilState(SelectedMediaFolderAtom);
+  const { getColors } = useThemeColors();
 
   const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder;
 
@@ -26,7 +28,12 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
 
   return (
     <li
-      className={`group relative hover:bg-gray-200 dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800 p-4`}
+      className={`group relative p-4 ${
+        getColors(
+          'hover:bg-gray-200 dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800',
+          'hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
+        )
+      }`}
     >
       <button
         title={isContentFolder ? 'Content directory folder' : 'Public directory folder'}
@@ -36,7 +43,12 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
         <div className="relative mr-4">
           <FolderIcon className={`h-12 w-12`} />
           {isContentFolder && (
-            <span className="text-whisper-800 dark:text-vulcan-500 font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2">
+            <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 ${
+              getColors(
+                `text-whisper-800 dark:text-vulcan-500`,
+                `text-[var(--vscode-foreground)]`
+              )
+            }`}>
               C
             </span>
           )}

src/dashboardWebView/components/Media/Media.tsx

@@ -25,6 +25,7 @@ import { PageLayout } from '../Layout/PageLayout';
 import { parseWinPath } from '../../../helpers/parseWinPath';
 import { basename, extname, join } from 'path';
 import { MediaInfo } from '../../../models';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IMediaProps {}
 
@@ -37,6 +38,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
   const selectedFolder = useRecoilValue(SelectedMediaFolderAtom);
   const folders = useRecoilValue(MediaFoldersAtom);
   const loading = useRecoilValue(LoadingAtom);
+  const { getColors } = useThemeColors();
 
   const currentStaticFolder = useMemo(() => {
     if (settings?.staticFolder) {
@@ -172,7 +174,12 @@ export const Media: React.FunctionComponent<IMediaProps> = (
         )}
 
         {isDragActive && (
-          <div className="absolute top-0 left-0 w-full h-full text-whisper-500 bg-gray-900 bg-opacity-70 flex flex-col justify-center items-center z-50">
+          <div className={`absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-50 ${
+            getColors(
+              'text-whisper-500 bg-gray-900 bg-opacity-70',
+              'text-[var(--vscode-foreground)] bg-black bg-opacity-70'
+            )
+          }`}>
             <UploadIcon className={`h-32`} />
             <p className={`text-xl max-w-md text-center`}>
               {selectedFolder
@@ -188,7 +195,9 @@ export const Media: React.FunctionComponent<IMediaProps> = (
           <div className={`flex items-center justify-center h-full`}>
             <div className={`max-w-xl text-center`}>
               <FrontMatterIcon
-                className={`text-vulcan-300 dark:text-whisper-800 h-32 mx-auto opacity-90 mb-8`}
+                className={`h-32 mx-auto opacity-90 mb-8 ${
+                  getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
+                }`}
               />
 
               <p className={`text-xl font-medium`}>

src/dashboardWebView/components/Media/MediaHeaderTop.tsx

@@ -6,6 +6,7 @@ import { useDebounce } from '../../../hooks/useDebounce';
 import { usePrevious } from '../../../panelWebView/hooks/usePrevious';
 import { DashboardCommand } from '../../DashboardCommand';
 import { DashboardMessage } from '../../DashboardMessage';
+import useThemeColors from '../../hooks/useThemeColors';
 import {
   LoadingAtom,
   PageAtom,
@@ -30,6 +31,7 @@ export const MediaHeaderTop: React.FunctionComponent<
   const settings = useRecoilValue(SettingsSelector);
   const debounceGetMedia = useDebounce<string | null>(lastUpdated, 200);
   const prevSelectedFolder = usePrevious<string | null>(selectedFolder);
+  const { getColors } = useThemeColors();
 
   const mediaUpdate = (message: MessageEvent<EventData<{ key: string; value: any }>>) => {
     if (message.data.command === DashboardCommand.mediaUpdate) {
@@ -79,7 +81,12 @@ export const MediaHeaderTop: React.FunctionComponent<
 
   return (
     <nav
-      className="py-3 px-4 flex items-center justify-between border-b border-gray-300 dark:border-vulcan-100"
+      className={`py-3 px-4 flex items-center justify-between border-b ${
+        getColors(
+          'border-gray-300 dark:border-vulcan-100',
+          'border-[var(--vscode-panel-border)]'
+        )
+      }`}
       aria-label="Pagination"
     >
       <Searchbox placeholder={`Search in folder`} />