Dark mode refactor (#98)

* 🏗️ Acquisition Panel refactor WIP

* 🔧 Formatted the search query box

* 🔧 Implementing download method

* 🏗️ Refactored the AirDC++ download panel

* 🌜 Initial Dark Mode support

* 🌜 Trying dark mode on the react-select

* Update App.scss

* 🏗️ Migrating Navbar to TailwindCSS

* 🖼️ Added solar icons

* 🔧 Added solar icons

* 🔧 Added code for dark mode toggle

* 🏗️ Wiring up the dark mode toggle

* 🌜 Added Dark mode to the body

* 🏗️ Building out the import page

* 🪑 Cleaning up the table styles

* 🏗️ Cleaned up past imports table

* 🏗️ Refactored Import socket events

* 🏗️ Refactored the card grid on dashboard

* 🏗️ Building variants for Cards

* 🏗️ Added a horizontal medium variant

* 🏗️ Cleaning up forms and cards

* 🔧 Styling form inputs

* 🏗️ Form refactor

* 🔠 Added a monospace font

* 🪑 Refactoring the table

* 🧹 Formatting in connection confirmation panels

* 🏗️ Refactoring table for library

* 🏗️ Added icons and details to metadata

* 🏗️ Cleaned the table further

* 🏗️ Fixed fonts, and comic detail page first draft

* ❌ Removing yarn.lockfile

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -2,78 +2,137 @@ import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import prettyBytes from "pretty-bytes";
 import { isEmpty } from "lodash";
+import { format, parseISO } from "date-fns";
 
 export const RawFileDetails = (props): ReactElement => {
-  const { rawFileDetails, inferredMetadata } = props.data;
+  const { rawFileDetails, inferredMetadata, created_at, updated_at } =
+    props.data;
+  const PaperClipIcon = () => <></>;
   return (
     <>
-      <div className="comic-detail raw-file-details column is-three-fifths">
-        <dl>
-          <dt>Raw File Details</dt>
-          <dd className="is-size-7">
-            {rawFileDetails.containedIn +
-              "/" +
-              rawFileDetails.name +
-              rawFileDetails.extension}
-          </dd>
-          <dd>
-            <div className="field is-grouped mt-2">
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">Size</span>
-                  <span className="tag is-info is-light">
-                    {prettyBytes(rawFileDetails.fileSize)}
-                  </span>
-                </div>
-              </div>
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">Extension</span>
+      <div className="max-w-2xl ml-5">
+        <div className="px-4 sm:px-6">
+          <p className="text-gray-500">
+            <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">
+                Raw File Details
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900">
+                {rawFileDetails.containedIn +
+                  "/" +
+                  rawFileDetails.name +
+                  rawFileDetails.extension}
+              </dd>
+            </div>
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500">
+                Inferred Issue Metadata
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900">
+                Series Name: {inferredMetadata.issue.name}
+                {!isEmpty(inferredMetadata.issue.number) ? (
                   <span className="tag is-primary is-light">
-                    {rawFileDetails.extension}
+                    {inferredMetadata.issue.number}
                   </span>
-                </div>
-              </div>
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">MIME type</span>
-                  <span className="tag is-primary is-light">
+                ) : null}
+              </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">
+                {/* 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">
+                    <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
+                  </span>
+
+                  <span className="text-md text-slate-500 dark:text-slate-900">
                     {rawFileDetails.mimeType}
                   </span>
-                </div>
-              </div>
+                </span>
+              </dd>
+              <dd className="text-sm text-gray-900"></dd>
             </div>
-          </dd>
-        </dl>
-      </div>
-
-      <div className="content comic-detail raw-file-details mt-3 column is-three-fifths">
-        <dl>
-          {/* inferred metadata */}
-          <dt>Inferred Issue Metadata</dt>
-          <dd>
-            <div className="field is-grouped mt-2">
-              <div className="control">
-                <div className="tags has-addons">
-                  <span className="tag">Name</span>
-                  <span className="tag is-info is-light">
-                    {inferredMetadata.issue.name}
+            <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">
+                {/* 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">
+                    <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
                   </span>
-                </div>
-              </div>
-              {!isEmpty(inferredMetadata.issue.number) ? (
-                <div className="control">
-                  <div className="tags has-addons">
-                    <span className="tag">Number</span>
-                    <span className="tag is-primary is-light">
-                      {inferredMetadata.issue.number}
-                    </span>
-                  </div>
-                </div>
-              ) : null}
+
+                  <span className="text-md text-slate-500 dark:text-slate-900">
+                    {prettyBytes(rawFileDetails.fileSize)}
+                  </span>
+                </span>
+              </dd>
             </div>
-          </dd>
-        </dl>
+            <div className="sm:col-span-2">
+              <dt className="text-sm font-medium text-gray-500">
+                Import Details
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900">
+                {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>
+            </div>
+          </dl>
+        </div>
       </div>
     </>
   );
@@ -102,5 +161,7 @@ RawFileDetails.propTypes = {
         subtitle: PropTypes.string,
       }),
     }),
+    created_at: PropTypes.string,
+    updated_at: PropTypes.string,
   }),
-};
+};