🛻 Upgraded deps, fixed issues

src/client/components/App.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useEffect } from "react";
 import { Outlet } from "react-router-dom";
 import { Navbar2 } from "./shared/Navbar2";
 import { ToastContainer } from "react-toastify";
-import "../assets/scss/App.scss";
+import "../assets/scss/App.css";
 import { useStore } from "../store";
 
 export const App = (): ReactElement => {

src/client/components/ComicDetail/ComicDetail.tsx

@@ -21,7 +21,6 @@ import { components } from "react-select";
 import { RootState } from "threetwo-ui-typings";
 
 import "react-sliding-pane/dist/react-sliding-pane.css";
-import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import Loader from "react-loader-spinner";
 import SlidingPane from "react-sliding-pane";
 import Modal from "react-modal";

src/client/components/Dashboard/RecentlyImported.tsx

@@ -67,6 +67,8 @@ export const RecentlyImported = (
             const isComicVineMetadataAvailable =
               !isUndefined(comicvine) &&
               !isUndefined(comicvine.volumeInformation);
+            const hasComicInfo = !isNil(comicInfo) && !isEmpty(comicInfo);
+            const cardState = (hasComicInfo || isComicVineMetadataAvailable) ? "scraped" : "imported";
             return (
               <div
                 key={idx}
@@ -77,6 +79,7 @@ export const RecentlyImported = (
                   imageUrl={url}
                   title={inferredMetadata.issue.name}
                   hasDetails
+                  cardState={cardState}
                 >
                 <div>
                   <dd className="text-sm my-1 flex flex-row gap-1">
@@ -115,7 +118,7 @@ export const RecentlyImported = (
                     {/* ComicInfo.xml presence */}
                     {!isNil(comicInfo) && !isEmpty(comicInfo) && (
                       <div className="mt-1">
-                        <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-yellow-500 dark:text-yellow-300"></i>
+                        <i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-gray-500 dark:text-white-300"></i>
                       </div>
                     )}
                     {/* ComicVine metadata presence */}

src/client/components/Dashboard/WantedComicsList.tsx

@@ -59,6 +59,7 @@ export const WantedComicsList = ({
                 imageUrl={url}
                 hasDetails
                 title={issueName ? titleElement : <span>No Name</span>}
+                cardState="wanted"
               >
                 <div className="pb-1">
                   <div className="flex flex-row gap-2">

src/client/components/Import/Import.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement, useCallback, useEffect, useState } from "react";
-import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import { format } from "date-fns";
 import Loader from "react-loader-spinner";
 import { isEmpty, isNil, isUndefined } from "lodash";
@@ -55,7 +54,6 @@ export const Import = (props: IProps): ReactElement => {
         url: "http://localhost:3000/api/jobqueue/getJobResultStatistics",
         params: { _t: Date.now() }, // Cache busting
       });
-      console.log("Fetched import results:", response.data);
       return response;
     },
     refetchOnWindowFocus: false,
@@ -69,13 +67,11 @@ export const Import = (props: IProps): ReactElement => {
     
     // Listen for import queue drained event to refresh the table
     const handleQueueDrained = () => {
-      console.log("Import queue drained, refreshing table...");
       refetch();
     };
 
     // Listen for individual import completions to refresh the table
     const handleCoverExtracted = () => {
-      console.log("Cover extracted, refreshing table...");
       refetch();
     };
 
@@ -97,7 +93,6 @@ export const Import = (props: IProps): ReactElement => {
         queueAction,
         queueStatus,
       },
-      (data: any) => console.log(data),
     );
   };
   /**

src/client/components/shared/Carda.tsx

@@ -10,11 +10,29 @@ interface ICardProps {
   children?: PropTypes.ReactNodeLike;
   borderColorClass?: string;
   backgroundColor?: string;
+  cardState?: "wanted" | "delete" | "scraped" | "uncompressed" | "imported";
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-  cardContainerStyle?: PropTypes.object;
-  imageStyle?: PropTypes.object;
+  cardContainerStyle?: React.CSSProperties;
+  imageStyle?: React.CSSProperties;
 }
 
+const getCardStateClass = (cardState?: string): string => {
+  switch (cardState) {
+    case "wanted":
+      return "bg-card-wanted";
+    case "delete":
+      return "bg-card-delete";
+    case "scraped":
+      return "bg-card-scraped";
+    case "uncompressed":
+      return "bg-card-uncompressed";
+    case "imported":
+      return "bg-card-imported";
+    default:
+      return "";
+  }
+};
+
 const renderCard = (props: ICardProps): ReactElement => {
   switch (props.orientation) {
     case "horizontal":
@@ -83,7 +101,7 @@ const renderCard = (props: ICardProps): ReactElement => {
 
     case "vertical-2":
       return (
-        <div className="block rounded-md max-w-64 h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500">
+        <div className={`block rounded-md max-w-64 h-fit shadow-md shadow-white-400 ${getCardStateClass(props.cardState) || "bg-gray-200 dark:bg-slate-500"}`}>
           <img
             alt="Home"
             src={props.imageUrl}
@@ -109,7 +127,7 @@ const renderCard = (props: ICardProps): ReactElement => {
     case "horizontal-small":
       return (
         <>
-          <div className="flex flex-row justify-start align-top gap-3 bg-slate-200 h-fit rounded-md shadow-md shadow-white-400">
+          <div className={`flex flex-row justify-start align-top gap-3 h-fit rounded-md shadow-md shadow-white-400 ${getCardStateClass(props.cardState) || "bg-slate-200"}`}>
             {/* thumbnail */}
             <div className="rounded-md overflow-hidden">
               <img src={props.imageUrl} className="object-cover h-20 w-20" />
@@ -125,7 +143,7 @@ const renderCard = (props: ICardProps): ReactElement => {
     case "horizontal-medium":
       return (
         <>
-          <div className="flex flex-row items-center align-top gap-3 bg-slate-200 h-fit p-2 rounded-md shadow-md shadow-white-400">
+          <div className={`flex flex-row items-center align-top gap-3 h-fit p-2 rounded-md shadow-md shadow-white-400 ${getCardStateClass(props.cardState) || "bg-slate-200"}`}>
             {/* thumbnail */}
             <div className="rounded-md overflow-hidden">
               <img src={props.imageUrl} />

src/client/components/shared/MetadataPanel.tsx

@@ -31,7 +31,7 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
     {
       name: "rawFileDetails",
       content: () => (
-        <dl className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg">
+        <dl className="dark:bg-card-imported bg-card-imported dark:text-slate-800 p-3 rounded-lg">
           <dt>
             <p className="text-lg">{issueName}</p>
           </dt>

src/client/components/shared/T2Table.tsx

@@ -113,15 +113,15 @@ export const T2Table = (tableOptions: T2TableProps): ReactElement => {
         </div>
       </div>
 
-      <table className="table-auto w-full text-sm text-gray-900 dark:text-slate-100 border-separate border-spacing-0">
-        <thead className="sticky top-0 bg-white dark:bg-slate-900 z-10 border-b border-gray-300 dark:border-slate-700">
-          {table.getHeaderGroups().map((headerGroup) => (
+      <table className="table-auto w-full text-sm text-gray-900 dark:text-slate-100">
+        <thead className="sticky top-0 z-10 bg-white dark:bg-slate-900">
+          {table.getHeaderGroups().map((headerGroup, groupIndex) => (
             <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
+              {headerGroup.headers.map((header, index) => (
                 <th
                   key={header.id}
                   colSpan={header.colSpan}
-                  className="px-3 py-2 text-[11px] font-semibold tracking-wide uppercase text-left text-gray-500 dark:text-slate-400"
+                  className="px-3 py-2 text-[11px] font-semibold tracking-wide uppercase text-left text-gray-500 dark:text-slate-400 border-b border-gray-300 dark:border-slate-700"
                 >
                   {header.isPlaceholder
                     ? null
@@ -136,11 +136,11 @@ export const T2Table = (tableOptions: T2TableProps): ReactElement => {
         </thead>
 
         <tbody>
-          {table.getRowModel().rows.map((row) => (
+          {table.getRowModel().rows.map((row, rowIndex) => (
             <tr
               key={row.id}
               onClick={() => rowClickHandler(row)}
-              className="border-b border-gray-200 dark:border-slate-700 hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
+              className="border-b border-gray-200 dark:border-slate-700 hover:bg-slate-100/30 dark:hover:bg-slate-700/20 transition-colors cursor-pointer"
             >
               {row.getVisibleCells().map((cell) => (
                 <td key={cell.id} className="px-3 py-2 align-top">