Folder optimizations

l10n/bundle.l10n.json

@@ -215,7 +215,7 @@
   "dashboard.media.media.dragAndDrop": "You can also drag and drop images from your desktop and select them once uploaded.",
   "dashboard.media.media.folder.upload": "Upload to {0}",
   "dashboard.media.media.folder.default": "No folder selected, files you drop will be added to the {0} folder",
-  "dashboard.media.media.placeholder": "No media files to show. You can drag & drop new files by holding your [shift] key.",
+  "dashboard.media.media.placeholder": "No media files to show. You can drag&drop new files by holding your [shift] key.",
   "dashboard.media.media.contentFolder": "Content folder",
   "dashboard.media.media.publicFolder": "Public folder",
 

src/dashboardWebView/components/Media/FolderItem.tsx

@@ -2,7 +2,6 @@ import { FolderIcon } from '@heroicons/react/24/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 {
@@ -17,7 +16,6 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
   staticFolder
 }: React.PropsWithChildren<IFolderItemProps>) => {
   const [, setSelectedFolder] = useRecoilState(SelectedMediaFolderAtom);
-  const { getColors } = useThemeColors();
 
   const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder;
 
@@ -28,25 +26,17 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
 
   return (
     <li
-      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)]'
-      )
-        }`}
+      className={`group relative 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'}
-        className={`w-full flex flex-row items-center h-full`}
+        className={`p-4 w-full flex flex-row items-center h-full`}
         onClick={() => setSelectedFolder(folder)}
       >
         <div className="relative mr-4">
           <FolderIcon className={`h-12 w-12`} />
           {isContentFolder && (
-            <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)]`
-            )
-              }`}>
+            <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 text-[var(--vscode-foreground)]`}>
               C
             </span>
           )}

src/localization/localization.enum.ts

@@ -700,7 +700,7 @@ export enum LocalizationKey {
    */
   dashboardMediaMediaFolderDefault = 'dashboard.media.media.folder.default',
   /**
-   * No media files to show. You can drag & drop new files by holding your [shift] key.
+   * No media files to show. You can drag & drop new files by holding your [shift] key.
    */
   dashboardMediaMediaPlaceholder = 'dashboard.media.media.placeholder',
   /**

src/panelWebView/components/Collapsible.tsx

@@ -52,7 +52,7 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({
 
   // This is a work around for a lit-element issue of duplicate slot names
   const triggerClick = (e: React.MouseEvent<HTMLElement>) => {
-    if ((e.target as any).tagName.toUpperCase() === 'VSCODE-COLLAPSIBLE') {
+    if ((e.target as Node).nodeName.toUpperCase() === 'VSCODE-COLLAPSIBLE') {
       setIsOpen((prev) => {
         if (sendUpdate) {
           sendUpdate(!prev);