🗂️ Added tab icons and styles

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}

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>
             ))}