src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -116,8 +116,8 @@ export const DownloadsPanel = (
               href="#"
               className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
                 activeTab === "directconnect"
-                  ? "bg-slate-200 text-slate-800"
+                  ? "bg-slate-200 dark:text-slate-200 dark:bg-slate-400 text-slate-800"
-                  : "text-slate-200"
+                  : "dark:text-slate-400 text-slate-800"
               }`}
               aria-current="page"
               onClick={() => setActiveTab("directconnect")}
@@ -130,7 +130,7 @@ export const DownloadsPanel = (
               className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
                 activeTab === "torrents"
                   ? "bg-slate-200 text-slate-800"
-                  : "text-slate-200"
+                  : "dark:text-slate-400 text-slate-800"
               }`}
               onClick={() => setActiveTab("torrents")}
             >

src/client/components/ComicDetail/TabControls.tsx

@@ -13,9 +13,9 @@ export const TabControls = (props): ReactElement => {
             {filteredTabs.map(({ id, name, icon }) => (
               <a
                 key={id}
-                className={`inline-flex shrink-0 items-center gap-2 px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 ${
+                className={`inline-flex shrink-0 items-center gap-2 px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:border-b hover:dark:text-slate-200 ${
                   active === id
-                    ? "border-b-2 border-700 dark:text-slate-200"
+                    ? "border-b border-cyan-50 dark:text-slate-200"
                     : "border-b border-transparent"
                 }`}
                 aria-current="page"

src/client/components/ComicDetail/TorrentDownloads.tsx

@@ -9,7 +9,7 @@ export const TorrentDownloads = (props) => {
     <>
       {data.map(({ torrent }) => {
         return (
-          <dl className="mt-5">
+          <dl className="mt-5 dark:text-slate-200 text-slate-600">
             <dt className="text-lg">{torrent.name}</dt>
             <p className="text-sm">{torrent.hash}</p>
             <p className="text-sm">
@@ -28,7 +28,7 @@ export const TorrentDownloads = (props) => {
                   <span>{Math.floor(torrent.progress * 100)}%</span>
 
                   {/* downloaded/left */}
-                  <p className="inline-flex items-center bg-slate-50 text-green-800 dark:text-green-900 text-xs font-medium px-2.5 py-1 rounded-md dark:bg-slate-400">
+                  <p className="inline-flex items-center bg-slate-200 text-green-800 dark:text-green-900 text-xs font-medium px-2.5 py-1 rounded-md dark:bg-slate-400">
                     <span className="pr-1">
                       <i className="icon-[solar--arrow-to-down-left-outline] h-4 w-4"></i>
                     </span>
@@ -48,7 +48,7 @@ export const TorrentDownloads = (props) => {
             </p>
             <div className="flex gap-4 mt-2">
               {/* Peers */}
-              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+              <span className="inline-flex items-center bg-slate-200 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
                 <span className="pr-1">
                   <i className="icon-[solar--station-minimalistic-line-duotone] h-5 w-5"></i>
                 </span>
@@ -58,7 +58,7 @@ export const TorrentDownloads = (props) => {
               </span>
 
               {/* Size */}
-              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+              <span className="inline-flex items-center bg-slate-200 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
                 <span className="pr-1 pt-1">
                   <i className="icon-[solar--mirror-right-bold-duotone] h-4 w-4"></i>
                 </span>

src/client/components/WantedComics/WantedComics.tsx

@@ -10,6 +10,7 @@ export const WantedComics = (props): ReactElement => {
   const {
     data: wantedComics,
     isSuccess,
+    isFetched,
     isError,
     isLoading,
   } = useQuery({
@@ -41,6 +42,7 @@ export const WantedComics = (props): ReactElement => {
           minWidth: 350,
           accessorFn: (data) => data,
           cell: (value) => {
+            console.log("ASDASd", value);
             const row = value.getValue()._source;
             return row && <MetadataPanel data={row} />;
           },
@@ -172,7 +174,7 @@ export const WantedComics = (props): ReactElement => {
             </div>
           </div>
         </header>
-        {isSuccess ? (
+        {isSuccess && wantedComics?.data.hits?.hits ? (
           <div>
             <div className="library">
               <T2Table