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/ComicDetail/RawFileDetails.tsx

@@ -7,22 +7,21 @@ import { format, parseISO } from "date-fns";
 export const RawFileDetails = (props): ReactElement => {
   const { rawFileDetails, inferredMetadata, created_at, updated_at } =
     props.data;
-  const PaperClipIcon = () => <></>;
   return (
     <>
       <div className="max-w-2xl ml-5">
         <div className="px-4 sm:px-6">
-          <p className="text-gray-500">
+          <p className="text-gray-500 dark:text-gray-400">
             <span className="text-xl">{rawFileDetails.name}</span>
           </p>
         </div>
         <div className="px-4 py-5 sm:px-6">
           <dl className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
             <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                 Raw File Details
               </dt>
-              <dd className="mt-1 text-sm text-gray-900">
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
                 {rawFileDetails.containedIn +
                   "/" +
                   rawFileDetails.name +
@@ -30,10 +29,10 @@ export const RawFileDetails = (props): ReactElement => {
               </dd>
             </div>
             <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                 Inferred Issue Metadata
               </dt>
-              <dd className="mt-1 text-sm text-gray-900">
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
                 Series Name: {inferredMetadata.issue.name}
                 {!isEmpty(inferredMetadata.issue.number) ? (
                   <span className="tag is-primary is-light">
@@ -43,8 +42,10 @@ export const RawFileDetails = (props): ReactElement => {
               </dd>
             </div>
             <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500">MIMEType</dt>
-              <dd className="mt-1 text-sm text-gray-900">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                MIMEType
+              </dt>
+              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
                 {/* File extension */}
                 <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                   <span className="pr-1 pt-1">
@@ -56,11 +57,12 @@ export const RawFileDetails = (props): ReactElement => {
                   </span>
                 </span>
               </dd>
-              <dd className="text-sm text-gray-900"></dd>
             </div>
             <div className="sm:col-span-1">
-              <dt className="text-sm font-medium text-gray-500">File Size</dt>
-              <dd className="mt-1 text-sm text-gray-900">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                File Size
+              </dt>
+              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
                 {/* size */}
                 <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                   <span className="pr-1 pt-1">
@@ -74,62 +76,19 @@ export const RawFileDetails = (props): ReactElement => {
               </dd>
             </div>
             <div className="sm:col-span-2">
-              <dt className="text-sm font-medium text-gray-500">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
                 Import Details
               </dt>
-              <dd className="mt-1 text-sm text-gray-900">
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
                 {format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
                 {format(parseISO(created_at), "h aaaa")}
               </dd>
             </div>
             <div className="sm:col-span-2">
-              <dt className="text-sm font-medium text-gray-500">Attachments</dt>
-              <dd className="mt-1 text-sm text-gray-900">
-                <ul
-                  role="list"
-                  className="divide-y divide-gray-200 rounded-md border border-gray-200"
-                >
-                  <li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
-                    <div className="flex w-0 flex-1 items-center">
-                      <PaperClipIcon
-                        className="h-5 w-5 flex-shrink-0 text-gray-400"
-                        aria-hidden="true"
-                      />
-                      <span className="ml-2 w-0 flex-1 truncate">
-                        resume_back_end_developer.pdf
-                      </span>
-                    </div>
-                    <div className="ml-4 flex-shrink-0">
-                      <a
-                        href="#"
-                        className="font-medium text-indigo-600 hover:text-indigo-500"
-                      >
-                        Download
-                      </a>
-                    </div>
-                  </li>
-                  <li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
-                    <div className="flex w-0 flex-1 items-center">
-                      {/* Read comic button */}
-                      <button
-                        className="button is-success is-light"
-                        onClick={() => {}}
-                      >
-                        <i className="fa-solid fa-book-open mr-2"></i>
-                        Read
-                      </button>
-                    </div>
-                    <div className="ml-4 flex-shrink-0">
-                      <a
-                        href="#"
-                        className="font-medium text-indigo-600 hover:text-indigo-500"
-                      >
-                        Download
-                      </a>
-                    </div>
-                  </li>
-                </ul>
-              </dd>
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                Actions
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900">{props.children}</dd>
             </div>
           </dl>
         </div>
@@ -164,4 +123,5 @@ RawFileDetails.propTypes = {
     created_at: PropTypes.string,
     updated_at: PropTypes.string,
   }),
+  children: PropTypes.any,
 };