🎨 UX improvements

src/client/assets/scss/App.scss

@@ -14,8 +14,7 @@ $size-8: 0.9rem;
   font-size: $size-8;
 }
 
-
+// global style overrides
-// global style overrides 
 
 pre {
   border-radius: 0.5rem;
@@ -245,7 +244,19 @@ pre {
   }
 }
 
-// Import
+// raw file details
+.raw-file-details {
+  padding: 1rem;
+  background-color: beige;
+  border-radius: 0.5rem;
+}
+
+// comicvine metadata
+.comicvine-metadata {
+  background-color: #f2f1f9;
+  padding: 0.8rem;
+  border-radius: 0.5rem;
+}
 
 // Comic Detail
 .comic-detail {
@@ -315,12 +326,13 @@ pre {
 
 // Comic Detail
 .control-palette {
+  background-color: #fff6de;
   display: inline-block;
   i {
     display: flex;
-  justify-content: center;
+    justify-content: center;
-  align-items: center;
+    align-items: center;
-  // padding: 1.5rem 2rem;
+    // padding: 1.5rem 2rem;
   }
 }
 
@@ -389,7 +401,7 @@ pre {
 .potential-matches-container {
   .potential-issue-match {
     border-radius: 0.3rem;
-    background-color: $issue-color;
+    background-color: beige; 
     padding: 10px;
     pre {
       padding: 5px;

src/client/components/ComicDetail.tsx

@@ -235,12 +235,24 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                   orientation={"vertical"}
                   hasDetails={false}
                 />
+                {/* action dropdown */}
+                <div className="mt-4 is-size-7">
+                  <Menu
+                    data={comicBookDetailData}
+                    handlers={{ setSlidingPanelContentId, setVisible }}
+                  />
+                </div>
               </div>
               {/* raw file details */}
               <div className="column is-three-fifths">
                 {!isNil(comicBookDetailData.rawFileDetails) && (
                   <>
-                    <RawFileDetails data={comicBookDetailData.rawFileDetails} />
+                    <RawFileDetails
+                      data={{
+                        rawFileDetails: comicBookDetailData.rawFileDetails,
+                        inferredMetadata: comicBookDetailData.inferredMetadata,
+                      }}
+                    />
                   </>
                 )}
                 {/* comic vine scraped metadata */}
@@ -251,13 +263,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                   />
                 )}
               </div>
-              {/* action dropdown */}
-              <div className="column is-one-fifth is-narrow is-size-7">
-                <Menu
-                  data={comicBookDetailData}
-                  handlers={{ setSlidingPanelContentId, setVisible }}
-                />
-              </div>
             </div>
 
             {isComicBookMetadataAvailable ? <MetadataTabGroup /> : null}

src/client/components/ComicDetail/ComicVineDetails.tsx

@@ -7,7 +7,7 @@ import { isUndefined } from "lodash";
 export const ComicVineDetails = (props): ReactElement => {
   const { data, updatedAt } = props;
   return (
-    <div className="content comic-detail">
+    <div className="content comic-detail comicvine-metadata">
       <dl>
         <dt>ComicVine Metadata</dt>
         <dd className="is-size-7">
@@ -40,14 +40,14 @@ export const ComicVineDetails = (props): ReactElement => {
                   </span>
                 </div>
               </div>
-            ) : (
+            ) : data.resource_type ? (
               <div className="control">
                 <div className="tags has-addons">
                   <span className="tag is-light">Type</span>
                   <span className="tag is-warning">{data.resource_type}</span>
                 </div>
               </div>
-            )}
+            ) : null}
             <div className="control">
               <div className="tags has-addons">
                 <span className="tag is-light">ComicVine Issue ID</span>

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -1,15 +1,20 @@
 import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import prettyBytes from "pretty-bytes";
+import { isUndefined } from "lodash";
 
 export const RawFileDetails = (props): ReactElement => {
-  const { data } = props;
+  const { rawFileDetails, inferredMetadata } = props.data;
+  console.log(props);
   return (
-    <div className="content comic-detail">
+    <div className="content comic-detail raw-file-details">
       <dl>
         <dt>Raw File Details</dt>
         <dd className="is-size-7">
-          {data.containedIn + "/" + data.name + data.extension}
+          {rawFileDetails.containedIn +
+            "/" +
+            rawFileDetails.name +
+            rawFileDetails.extension}
         </dd>
         <dd>
           <div className="field is-grouped mt-2">
@@ -17,7 +22,7 @@ export const RawFileDetails = (props): ReactElement => {
               <div className="tags has-addons">
                 <span className="tag">Size</span>
                 <span className="tag is-info is-light">
-                  {prettyBytes(data.fileSize)}
+                  {prettyBytes(rawFileDetails.fileSize)}
                 </span>
               </div>
             </div>
@@ -25,12 +30,36 @@ export const RawFileDetails = (props): ReactElement => {
               <div className="tags has-addons">
                 <span className="tag">Extension</span>
                 <span className="tag is-primary is-light">
-                  {data.extension}
+                  {rawFileDetails.extension}
                 </span>
               </div>
             </div>
           </div>
         </dd>
+        {/* inferred metadata */}
+        <dd className="mt-3">
+          <dt>Inferred Issue Metadata</dt>
+          <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}
+                </span>
+              </div>
+            </div>
+            {!isUndefined(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}
+          </div>
+        </dd>
       </dl>
     </div>
   );
@@ -40,13 +69,23 @@ export default RawFileDetails;
 
 RawFileDetails.propTypes = {
   data: PropTypes.shape({
-    containedIn: PropTypes.string,
+    rawFileDetails: PropTypes.shape({
-    name: PropTypes.string,
+      containedIn: PropTypes.string,
-    fileSize: PropTypes.number,
+      name: PropTypes.string,
-    path: PropTypes.string,
+      fileSize: PropTypes.number,
-    extension: PropTypes.string,
+      path: PropTypes.string,
-    cover: PropTypes.shape({
+      extension: PropTypes.string,
-      filePath: PropTypes.string,
+      cover: PropTypes.shape({
+        filePath: PropTypes.string,
+      }),
+    }),
+    inferredMetadata: PropTypes.shape({
+      issue: PropTypes.shape({
+        year: PropTypes.string,
+        name: PropTypes.string,
+        number: PropTypes.number,
+        subtitle: PropTypes.string,
+      }),
     }),
   }),
 };

src/client/components/DnD.tsx

@@ -69,6 +69,9 @@ export const DnD = (data) => {
                     <span className="icon is-small mr-2">
                       <i className="fa-solid fa-vial"></i>
                     </span>
+                    <span className="icon is-small mr-2">
+                      <i className="fa-solid fa-bullseye"></i>
+                    </span>
                     <span className="icon is-small mr-2">
                       <i className="fa-regular fa-trash-can"></i>
                     </span>

src/client/components/VolumeDetail/VolumeDetail.tsx

@@ -87,7 +87,7 @@ const VolumeDetails = (props): ReactElement => {
                   borderColorClass={
                     !isEmpty(issue.matches) ? "green-border" : ""
                   }
-                  backgroundColor={!isEmpty(issue.matches) ? "#e0f5d0" : ""}
+                  backgroundColor={!isEmpty(issue.matches) ? "beige" : ""}
                   onClick={() =>
                     openPotentialLibraryMatchesPanel(issue.matches)
                   }
@@ -97,7 +97,7 @@ const VolumeDetails = (props): ReactElement => {
                       <span className="icon has-text-success">
                         <i className="fa-regular fa-clone"></i>
                       </span>
-                      <span className="tag is-light is-warning is-size-7">
+                      <span className="tag is-success is-size-7">
                         {"#" + issue.issue_number}
                       </span>
                     </>