From 29e0772a10a73f981f9cdb41695a5cfdd58e1e56 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Sun, 3 Dec 2023 15:28:05 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9C=20Initial=20Dark=20Mode=20support?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 20 +++++++------- package.json | 1 + src/client/assets/scss/App.scss | 25 ++++++++---------- .../ComicDetail/DownloadProgressTick.tsx | 13 +++++----- .../components/ComicDetail/RawFileDetails.tsx | 4 +-- src/client/components/Downloads/Downloads.tsx | 26 +++++++------------ src/client/components/Import/Import.tsx | 2 +- src/client/store/index.ts | 1 + yarn.lock | 5 ++++ 9 files changed, 45 insertions(+), 52 deletions(-) diff --git a/index.html b/index.html index 21d1f3a..7ae7be9 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,14 @@ - - - - - - + + + + + Three Two! - + - +
- - - \ No newline at end of file + + diff --git a/package.json b/package.json index e0acf9a..390dbd6 100644 --- 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", diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index 0833103..ea111bc 100644 --- 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 { diff --git a/src/client/components/ComicDetail/DownloadProgressTick.tsx b/src/client/components/ComicDetail/DownloadProgressTick.tsx index f28c6eb..b4d69b3 100644 --- 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 ( -
-

{props.data.name}

+
+

{props.data.name}

- + {prettyBytes(props.data.downloaded_bytes)} of{" "} {prettyBytes(props.data.size)}{" "} @@ -20,13 +20,12 @@ export const DownloadProgressTick = (props): ReactElement => { %
-
- {prettyBytes(props.data.speed)} per second. -
-
+
+

{prettyBytes(props.data.speed)} per second.

Time left: {Math.round(parseInt(props.data.seconds_left) / 60)}
+
{props.data.target}
); diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx index 7a8c071..26a2bfa 100644 --- 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 ( <> -
+
Raw File Details
@@ -103,4 +103,4 @@ RawFileDetails.propTypes = { }), }), }), -}; \ No newline at end of file +}; diff --git a/src/client/components/Downloads/Downloads.tsx b/src/client/components/Downloads/Downloads.tsx index 3c619ed..312ea14 100644 --- 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(() => { diff --git a/src/client/components/Import/Import.tsx b/src/client/components/Import/Import.tsx index de96c86..0bb8c73 100644 --- 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) && ( <>

Past Imports

- +
diff --git a/src/client/store/index.ts b/src/client/store/index.ts index 97cd229..eb5b5c1 100644 --- 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: {}, diff --git a/yarn.lock b/yarn.lock index bf819e1..23accd5 100644 --- 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"
Time Started