💄 CV Match drawer beautification

src/client/components/Card.tsx

@@ -21,7 +21,7 @@ class Card extends React.Component<IProps, IState> {
   ): JSX.Element => {
     return (
       <div>
-        <div className="card">
+        <div className="card generic-card">
           <div>
             <div className="card-image">
               <figure className="image">

src/client/components/ComicDetail.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, ReactElement } from "react";
 import { useParams } from "react-router-dom";
 import axios from "axios";
 import Card from "./Card";
@@ -13,15 +13,19 @@ import { useDispatch, useSelector } from "react-redux";
 
 type ComicDetailProps = {};
 
-export const ComicDetail = ({}: ComicDetailProps) => {
+export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const [page, setPage] = useState(1);
   const [visible, setVisible] = useState(false);
   const [comicDetail, setComicDetail] = useState<{
     rawFileDetails: IExtractedComicBookCoverFile;
   }>();
+
   const comicVineSearchResults = useSelector(
     (state: RootState) => state.comicInfo.searchResults,
   );
+  const comicVineSearchQueryObject = useSelector(
+    (state: RootState) => state.comicInfo.searchQuery,
+  );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
 
   useEffect(() => {
@@ -45,7 +49,7 @@ export const ComicDetail = ({}: ComicDetailProps) => {
   const openDrawerWithCVMatches = useCallback(() => {
     setVisible(true);
     dispatch(fetchComicVineMatches(comicDetail));
-  }, [dispatch, comicDetail, comicVineSearchResults]);
+  }, [dispatch, comicDetail]);
 
   const onClose = () => {
     setVisible(false);
@@ -77,7 +81,41 @@ export const ComicDetail = ({}: ComicDetailProps) => {
             closable={false}
             onClose={onClose}
             visible={visible}
+            className="comic-vine-match-drawer"
           >
+            {!isEmpty(comicVineSearchQueryObject) &&
+            !isUndefined(comicVineSearchQueryObject) ? (
+              <div className="card search-criteria-card">
+                <div className="card-content">
+                  <p className="is-size-6">Searching against:</p>
+                  <div className="field is-grouped is-grouped-multiline">
+                    <div className="control">
+                      <div className="tags has-addons">
+                        <span className="tag">Title</span>
+                        <span className="tag is-info">
+                          {
+                            comicVineSearchQueryObject.issue.searchParams
+                              .searchTerms.name
+                          }
+                        </span>
+                      </div>
+                    </div>
+                    <div className="control">
+                      <div className="tags has-addons">
+                        <span className="tag">Number</span>
+                        <span className="tag is-info">
+                          {
+                            comicVineSearchQueryObject.issue.searchParams
+                              .searchTerms.number
+                          }
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
             <div className="search-results-container">
               {!isEmpty(comicVineSearchResults) && (
                 <MatchResult matchData={comicVineSearchResults} />

src/client/components/MatchResult.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { IComicVineSearchMatch, IFolderData } from "threetwo-ui-typings";
+import React, { useEffect } from "react";
 import { map } from "lodash";
 
 interface MatchResultProps {
@@ -27,8 +26,26 @@ export const MatchResult = (props: MatchResultProps) => {
                   <img className="cover-image" src={match.image.thumb_url} />
                 </td>
                 <td className="search-result-details">
-                  <h4>{match.name}</h4>
-                  <h5>{match.volume.name}</h5>
+                  <div className="is-size-5">{match.name}</div>
+                  <div className="is-size-6">{match.volume.name}</div>
+                  <div className="field is-grouped is-grouped-multiline">
+                    <div className="control">
+                      <div className="tags has-addons">
+                        <span className="tag">Number</span>
+                        <span className="tag is-primary">
+                          {match.issue_number}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="control">
+                      <div className="tags has-addons">
+                        <span className="tag">Type</span>
+                        <span className="tag is-warning">
+                          {match.resource_type}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
                 </td>
               </tr>
             );