💅🏽 Beautifying the import UI

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",
       },

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>

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(

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>
-
+        <div className="columns is-multiline">
-        <pre>{JSON.stringify(libraryQueueResults, null, 2)}</pre>
+          <div className="column is-one-fifth">
-        <button className="button is-warning" onClick={toggleImport}>
+            <div className="box control-palette">
-          Pause Queue
+              <span className="is-size-2 has-text-weight-bold">
-        </button>
+                {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>
   );