🖌 Beautifying CV matches WIP

src/client/assets/scss/App.scss

@@ -346,6 +346,9 @@ $size-8: 0.9rem;
 
   .search-result {
     margin: 0 0 10px 0;
+    padding: 1em;
+    border-radius: 10px;
+    background: #F2F1F9;
     .cover-image {
       border-radius: 5px;
     }
@@ -357,19 +360,20 @@ $size-8: 0.9rem;
       }
     }
     .volume-information {
-      margin-top: -2em;
+      margin-top: -2.5em;
       width: 80%;
-      background: $white-ter;
+      background: #FDECD1;
       border-radius: 10px;
     }
     .vertical-line {
       position: relative;
-      top: -10px;
+      top: -25px;
-      border: 1px solid #CCC;
+      left: 1.5rem;
+      border: 2px dotted #CCC;
       width:20px;
-      height:25px;
+      min-height:25px;
       
-    border-color: transparent transparent #999 #999;
+    border-color: transparent transparent #F3A22D #F3A22D;
       border-bottom-left-radius: 10px;
   }
   

src/client/components/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx

@@ -7,9 +7,7 @@ export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
     <div className="mt-4 is-clearfix">
       <div className="card">
         <div className="card-content">
-          <span className="icon is-medium is-pulled-right">
+          <span className="tag is-pulled-right is-primary">Connected</span>
-            <i className="fa-solid fa-circle has-text-success"></i>
-          </span>
           <div className="content is-size-7">
             <dl>
               <dt>{settings._id}</dt>

src/client/components/MatchResult.tsx

@@ -25,7 +25,7 @@ export const MatchResult = (props: MatchResultProps) => {
     <>
       {map(props.matchData, (match, idx) => {
         return (
-          <div className="search-result">
+          <div className="search-result mb-4">
             <div className="columns">
               <div className="column is-one-fifth">
                 <img
@@ -36,7 +36,6 @@ export const MatchResult = (props: MatchResultProps) => {
               </div>
 
               <div className="search-result-details column">
-                
                 <div className="is-size-5">{match.name}</div>
 
                 <div className="field is-grouped is-grouped-multiline mt-1">
@@ -55,21 +54,15 @@ export const MatchResult = (props: MatchResultProps) => {
                     </div>
                   </div>
                 </div>
-                <button
+                <div className="is-size-7">
-                  className="button mt-6 is-small is-outlined is-primary is-light is-pulled-right"
+                  {match.deck}
-                  onClick={() => applyCVMatch(match, props.comicObjectId)}
+                </div>
-                >
-                  <span className="icon is-size-5">
-                    <i className="fas fa-clipboard-check"></i>
-                  </span>
-                  <span>Apply Match</span>
-                </button>
               </div>
             </div>
 
             <div className="vertical-line"></div>
 
-            <div className="columns ml-5 volume-information">
+            <div className="columns ml-6 volume-information">
               <div className="column is-one-fifth">
                 <img
                   src={match.volumeInformation.results.image.icon_url}
@@ -79,9 +72,8 @@ export const MatchResult = (props: MatchResultProps) => {
               </div>
 
               <div className="column">
-              <div className="is-size-6">{match.volume.name}</div>
+                <div className="is-size-6">{match.volume.name}</div>
                 <div className="field is-grouped is-grouped-multiline mt-2">
-                  
                   <div className="control">
                     <div className="tags has-addons">
                       <span className="tag">Total Issues</span>
@@ -100,9 +92,21 @@ export const MatchResult = (props: MatchResultProps) => {
                     </div>
                   </div>
                 </div>
-
-                
               </div>
+              
+            </div>
+            <div className="columns">
+              <div className="column">
+            <button
+                  className="button is-normal is-outlined is-primary is-light is-pulled-right"
+                  onClick={() => applyCVMatch(match, props.comicObjectId)}
+                >
+                  <span className="icon is-size-5">
+                    <i className="fas fa-clipboard-check"></i>
+                  </span>
+                  <span>Apply Match</span>
+                </button>
+                </div>
             </div>
           </div>
         );

src/client/shared/utils/filenameparser.utils.ts

@@ -132,7 +132,7 @@ export const tokenize = (inputString: string) => {
   }
 
   // replace special characters with... nothing
-  inputString = inputString.replace(/[^a-zA-Z0-9 ]/gm, "");
+  inputString = inputString.replace(/[^a-zA-Z0-9(\+?\s?\-?\'?)]/gm, "");
 
   // regexes to match constituent parts of the search string
   // and isolate the search terms
@@ -152,8 +152,8 @@ export const tokenize = (inputString: string) => {
 
   inputString.replace(/([^\d]+)(\s*(of|de|di|von|van|z)\s*#*\d+)/gi, "");
 
-  inputString = voca.replace(inputString, /_.-# /gi, "");
+  // inputString = voca.replace(inputString, /_.-# /gi, "");
-  inputString = nlp(inputString).text("normal").trim();
+  // inputString = nlp(inputString).text("normal").trim();
 
   const sentenceToProcess = sentence[0].normal.replace(/_/g, " ");
   const normalizedSentence = nlp(sentenceToProcess)
@@ -161,6 +161,7 @@ export const tokenize = (inputString: string) => {
     .trim()
     .split(" ");
 
+  console.log(inputString)
   const queryObject = {
     comicbook_identifier_tokens: {
       inputString,