From b4d1b678b13cffbeb6a4a36c0c80dcd48e984ae7 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Fri, 29 Mar 2024 23:26:43 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=F0=9F=8F=BC=20Formatting=20improve?=
 =?UTF-8?q?ments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ComicDetail/RawFileDetails.tsx    |  2 +-
 .../components/ComicDetail/TabControls.tsx       | 16 +++++++---------
 .../components/ComicDetail/TorrentDownloads.tsx  | 15 +++++++--------
 src/client/components/shared/DatePicker.tsx      |  1 -
 src/client/components/shared/MetadataPanel.tsx   |  1 -
 5 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx
index 25fcf59..3811038 100644
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/src/client/components/ComicDetail/RawFileDetails.tsx
@@ -48,7 +48,7 @@ export const RawFileDetails = (props): ReactElement => {
               <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
                 {/* File extension */}
                 <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                  <span className="pr-1 pt-1">
+                  <span className="pt-1">
                     <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
                   </span>
 
diff --git a/src/client/components/ComicDetail/TabControls.tsx b/src/client/components/ComicDetail/TabControls.tsx
index 636abce..984018c 100644
--- a/src/client/components/ComicDetail/TabControls.tsx
+++ b/src/client/components/ComicDetail/TabControls.tsx
@@ -1,15 +1,9 @@
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, useState } from "react";
 import { isNil } from "lodash";
 
 export const TabControls = (props): ReactElement => {
-  // const comicBookDetailData = useSelector(
-  //   (state: RootState) => state.comicInfo.comicBookDetail,
-  // );
   const { filteredTabs, downloadCount } = props;
   const [active, setActive] = useState(filteredTabs[0].id);
-  // useEffect(() => {
-  //   setActive(filteredTabs[0].id);
-  // }, [filteredTabs]);
 
   return (
     <>
@@ -19,7 +13,11 @@ export const TabControls = (props): ReactElement => {
             {filteredTabs.map(({ id, name, icon }) => (
               <a
                 key={id}
-                className="inline-flex shrink-0 items-center gap-2 border-b border-transparent 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:text-gray-700 ${
+                  active === id
+                    ? "border-b-2 border-700 dark:text-slate-200"
+                    : "border-b border-transparent"
+                }`}
                 aria-current="page"
                 onClick={() => setActive(id)}
               >
@@ -28,7 +26,7 @@ export const TabControls = (props): ReactElement => {
                   {id === 6 && !isNil(downloadCount) ? (
                     <span className="inline-flex flex-row">
                       {/* download count */}
-                      <span className="inline-flex mx-2 items-center bg-slate-200 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                      <span className="inline-flex mx-2 items-center bg-slate-200 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-orange-400">
                         <span className="text-md text-slate-500 dark:text-slate-900">
                           {icon}
                         </span>
diff --git a/src/client/components/ComicDetail/TorrentDownloads.tsx b/src/client/components/ComicDetail/TorrentDownloads.tsx
index d6e4b89..4044157 100644
--- a/src/client/components/ComicDetail/TorrentDownloads.tsx
+++ b/src/client/components/ComicDetail/TorrentDownloads.tsx
@@ -20,7 +20,7 @@ export const TorrentDownloads = (props) => {
               {torrent.progress > 0 ? (
                 <>
                   <progress
-                    className="w-80 mt-2 [&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-slate-300 [&::-webkit-progress-value]:bg-orange-400 [&::-moz-progress-bar]:bg-orange-400 h-2"
+                    className="w-80 mt-2 [&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-slate-300 [&::-webkit-progress-value]:bg-green-400 [&::-moz-progress-bar]:bg-green-400 h-2"
                     value={Math.floor(torrent.progress * 100).toString()}
                     max="100"
                   ></progress>
@@ -28,22 +28,21 @@ export const TorrentDownloads = (props) => {
                   <span>{Math.floor(torrent.progress * 100)}%</span>
 
                   {/* downloaded/left */}
-                  <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="pr-1 pt-1">
+                  <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">
+                    <span className="pr-1">
                       <i className="icon-[solar--arrow-to-down-left-outline] h-4 w-4"></i>
                     </span>
-                    <span className="text-md text-slate-900">
+                    <span className="text-md">
                       {prettyBytes(torrent.downloaded)}
                     </span>
-
                     {/* uploaded */}
-                    <span className="pr-1 pt-1">
+                    <span className="pr-1 text-orange-800 dark:text-orange-900 ml-2">
                       <i className="icon-[solar--arrow-to-top-left-outline] h-4 w-4"></i>
                     </span>
-                    <span className="text-md text-slate-900">
+                    <span className="text-md text-orange-800 dark:text-orange-900">
                       {prettyBytes(torrent.uploaded)}
                     </span>
-                  </span>
+                  </p>
                 </>
               ) : null}
             </p>
diff --git a/src/client/components/shared/DatePicker.tsx b/src/client/components/shared/DatePicker.tsx
index 47b7436..221bd6a 100644
--- a/src/client/components/shared/DatePicker.tsx
+++ b/src/client/components/shared/DatePicker.tsx
@@ -6,7 +6,6 @@ import { DayPicker, SelectSingleEventHandler } from "react-day-picker";
 import { usePopper } from "react-popper";
 
 export const DatePickerDialog = (props) => {
-  console.log(props);
   const { setter, apiAction } = props;
   const [selected, setSelected] = useState<Date>();
   const [isPopperOpen, setIsPopperOpen] = useState(false);
diff --git a/src/client/components/shared/MetadataPanel.tsx b/src/client/components/shared/MetadataPanel.tsx
index f339548..781658d 100644
--- a/src/client/components/shared/MetadataPanel.tsx
+++ b/src/client/components/shared/MetadataPanel.tsx
@@ -16,7 +16,6 @@ interface IMetadatPanelProps {
   containerStyle: any;
 }
 export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
-  console.log(props);
   const {
     rawFileDetails,
     inferredMetadata,