From db3a584ab967609a4e5c3a6028e60fbbfe96ab40 Mon Sep 17 00:00:00 2001
From: Elio Struyf <info@estruyf.be>
Date: Sat, 4 Sep 2021 12:57:00 +0200
Subject: [PATCH] #73 - Color enhancements

---
 src/pagesView/components/Header/Header.tsx    | 28 ++++++++++---------
 .../components/Header/ViewSwitch.tsx          |  4 +--
 src/pagesView/components/Item.tsx             |  2 +-
 src/pagesView/components/List.tsx             |  2 +-
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/pagesView/components/Header/Header.tsx b/src/pagesView/components/Header/Header.tsx
index e992283a..8ee0eaa3 100644
--- a/src/pagesView/components/Header/Header.tsx
+++ b/src/pagesView/components/Header/Header.tsx
@@ -44,25 +44,27 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
         </div>
       </div>
 
-      <div className="px-4 flex flex-col lg:flex-row items-center border-b border-gray-200 dark:border-whisper-600">
-        <div className={`w-full lg:w-auto`}>
+      <div className="px-4 flex flex-row items-center border-b border-gray-200 dark:border-whisper-600 justify-between">
+        <div>
           <Navigation totalPages={totalPages} />
         </div>
 
-        <div className={`my-4 lg:my-0 w-full flex items-center justify-between lg:justify-end space-x-4 lg:space-x-6 xl:space-x-8 order-first lg:order-last`}>
-          <Folders folders={folders} />
-
-          <Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={(value) => setCrntTag(value)} />
-
-          <Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={(value) => setCrntCategory(value)} />
-
-          <Grouping />
-
-          <Sorting />
-
+        <div>
           <ViewSwitch />
         </div>
       </div>
+
+      <div className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end space-x-4 lg:space-x-6 xl:space-x-8 bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400  dark:border-vulcan-300`}>
+        <Folders folders={folders} />
+
+        <Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={(value) => setCrntTag(value)} />
+
+        <Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={(value) => setCrntCategory(value)} />
+
+        <Grouping />
+
+        <Sorting />
+      </div>
     </div>
   );
 };
\ No newline at end of file
diff --git a/src/pagesView/components/Header/ViewSwitch.tsx b/src/pagesView/components/Header/ViewSwitch.tsx
index 2067a4c3..c23786a6 100644
--- a/src/pagesView/components/Header/ViewSwitch.tsx
+++ b/src/pagesView/components/Header/ViewSwitch.tsx
@@ -26,11 +26,11 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (props: Rea
 
   return (
     <div className={`flex rounded-sm bg-vulcan-50 lg:mb-1`}>
-      <button className={`flex items-center p-2 rounded-l-sm ${view === ViewType.Grid ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
+      <button className={`flex items-center px-2 py-1 rounded-l-sm ${view === ViewType.Grid ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
         <ViewGridIcon className={`w-4 h-4`} />
         <span className={`sr-only`}>Change to grid</span>
       </button>
-      <button className={`flex items-center p-2 rounded-r-sm ${view === ViewType.List ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
+      <button className={`flex items-center px-2 py-1 rounded-r-sm ${view === ViewType.List ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
         <ViewListIcon className={`w-4 h-4`} />
         <span className={`sr-only`}>Change to list</span>
       </button>
diff --git a/src/pagesView/components/Item.tsx b/src/pagesView/components/Item.tsx
index de963df8..f1c4c4b9 100644
--- a/src/pagesView/components/Item.tsx
+++ b/src/pagesView/components/Item.tsx
@@ -51,7 +51,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
   } else if (view === ViewType.List) {
     return (
       <li className="relative">
-        <button className={`px-5 cursor-pointer w-full text-left grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 border-b border-vulcan-50 hover:bg-vulcan-50 hover:bg-opacity-70`} onClick={openFile}>
+        <button className={`px-5 cursor-pointer w-full text-left grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 border-b border-gray-300 hover:bg-gray-200 dark:border-vulcan-50 dark:hover:bg-vulcan-50 hover:bg-opacity-70`} onClick={openFile}>
           <div className="col-span-8 font-bold truncate">
             {title}
           </div>
diff --git a/src/pagesView/components/List.tsx b/src/pagesView/components/List.tsx
index 89c6f8c4..289aa1bf 100644
--- a/src/pagesView/components/List.tsx
+++ b/src/pagesView/components/List.tsx
@@ -11,7 +11,7 @@ export const List: React.FunctionComponent<IListProps> = ({children}: React.Prop
   if (view === ViewType.Grid) {
     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`;
   } else if (view === ViewType.List) {
-    className = `-mx-5`;
+    className = `-mx-4`;
   }
 
   return (