🤼 Cleaning up CV match panel

src/client/components/ComicDetail/ComicDetail.tsx

@@ -29,6 +29,7 @@ import ComicViewer from "react-comic-viewer";
 import { extractComicArchive } from "../../actions/fileops.actions";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import axios from "axios";
+import { styled } from "styled-components";
 import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
 import { refineQuery } from "filename-parser";
 
@@ -92,6 +93,10 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     // );
   }, []);
 
+  // overridden <SlidingPanel> with some styles
+  const StyledSlidingPanel = styled(SlidingPane)`
+    background: #ccc;
+  `;
   const afterOpenModal = useCallback((things) => {
     // references are now sync'd and can be accessed.
     // subtitle.style.color = "#f00";
@@ -108,9 +113,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
       content: (props) => (
         <>
           <div>
-            <div className="card-content">
+            <ComicVineSearchForm data={rawFileDetails} />
-              <ComicVineSearchForm data={rawFileDetails} />
-            </div>
           </div>
           <p className="is-size-5 mt-3 mb-2 ml-3">Searching for:</p>
           {inferredMetadata.issue ? (
@@ -460,7 +463,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
               downloadCount={acquisition?.directconnect?.downloads?.length}
             />
 
-            <SlidingPane
+            <StyledSlidingPanel
               isOpen={visible}
               onRequestClose={() => setVisible(false)}
               title={"Comic Vine Search Matches"}
@@ -468,7 +471,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
             >
               {slidingPanelContentId !== "" &&
                 contentForSlidingPanel[slidingPanelContentId].content()}
-            </SlidingPane>
+            </StyledSlidingPanel>
           </>
         )}
       </div>

src/client/components/ComicDetail/MatchResult.tsx

@@ -38,49 +38,62 @@ export const MatchResult = (props: MatchResultProps) => {
         }
         return (
           <div className="mb-4" key={idx}>
-            <div className="flex flex-row">
+            <div className="flex flex-row gap-4">
-              <div className="w-full mr-2">
+              <div className="min-w-fit">
                 <img
                   className="rounded-md"
                   src={match.image.thumb_url}
                   onError={handleBrokenImage}
                 />
               </div>
-              <div>
+              <div className="">
-                <div className="">{match.name}</div>
+                {match.name ? <p className="text-md">{match.name}</p> : null}
-                <span>Number</span>
+                <span className="flex flex-row gap-2 mb-2">
-                <span>{match.issue_number}</span>
+                  <span className="inline-flex items-center bg-slate-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                <span className="tag">Cover Date</span>
+                    <span className="pr-1 pt-1">
-                <span className="tag is-warning">{match.cover_date}</span>
+                      <i className="icon-[solar--hashtag-outline] w-4 h-4"></i>
+                    </span>
+                    <span className="text-slate-900 dark:text-slate-900">
+                      {parseInt(match.issue_number, 10)}
+                    </span>
+                  </span>
+                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--calendar-mark-bold-duotone] w-5 h-5"></i>
+                    </span>
+                    <span className="text-slate-900 dark:text-slate-900">
+                      Cover Date: {match.cover_date}
+                    </span>
+                  </span>
+                </span>
                 <div className="text-sm">
                   {ellipsize(issueDescription, 300)}
                 </div>
               </div>
             </div>
 
-            <div className="">
+            <div className="flex flex-row gap-2 my-4 ml-10">
               <div className="">
                 <img
                   src={match.volumeInformation.results.image.icon_url}
-                  className="cover-image"
+                  className="rounded-md w-full"
                   onError={handleBrokenImage}
                 />
               </div>
 
               <div className="">
-                <div className="">{match.volume.name}</div>
+                <span>{match.volume.name}</span>
-                <div className="">
+                <div className="text-sm">
-                  <span className="">Total Issues</span>
+                  <p>
-                  <span className="">
+                    Total Issues:
                     {match.volumeInformation.results.count_of_issues}
-                  </span>
+                  </p>
+                  <p>
+                    Publisher:
+                    {match.volumeInformation.results.publisher.name}
+                  </p>
                 </div>
               </div>
-
-              <span className="tag">Publisher</span>
-              <span className="tag is-warning">
-                {match.volumeInformation.results.publisher.name}
-              </span>
             </div>
             <button
               className="button is-normal is-outlined is-primary is-light is-pulled-right"

src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx

@@ -20,11 +20,11 @@ export const ComicInfoXML = (data): ReactElement => {
           {/* Issue number */}
           {!isUndefined(json.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="inline-flex items-center bg-slate-50 text-sm text-slate-800 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-4 h-4"></i>
                 </span>
-                <span className="text-md text-slate-900 dark:text-slate-900">
+                <span className="text-slate-900 dark:text-slate-900">
                   {parseInt(json.number[0], 10)}
                 </span>
               </span>
@@ -32,12 +32,12 @@ export const ComicInfoXML = (data): ReactElement => {
           )}
           <dd className="my-2">
             {/* Genre */}
-            <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="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
               <span className="pr-1 pt-1">
                 <i className="icon-[solar--sticker-smile-circle-bold-duotone] w-5 h-5"></i>
               </span>
 
-              <span className="text-md text-slate-500 dark:text-slate-900">
+              <span className="text-slate-500 dark:text-slate-900">
                 {json.genre[0]}
               </span>
             </span>