🌜 Initial Dark Mode support

2023-12-03 15:28:05 -05:00
parent 57b713aca1
commit 29e0772a10
9 changed files with 45 additions and 52 deletions
--- a/index.html
+++ b/index.html
@@ -1,16 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Three Two!</title>
-</head>
+  </head>

-<body>
+  <body>
    <div id="root"></div>
    <script type="module" src="/src/client/index.tsx"></script>
-</body>
-
-</html>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
    "axios-cache-interceptor": "^1.0.1",
    "axios-rate-limit": "^1.3.0",
    "babel-plugin-styled-components": "^2.1.4",
+    "bulma-prefers-dark": "^0.1.0-beta.1",
    "date-fns": "^2.28.0",
    "dayjs": "^1.10.6",
    "ellipsize": "^0.5.1",
--- a/src/client/assets/scss/App.scss
+++ b/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 {
--- a/src/client/components/ComicDetail/DownloadProgressTick.tsx
+++ b/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>
  );
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/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 = {
      }),
    }),
  }),
-};
+};
--- a/src/client/components/Downloads/Downloads.tsx
+++ b/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(() => {
--- a/src/client/components/Import/Import.tsx
+++ b/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>
--- a/src/client/store/index.ts
+++ b/src/client/store/index.ts
@@ -23,6 +23,7 @@ export const useStore = create((set, get) => ({
      airDCPPSocketConnected: value,
    })),
  airDCPPDownloadTick: {},
+  airDCPPTransfers: {},
  // Socket.io state
  socketIOInstance: {},

--- a/yarn.lock
+++ b/yarn.lock
@@ -4310,6 +4310,11 @@ builtin-modules@^3.3.0:
  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
  integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==

+bulma-prefers-dark@^0.1.0-beta.1:
+  version "0.1.0-beta.1"
+  resolved "https://registry.yarnpkg.com/bulma-prefers-dark/-/bulma-prefers-dark-0.1.0-beta.1.tgz#074aa71899f389a0137dd3753f0d89e96ab1e59b"
+  integrity sha512-ti4sKxIIrTAvGtsYc9Rk66SUZSH/j63EU1hApQijQVlKFF0qBLGSb8E16HhI83KJaIeYP4aAHQv2tj0ara831A==
+
 bulma@^0.9.4:
  version "0.9.4"
  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"