💅🏼 Formatting improvements

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>
 

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>

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>

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

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,