From e05348018323b65de247a8a7d8be9cdfbd19a7d4 Mon Sep 17 00:00:00 2001
From: Artur Lozovski <arccik@gmail.com>
Date: Fri, 15 Dec 2023 09:53:08 +0000
Subject: [PATCH] classes for dark mode added to header

---
 crates/librqbit/webui/src/components/Header.tsx     | 10 +++++-----
 .../webui/src/components/buttons/Button.tsx         | 13 ++++++++-----
 .../webui/src/components/buttons/FileInput.tsx      |  2 +-
 .../webui/src/components/buttons/MagnetInput.tsx    |  2 +-
 crates/librqbit/webui/tailwind.config.js            |  1 +
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/crates/librqbit/webui/src/components/Header.tsx b/crates/librqbit/webui/src/components/Header.tsx
index 06781cb..f2e79e8 100644
--- a/crates/librqbit/webui/src/components/Header.tsx
+++ b/crates/librqbit/webui/src/components/Header.tsx
@@ -7,19 +7,19 @@ import Logo from "../../assets/logo.svg?react";
 export const Header = ({ title }: { title: string }) => {
   const [name, version] = title.split("-");
   return (
-    <header className="bg-slate-50 drop-shadow-lg flex flex-wrap justify-center lg:justify-between items-center mb-3">
+    <header className="bg-slate-50 drop-shadow-lg flex flex-wrap justify-center lg:justify-between items-center mb-3 dark:bg-slate-800">
       <div className="flex flex-nowrap items-center justify-between m-2">
         <Logo className="w-10 h-10 p-1" alt="logo" />
-        <h1 className="flex items-center">
+        <h1 className="flex items-center dark:text-white">
           <div className="text-3xl">{name}</div>
-          <div className="bg-blue-100 text-blue-800 text-xl font-semibold me-2 px-2.5 py-0.5 rounded ms-2">
+          <div className="bg-blue-100 text-blue-800 text-xl font-semibold me-2 px-2.5 py-0.5 rounded ms-2 dark:bg-blue-900 dark:text-white">
             {version}
           </div>
         </h1>
       </div>
       <div className="flex flex-wrap gap-1 m-2">
-        <MagnetInput className="flex-grow justify-center" />
-        <FileInput className="flex-grow justify-center" />
+        <MagnetInput className="flex-grow justify-center dark:text-white" />
+        <FileInput className="flex-grow justify-center dark:text-white" />
       </div>
     </header>
   );
diff --git a/crates/librqbit/webui/src/components/buttons/Button.tsx b/crates/librqbit/webui/src/components/buttons/Button.tsx
index 67b2e98..398f962 100644
--- a/crates/librqbit/webui/src/components/buttons/Button.tsx
+++ b/crates/librqbit/webui/src/components/buttons/Button.tsx
@@ -8,11 +8,14 @@ export const Button: React.FC<{
   children: ReactNode;
 }> = ({ onClick, children, className, disabled, variant }) => {
   let variantClassNames = {
-    secondary: "hover:bg-blue-500 transition-colors hover:text-white",
+    secondary:
+      "hover:bg-blue-500 transition-colors hover:text-white dark:hover:bg-blue-900/50",
     danger:
-      "bg-red-400 text-white border-green-50 hover:border-red-700 hover:bg-red-600",
-    primary: "bg-blue-600 text-white hover:bg-blue-800 disabled:bg-blue-200",
-    cancel: "hover:bg-slate-200",
+      "bg-red-400 text-white border-green-50 hover:border-red-700 hover:bg-red-600 dark:bg-red-800 dark:border-none",
+    primary:
+      "bg-blue-600 text-white hover:bg-blue-800 disabled:bg-blue-200 dark:disabled:bg-slate-600 dark:disabled:text-slate-300 dark:border-none",
+    cancel:
+      "hover:bg-slate-200 dark:bg-slate-200 dark:hover:bg-slate-400 dark:border-none",
     none: "",
   }[variant ?? "secondary"];
   return (
@@ -22,7 +25,7 @@ export const Button: React.FC<{
         e.preventDefault();
         onClick();
       }}
-      className={`flex inline-flex items-center gap-1 border rounded-lg border disabled:cursor-not-allowed px-2 py-1 transition-colors duration-300 ${variantClassNames} ${className}`}
+      className={`inline-flex items-center gap-1 border rounded-lg  disabled:cursor-not-allowed px-2 py-1 transition-colors duration-300 dark:border-slate-700 ${variantClassNames} ${className}`}
     >
       {children}
     </button>
diff --git a/crates/librqbit/webui/src/components/buttons/FileInput.tsx b/crates/librqbit/webui/src/components/buttons/FileInput.tsx
index fd82656..d093683 100644
--- a/crates/librqbit/webui/src/components/buttons/FileInput.tsx
+++ b/crates/librqbit/webui/src/components/buttons/FileInput.tsx
@@ -44,7 +44,7 @@ export const FileInput = ({ className }: { className?: string }) => {
         resetData={reset}
         className={className}
       >
-        <CgFileAdd color="blue" />
+        <CgFileAdd className="text-blue-500 dark:text-white" />
         <div>Upload .torrent File</div>
       </UploadButton>
     </>
diff --git a/crates/librqbit/webui/src/components/buttons/MagnetInput.tsx b/crates/librqbit/webui/src/components/buttons/MagnetInput.tsx
index e47eed5..101fc77 100644
--- a/crates/librqbit/webui/src/components/buttons/MagnetInput.tsx
+++ b/crates/librqbit/webui/src/components/buttons/MagnetInput.tsx
@@ -33,7 +33,7 @@ export const MagnetInput = ({ className }: { className?: string }) => {
         className={className}
         resetData={() => setMagnet(null)}
       >
-        <CgLink color="blue" />
+        <CgLink className="text-blue-500 dark:text-white" />
         <div>Add Torrent from Magnet / URL</div>
       </UploadButton>
 
diff --git a/crates/librqbit/webui/tailwind.config.js b/crates/librqbit/webui/tailwind.config.js
index 6af0cc1..8a19e07 100644
--- a/crates/librqbit/webui/tailwind.config.js
+++ b/crates/librqbit/webui/tailwind.config.js
@@ -20,6 +20,7 @@ export default {
       'fade-out': 'fadeOut 0.3s ease-in-out',
     },
   },
+  darkMode: 'class',
   plugins: [],
 }