🌜 Initial Dark Mode support

src/client/components/ComicDetail/DownloadProgressTick.tsx

@@ -3,10 +3,10 @@ import React, { ReactElement } from "react";
 
 export const DownloadProgressTick = (props): ReactElement => {
   return (
-    <div >
-      <h4 className="is-size-6">{props.data.name}</h4>
+    <div>
+      <h4 className="is-size-5">{props.data.name}</h4>
       <div>
-        <span className="is-size-3 has-text-weight-semibold">
+        <span className="is-size-4 has-text-weight-semibold">
           {prettyBytes(props.data.downloaded_bytes)} of{" "}
           {prettyBytes(props.data.size)}{" "}
         </span>
@@ -20,13 +20,12 @@ export const DownloadProgressTick = (props): ReactElement => {
           %
         </progress>
       </div>
-      <div className="is-size-5">
-        {prettyBytes(props.data.speed)} per second.
-      </div>
-      <div className="is-size-5">
+      <div className="is-size-6 mt-1 mb-2">
+        <p>{prettyBytes(props.data.speed)} per second.</p>
         Time left:
         {Math.round(parseInt(props.data.seconds_left) / 60)}
       </div>
+
       <div>{props.data.target}</div>
     </div>
   );

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -7,7 +7,7 @@ export const RawFileDetails = (props): ReactElement => {
   const { rawFileDetails, inferredMetadata } = props.data;
   return (
     <>
-      <div className="comic-detail raw-file-details column is-three-fifths">
+      <div className="comic-detail raw-file-details column is-three-quarters">
         <dl>
           <dt>Raw File Details</dt>
           <dd className="is-size-7">
@@ -103,4 +103,4 @@ RawFileDetails.propTypes = {
       }),
     }),
   }),
-};
+};

src/client/components/Downloads/Downloads.tsx

@@ -1,13 +1,5 @@
-import React, {
-  ReactElement,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import React, { ReactElement, useEffect, useState } from "react";
 import { getTransfers } from "../../actions/airdcpp.actions";
-import { useDispatch, useSelector } from "react-redux";
-import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import MetadataPanel from "../shared/MetadataPanel";
@@ -17,18 +9,18 @@ interface IDownloadsProps {
 }
 
 export const Downloads = (props: IDownloadsProps): ReactElement => {
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  // const airDCPPConfiguration = useContext(AirDCPPSocketContext);
   const {
     airDCPPState: { settings, socket },
   } = airDCPPConfiguration;
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();
 
-  const airDCPPTransfers = useSelector(
-    (state: RootState) => state.airdcpp.transfers,
-  );
-  const issueBundles = useSelector(
-    (state: RootState) => state.airdcpp.issue_bundles,
-  );
+  // const airDCPPTransfers = useSelector(
+  //   (state: RootState) => state.airdcpp.transfers,
+  // );
+  // const issueBundles = useSelector(
+  //   (state: RootState) => state.airdcpp.issue_bundles,
+  // );
   const [bundles, setBundles] = useState([]);
   // Make the call to get all transfers from AirDC++
   useEffect(() => {

src/client/components/Import/Import.tsx

@@ -226,7 +226,7 @@ export const Import = (props: IProps): ReactElement => {
         {!isLoading && !isEmpty(data?.data) && (
           <>
             <h3 className="subtitle is-4 mt-5">Past Imports</h3>
-            <table className="table">
+            <table className="table is-striped">
               <thead>
                 <tr>
                   <th>Time Started</th>