From ad12c05514b57bb6aaad3f60e9165e8446836132 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Thu, 4 Jan 2024 09:17:35 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8C=EF=B8=8F=20Cleaned=20up=20the=20fo?=
 =?UTF-8?q?rm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ComicDetail/ComicVineMatchPanel.tsx         | 17 ++++++++++++++++-
 .../ComicDetail/ComicVineSearchForm.tsx         | 10 +++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/client/components/ComicDetail/ComicVineMatchPanel.tsx b/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
index e65f20a..750b5e9 100644
--- a/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
+++ b/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
@@ -21,7 +21,22 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
             comicObjectId={comicObjectId}
           />
         ) : (
-          <div className="text-md my-5">{comicvine.scrapingStatus}</div>
+          <>
+            <article
+              role="alert"
+              className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600 text-sm"
+            >
+              <div>
+                <p>ComicVine match results are an approximation.</p>
+                <p>
+                  Auto-matching is not available yet. If you see no results or
+                  poor quality ones, you can override the search query
+                  parameters to get better ones.
+                </p>
+              </div>
+            </article>
+            <div className="text-md my-5">{comicvine.scrapingStatus}</div>
+          </>
         )}
       </div>
     </>
diff --git a/src/client/components/ComicDetail/ComicVineSearchForm.tsx b/src/client/components/ComicDetail/ComicVineSearchForm.tsx
index cd5c37a..e6883fd 100644
--- a/src/client/components/ComicDetail/ComicVineSearchForm.tsx
+++ b/src/client/components/ComicDetail/ComicVineSearchForm.tsx
@@ -45,7 +45,7 @@ export const ComicVineSearchForm = (data) => {
             {(props) => (
               <input
                 {...props.input}
-                className="appearance-none dark:bg-slate-400 bg-slate-100 h-10 w-full rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-full rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
                 placeholder="Type the issue name"
               />
             )}
@@ -57,8 +57,8 @@ export const ComicVineSearchForm = (data) => {
                 {(props) => (
                   <input
                     {...props.input}
-                    className="appearance-none dark:bg-slate-400 bg-slate-100 h-10 w-14 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                    placeholder="Type the issue number"
+                    className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-14 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                    placeholder="#"
                   />
                 )}
               </Field>
@@ -69,8 +69,8 @@ export const ComicVineSearchForm = (data) => {
                 {(props) => (
                   <input
                     {...props.input}
-                    className="appearance-none dark:bg-slate-400 bg-slate-100 h-10 w-20 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                    placeholder="Type the issue year"
+                    className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-20 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                    placeholder="1984"
                   />
                 )}
               </Field>