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

@@ -16,6 +16,7 @@ interface IMetadatPanelProps {
   containerStyle: any;
 }
 export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
+  console.log(props);
   const {
     rawFileDetails,
     inferredMetadata,
@@ -78,6 +79,15 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                 {prettyBytes(rawFileDetails.fileSize)}
               </span>
             </span>
+
+            {/* Uncompressed version available? */}
+            {rawFileDetails.archive?.uncompressed && (
+              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                <span className="pr-1 pt-1">
+                  <i className="icon-[solar--bookmark-bold-duotone] w-3.5 h-3.5"></i>
+                </span>
+              </span>
+            )}
           </dd>
         </dl>
       ),
@@ -105,7 +115,6 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                 </span>
               </span>
             </dd>
-
             <dd className="is-size-7">
               <span>
                 {ellipsize(
@@ -118,42 +127,13 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                 )}
               </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}
-                    >
-                      {comicvine.volumeInformation.start_year}
-                    </span>
-                    <span
-                      className="tag is-success is-light"
-                      style={props.tagsStyle}
-                    >
-                      {comicvine.volumeInformation.count_of_issues}
-                    </span>
-                  </span>
-                </div>
-                <div className="control">
-                  <div className="tags has-addons">
-                    <span
-                      className="tag is-primary is-light"
-                      style={props.tagsStyle}
-                    >
-                      ComicVine ID
-                    </span>
-                    <span
-                      className="tag is-info is-light"
-                      style={props.tagsStyle}
-                    >
-                      {comicvine.id}
-                    </span>
-                  </div>
-                </div>
-              </div>
+              <span className="my-3 mx-2">
+                {comicvine.volumeInformation.start_year}
+              </span>
+              {comicvine.volumeInformation.count_of_issues}
+              ComicVine ID
+              {comicvine.id}
             </dd>
           </dl>
         ),