From 432fe58585579dd2becd6d8d090fa20b4958f7ac Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Thu, 21 Dec 2023 22:04:06 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=97=82=EF=B8=8F=20Added=20tab=20icons=20a?=
 =?UTF-8?q?nd=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ComicDetail/ComicDetail.tsx    | 25 ++++++++++++-------
 .../components/ComicDetail/TabControls.tsx    |  7 +++---
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx
index b499fe7..8ea2357 100644
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/src/client/components/ComicDetail/ComicDetail.tsx
@@ -181,7 +181,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     {
       id: 2,
       name: "ComicInfo.xml",
-      icon: <i className="fa-solid fa-code"></i>,
+      icon: (
+        <i className="h-5 w-5 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300" />
+      ),
       content: (
         <div className="columns" key={2}>
           <div className="column is-three-quarters">
@@ -193,7 +195,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     },
     {
       id: 3,
-      icon: <i className="fa-regular fa-file-archive"></i>,
+      icon: (
+        <i className="h-5 w-5 icon-[solar--winrar-bold-duotone] text-slate-500 dark:text-slate-300" />
+      ),
       name: "Archive Operations",
       content: <></>,
       /*
@@ -202,7 +206,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     },
     {
       id: 4,
-      icon: <i className="fa-solid fa-circle-nodes"></i>,
+      icon: (
+        <i className="h-5 w-5 icon-[solar--folder-path-connect-bold-duotone] text-slate-500 dark:text-slate-300" />
+      ),
       name: "DC++ Search",
       content: (
         <AcquisitionPanel
@@ -217,19 +223,20 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     },
     {
       id: 5,
-      icon: <i className="fa-solid fa-droplet"></i>,
+      icon: (
+        <i className="h-5 w-5 icon-[solar--magnet-bold-duotone] text-slate-500 dark:text-slate-300" />
+      ),
       name: "Torrent Search",
       content: <>Torrents</>,
       shouldShow: true,
     },
     {
       id: 6,
-      icon: null,
-      name: !isEmpty(data.data) ? (
-        <span className="download-tab-name">Downloads</span>
-      ) : (
-        "Downloads"
+      icon: (
+        <i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
       ),
+      name: "Downloads",
+
       content: !isNil(data.data) && !isEmpty(data.data) && (
         <DownloadsPanel
           data={data.data.acquisition.directconnect}
diff --git a/src/client/components/ComicDetail/TabControls.tsx b/src/client/components/ComicDetail/TabControls.tsx
index 3228b44..28c352c 100644
--- a/src/client/components/ComicDetail/TabControls.tsx
+++ b/src/client/components/ComicDetail/TabControls.tsx
@@ -13,13 +13,13 @@ export const TabControls = (props): ReactElement => {
 
   return (
     <>
-      <div className="hidden sm:block mt-7">
+      <div className="hidden sm:block mt-7 mb-3 w-fit">
         <div className="border-b border-gray-200">
-          <nav className="-mb-px flex gap-6" aria-label="Tabs">
+          <nav className="flex gap-6" aria-label="Tabs">
             {filteredTabs.map(({ id, name, icon }) => (
               <a
                 key={id}
-                className="inline-flex shrink-0 items-center gap-2 border-b-2 border-transparent px-1 pb-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                className="inline-flex shrink-0 items-center gap-2 border-b border-transparent px-1 py-1 text-md font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
                 aria-current="page"
                 onClick={() => setActive(id)}
               >
@@ -37,6 +37,7 @@ export const TabControls = (props): ReactElement => {
                 )}
                 {name}
               </a> */}
+                <span className="w-5 h-5">{icon}</span>
                 {name}
               </a>
             ))}