#73 - Color enhancements

estruyf · Sep 4, 2021 · db3a584 · db3a584 · vercel · Sep 4, 2021
1 parent 918f914
commit db3a584
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/src/pagesView/components/Header/Header.tsx b/src/pagesView/components/Header/Header.tsx
@@ -44,24 +44,26 @@ 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} />
+        <div>
+          <ViewSwitch />
+        </div>
+      </div>
 
-          <Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={(value) => setCrntTag(value)} />
+      <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={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={(value) => setCrntCategory(value)} />
+        <Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={(value) => setCrntTag(value)} />
 
-          <Grouping />
+        <Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={(value) => setCrntCategory(value)} />
 
-          <Sorting />
+        <Grouping />
 
-          <ViewSwitch />
-        </div>
+        <Sorting />
       </div>
     </div>
   );

diff --git 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
@@ -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
@@ -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 (