From cb80a10de29b8baf6b209e5c4a2e0772865d10c7 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 26 Dec 2021 17:19:31 +0100
Subject: [PATCH] #213 - Media folder design

---
 CHANGELOG.md                                         |  1 +
 src/dashboardWebView/components/Media/FolderItem.tsx | 10 ++++++----
 src/dashboardWebView/components/Media/List.tsx       | 10 +++++++---
 src/dashboardWebView/components/Media/Media.tsx      |  2 +-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bca654d2..3b24fde2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### 🎨 Enhancements
 
 - [#211](https://github.com/estruyf/vscode-front-matter/issues/211): Replace text selection on media inserts
+- [#213](https://github.com/estruyf/vscode-front-matter/issues/213): New media folder overview design
 
 ### 🐞 Fixes
 
diff --git a/src/dashboardWebView/components/Media/FolderItem.tsx b/src/dashboardWebView/components/Media/FolderItem.tsx
index cea4febe..9b52ca00 100644
--- a/src/dashboardWebView/components/Media/FolderItem.tsx
+++ b/src/dashboardWebView/components/Media/FolderItem.tsx
@@ -16,11 +16,13 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({ folder,
   const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder;
   
   return (
-    <li className={`group relative bg-gray-200 dark:bg-vulcan-300 hover:shadow-xl dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800 p-4`}>
-      <button className={`w-full flex flex-col items-center`} onClick={() => setSelectedFolder(folder)}>
-        <FolderIcon className={`h-auto w-1/2`} />
+    <li className={`group relative hover:shadow-xl dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800 p-4`}>
+      <button className={`w-full flex flex-row items-center h-full`} onClick={() => setSelectedFolder(folder)}>
+        <div>
+          <FolderIcon className={`h-12 w-12 mr-4`} />
+        </div>
 
-        <p className="text-sm font-bold pointer-events-none flex items-center">
+        <p className="text-sm font-bold pointer-events-none flex items-center text-left overflow-hidden break-words">
           {basename(relFolderPath)}
         </p>
       </button>
diff --git a/src/dashboardWebView/components/Media/List.tsx b/src/dashboardWebView/components/Media/List.tsx
index abf0746b..d932d661 100644
--- a/src/dashboardWebView/components/Media/List.tsx
+++ b/src/dashboardWebView/components/Media/List.tsx
@@ -1,10 +1,14 @@
 import * as React from 'react';
 
-export interface IListProps {}
+export interface IListProps {
+  gap?: number;
+}
+
+export const List: React.FunctionComponent<IListProps> = ({gap, children}: React.PropsWithChildren<IListProps>) => {
+  const gapClass = gap !== undefined ? `gap-y-${gap}` : `gap-y-8`;
 
-export const List: React.FunctionComponent<IListProps> = ({children}: React.PropsWithChildren<IListProps>) => {
   return (
-    <ul role="list" className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
+    <ul role="list" className={`grid grid-cols-2 gap-x-4 ${gapClass} sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`}>
       {children}
     </ul>
   );
diff --git a/src/dashboardWebView/components/Media/Media.tsx b/src/dashboardWebView/components/Media/Media.tsx
index 1c9adb98..83fc1dd7 100644
--- a/src/dashboardWebView/components/Media/Media.tsx
+++ b/src/dashboardWebView/components/Media/Media.tsx
@@ -113,7 +113,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
         {
           folders && folders.length > 0 && (
             <div className={`mb-8`}>
-              <List>
+              <List gap={0}>
                 {
                   folders && folders.map((folder) => (
                     <FolderItem key={folder} folder={folder} staticFolder={settings?.staticFolder} wsFolder={settings?.wsFolder} />