🛻 Upgraded deps, fixed issues

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