🌜 Initial Dark Mode support

src/client/assets/scss/App.scss

@@ -1,4 +1,5 @@
 @import "/node_modules/bulma/bulma.sass";
+@import "/node_modules/bulma-prefers-dark/bulma-prefers-dark.sass";
 $fa-font-path: "/node_modules/@fortawesome/fontawesome-free/webfonts";
 @import "/node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
 @import "/node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
@@ -14,8 +15,9 @@ $flexSize: 4em;
 $boxSpacing: 1em;
 $colorText: #404646;
 body {
-  background: #fffcc;
+  background: #20292f;
 }
+
 .is-size-8 {
   font-size: $size-8;
 }
@@ -72,10 +74,6 @@ pre {
     background: #454a59;
   }
 
-  body {
-    background: #454a59;
-  }
-
   .pulsating-circle {
     position: relative;
     left: -120%;
@@ -358,7 +356,7 @@ pre {
 // raw file details
 .raw-file-details {
   padding: 1rem;
-  background-color: beige;
+  background: #30475e;
   border-radius: 0.5rem;
 }
 
@@ -374,12 +372,11 @@ pre {
 }
 
 .issue-metadata {
-  background-color: #fbffee;
+  background-color: #30475e;
   padding: 0.8em;
   border-radius: 0.5rem;
   .name {
     font-size: 0.95rem;
-    color: #4a4f50;
   }
 }
 
@@ -421,17 +418,17 @@ pre {
 }
 // Library
 .header-area {
+  background: #20292f;
   width: 100%;
   padding: 25px 0 15px 0;
   position: sticky;
-  z-index: 9999;
-  background: #fffffc;
-  top: 50px;
+  z-index: 9;
+  top: 57px;
 }
 
 .library {
   .table-controls {
-    background: #fffffc;
+    background: #20292f;
     justify-content: space-between;
     position: sticky;
     top: 126px;
@@ -439,17 +436,17 @@ pre {
   }
   .pagination {
     margin: 0;
-    background: #fffffc;
   }
 
   table {
+    background: #20292f;
     border-collapse: separate;
     width: 100%;
     thead {
+      background: #20292f;
       position: sticky;
       top: 250px;
       z-index: 1;
-      background: #fffffc;
       min-height: 130px;
     }
     tr {

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>

src/client/store/index.ts

@@ -23,6 +23,7 @@ export const useStore = create((set, get) => ({
       airDCPPSocketConnected: value,
     })),
   airDCPPDownloadTick: {},
+  airDCPPTransfers: {},
   // Socket.io state
   socketIOInstance: {},