Dark mode 2 (#100)

* 🗂️ Added tab icons and styles

* 🪑 Styled download panel table

* 🪑 Cleaned up the DC++ search results table

* 🪑 Many changes to DC++ downloads table

* 🏗️ Wired up search with RQ

* 🏗️ Changes to ComicDetail section

* 🔧 Fixing table styes

* 🏗 Fixed the archive ops panel

* 🔧 Tweaked Archive ops further

* 🃏 Styling the action menu

* 🧩 CV Match panel refactor WIP

* 🏗️ Refactored the action menu

* 🤼 Cleaning up CV match panel

* 🏗️ Refactored the scored matches

* 🤼 Revamped CV match panel UX

* 🖌️ Styling tweaks to the side panel

* 🖌️ Cleaned up the form

* 🏗️ Refactored the search form

* 🤐 Added a uncompress indicator

* 🏗️ Fix for encoding # in URIs

* 🔧 Fixed # symbol handling in URLs

* 🔧 Started work on Edit Metadata panel

* 🔎 Added a check for existing uncompressed archives

* 🏗️ Settings styling tweaks

* 🏗️ Fixed invalidation of archiveOps

* 🏗️ Fixed an invalidation query on DC++ download panel

* 🏗️ Fixed CV-sourced Volume info panel

* 🏗️ Fixed volume group card stacks on Dashboard

* 🔍 Fixing CV search page

* 🏗️ Refactoring Volume groups and wanted panel

* 🏗️ Cleaning up useless files

* 🛝 Added keen-slider for pull list

* 🏗️ Abstracted heading/subheading into Header

* 🏗️ Continued refactoring of PullList, Volumes etc.

* 📆 Wired up the datepicker to LoCG pull list

src/client/components/Dashboard/VolumeGroups.tsx

@@ -2,15 +2,10 @@ import { map, unionBy } from "lodash";
 import React, { ReactElement } from "react";
 import ellipsize from "ellipsize";
 import { Link, useNavigate } from "react-router-dom";
-import Masonry from "react-masonry-css";
+import Card from "../shared/Carda";
+import Header from "../shared/Header";
 
 export const VolumeGroups = (props): ReactElement => {
-  const breakpointColumnsObj = {
-    default: 5,
-    1100: 4,
-    700: 2,
-    500: 1,
-  };
   // Till mongo gives us back the deduplicated results with the ObjectId
   const deduplicatedGroups = unionBy(props.volumeGroups, "volumes.id");
   const navigate = useNavigate();
@@ -19,44 +14,48 @@ export const VolumeGroups = (props): ReactElement => {
   };
 
   return (
-    <section className="volumes-container mt-4">
-      <div className="content">
-        <a className="mb-1" onClick={navigateToVolumes}>
-          <span className="is-size-4 has-text-weight-semibold">
-            <i className="fa-solid fa-layer-group"></i> Volumes
-          </span>
-          <span className="icon mt-1">
-            <i className="fa-solid fa-angle-right"></i>
-          </span>
-        </a>
-        <p className="subtitle is-7">Based on ComicVine Volume information</p>
-      </div>
-      <Masonry
-        breakpointCols={breakpointColumnsObj}
-        className="volumes-grid"
-        columnClassName="volumes-grid-column"
-      >
+    <section>
+      <Header
+        headerContent="Volumes"
+        subHeaderContent="Based on ComicVine Volume information"
+        iconClassNames="fa-solid fa-binoculars mr-2"
+        link={"/volumes"}
+      />
+      <div className="grid grid-cols-5 gap-6 mt-3">
         {map(deduplicatedGroups, (data) => {
           return (
-            <div className="stack" key={data._id}>
-              <img src={data.volumes.image.small_url} />
-              <div className="content">
-                <div className="stack-title is-size-8">
-                  <Link to={`/volume/details/${data._id}`}>
-                    {ellipsize(data.volumes.name, 18)}
-                  </Link>
-                </div>
-                <div className="control">
-                  <span className="tags has-addons">
-                    <span className="tag is-primary is-light">Issues</span>
-                    <span className="tag">{data.volumes.count_of_issues}</span>
+            <div className="max-w-sm mx-auto" key={data._id}>
+              <Card
+                orientation="vertical-2"
+                key={data._id}
+                imageUrl={data.volumes.image.small_url}
+                hasDetails
+              >
+                <div className="py-3">
+                  <div className="text-sm">
+                    <Link to={`/volume/details/${data._id}`}>
+                      {ellipsize(data.volumes.name, 48)}
+                    </Link>
+                  </div>
+                  {/* issue count */}
+                  <span className="inline-flex mt-1 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--documents-minimalistic-bold-duotone] w-5 h-5"></i>
+                    </span>
+
+                    <span className="text-md text-slate-500 dark:text-slate-900">
+                      {data.volumes.count_of_issues} issues
+                    </span>
                   </span>
                 </div>
-              </div>
+              </Card>
+              <div className="w-11/12 h-2 mx-auto bg-slate-900 rounded-b opacity-75"></div>
+              <div className="w-10/12 h-2 mx-auto bg-slate-900 rounded-b opacity-50"></div>
+              <div className="w-9/12 h-2 mx-auto bg-slate-900 rounded-b opacity-25"></div>
             </div>
           );
         })}
-      </Masonry>
+      </div>
     </section>
   );
 };