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/shared/MetadataPanel.tsx

@@ -31,61 +31,53 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
     {
       name: "rawFileDetails",
       content: () => (
-        <dl>
+        <dl className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg">
           <dt>
-            <h6
-              className="name has-text-weight-medium mb-1"
-              style={props.titleStyle}
-            >
-              {issueName}
-            </h6>
+            <p className="text-lg">{issueName}</p>
           </dt>
-          <dd className="is-size-7">
-            Is a part of{" "}
-            <span className="has-text-weight-semibold">
+          <dd className="text-sm">
+            is a part of{" "}
+            <span className="underline">
               {inferredMetadata.issue.name}
+              <i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
             </span>
           </dd>
 
-          <dd className="is-size-7 mt-2">
-            <div className="field is-grouped is-grouped-multiline">
-              <div className="control">
-                <span className="tags">
-                  <span
-                    className="tag is-success is-light has-text-weight-semibold"
-                    style={props.tagsStyle}
-                  >
-                    {rawFileDetails.extension}
-                  </span>
-                  <span
-                    className="tag is-success is-light has-text-weight-semibold"
-                    style={props.tagsStyle}
-                  >
-                    {rawFileDetails.mimeType}
-                  </span>
-                  <span
-                    className="tag is-success is-light"
-                    style={props.tagsStyle}
-                  >
-                    {prettyBytes(rawFileDetails.fileSize)}
-                  </span>
+          {/* Issue number */}
+          {inferredMetadata.issue.number && (
+            <dd className="my-2">
+              <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--hashtag-outline] w-3.5 h-3.5"></i>
                 </span>
-              </div>
-              <div className="control">
-                {inferredMetadata.issue.number && (
-                  <div className="tags has-addons">
-                    <span className="tag is-light" style={props.tagsStyle}>
-                      Issue #
-                    </span>
-                    <span className="tag is-warning" style={props.tagsStyle}>
-                      {inferredMetadata.issue.number}
-                    </span>
-                  </div>
-                )}
-              </div>
+                <span className="text-md text-slate-900 dark:text-slate-900">
+                  {inferredMetadata.issue.number}
+                </span>
+              </span>
+            </dd>
+          )}
+          <dd className="flex flex-row gap-2 w-max">
+            {/* 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>
 
-            </div>
-            
+              <span className="text-md text-slate-500 dark:text-slate-900">
+                {rawFileDetails.mimeType}
+              </span>
+            </span>
+
+            {/* 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>
+
+              <span className="text-md text-slate-500 dark:text-slate-900">
+                {prettyBytes(rawFileDetails.fileSize)}
+              </span>
+            </span>
           </dd>
         </dl>
       ),
@@ -208,25 +200,14 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
   });
 
   return (
-    <div className="column" style={props.containerStyle}>
-      <div className="comic-detail issue-metadata">
-        <dl>
-          <dd>
-            <div className="columns mt-2">
-              <div className="column is-3">
-                <Card
-                  imageUrl={url}
-                  orientation={"vertical"}
-                  hasDetails={false}
-                  imageStyle={props.imageStyle}
-                // cardContainerStyle={{ maxWidth: 200 }}
-                />
-              </div>
-              <div className="column">{metadataPanel.content()}</div>
-            </div>
-          </dd>
-        </dl>
-      </div>
+    <div className="flex gap-5 my-3">
+      <Card
+        imageUrl={url}
+        orientation={"cover-only"}
+        hasDetails={false}
+        imageStyle={props.imageStyle}
+      />
+      <div>{metadataPanel.content()}</div>
     </div>
   );
 };