From b1b4070867ccccc29d96dcb81e0e6e89272a4a68 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Fri, 18 Mar 2022 09:35:26 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=F0=9F=8F=BD=20Beautifying=20the=20?=
 =?UTF-8?q?import=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/comicinfo.actions.tsx      |  2 +-
 src/client/assets/img/comicinfoxml.svg        |  6 +++
 .../components/Dashboard/RecentlyImported.tsx |  6 +++
 src/client/components/Import.tsx              | 37 ++++++++++++++++---
 4 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 src/client/assets/img/comicinfoxml.svg

diff --git a/src/client/actions/comicinfo.actions.tsx b/src/client/actions/comicinfo.actions.tsx
index 818a7c9..6829c6b 100644
--- a/src/client/actions/comicinfo.actions.tsx
+++ b/src/client/actions/comicinfo.actions.tsx
@@ -43,7 +43,7 @@ export const getWeeklyPullList = (options) => async (dispatch) => {
       url: `${COMICVINE_SERVICE_URI}/getWeeklyPullList`,
       method: "get",
       params: {
-        startDate: "2022-3-7",
+        startDate: "2022-3-21",
         pageSize: "15",
         currentPage: "1",
       },
diff --git a/src/client/assets/img/comicinfoxml.svg b/src/client/assets/img/comicinfoxml.svg
new file mode 100644
index 0000000..68c93bb
--- /dev/null
+++ b/src/client/assets/img/comicinfoxml.svg
@@ -0,0 +1,6 @@
+<svg width="384" height="512" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path id="Path" fill="#ff634d" fill-rule="evenodd" stroke="#646464" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" d="M 215.786591 23.351563 C 215.786591 23.351563 98.801674 21.473022 81.803864 21.200073 C 21.811596 20.236725 23.297552 52.264709 22.462652 104.258026 C 21.073503 190.766876 22.587183 312.129272 22.115429 437.295349 C 21.974922 474.574432 57.495609 491.702881 94.239006 492.460449 C 172.222427 494.068359 287.278351 491.559753 287.278351 491.559753 C 287.278351 491.559753 361.530945 494.731964 361.601563 409.742523 C 361.689667 303.742554 361.407318 172.708862 361.407318 172.708862 L 215.786591 23.351563 L 215.786591 23.351563 Z"/>
+    <path id="Shape" fill="none" stroke="#ffffff" stroke-width="32" stroke-linecap="round" stroke-linejoin="round" d="M 110 270 L 264 270 M 162 321 L 220 321"/>
+    <path id="Line" fill="none" stroke="#ffffff" stroke-width="33" stroke-linecap="round" stroke-linejoin="round" d="M 110 375 L 264 374.999084"/>
+    <path id="path1" fill="none" stroke="#646464" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" d="M 207 23 L 208 175 L 349 175"/>
+</svg>
diff --git a/src/client/components/Dashboard/RecentlyImported.tsx b/src/client/components/Dashboard/RecentlyImported.tsx
index 00137ab..605d33c 100644
--- a/src/client/components/Dashboard/RecentlyImported.tsx
+++ b/src/client/components/Dashboard/RecentlyImported.tsx
@@ -80,6 +80,12 @@ export const RecentlyImported = ({
                       <img src="/img/missing-file.svg" />
                     </span>
                   )}
+                  {/* ComicInfo.xml presence */}
+                  {!isNil(sourcedMetadata.comicInfo) && (
+                    <span className="icon custom-icon is-small has-text-danger">
+                      <img src="/img/comicinfoxml.svg" />
+                    </span>
+                  )}
                   {/* Issue type */}
                   {isComicBookMetadataAvailable &&
                   !isNil(
diff --git a/src/client/components/Import.tsx b/src/client/components/Import.tsx
index 9411c0b..1a28cb2 100644
--- a/src/client/components/Import.tsx
+++ b/src/client/components/Import.tsx
@@ -51,7 +51,16 @@ export const Import = (props: IProps): ReactElement => {
       dispatch(toggleImportQueueStatus({ action: "pause" }));
     }
   }, [isImportQueuePaused]);
-
+  const pauseIconText = (
+    <>
+      <i className="fa-solid fa-pause mr-2"></i> Pause Import
+    </>
+  );
+  const playIconText = (
+    <>
+      <i className="fa-solid fa-play mr-2"></i> Resume Import
+    </>
+  );
   return (
     <div className="container">
       <section className="section is-small">
@@ -96,11 +105,27 @@ export const Import = (props: IProps): ReactElement => {
             <span>Import and Tag</span>
           </button>
         </p>
-
-        <pre>{JSON.stringify(libraryQueueResults, null, 2)}</pre>
-        <button className="button is-warning" onClick={toggleImport}>
-          Pause Queue
-        </button>
+        <div className="columns is-multiline">
+          <div className="column is-one-fifth">
+            <div className="box control-palette">
+              <span className="is-size-2 has-text-weight-bold">
+                {JSON.stringify(libraryQueueResults, null, 2)}
+              </span>
+            </div>
+            <div className="is-half">
+              <div className="content">
+                <div className="control">
+                  <button
+                    className="button is-warning is-light"
+                    onClick={toggleImport}
+                  >
+                    {isImportQueuePaused ? pauseIconText : playIconText}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </section>
     </div>
   );