💄 CV Match drawer beautification

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>
             );