From e06af3e5701b1903551e64b6e29057c16fa23ee5 Mon Sep 17 00:00:00 2001
From: Artur Lozovski <arccik@gmail.com>
Date: Fri, 15 Dec 2023 14:30:49 +0000
Subject: [PATCH] add dark styles to modal

---
 .../librqbit/webui/src/components/buttons/Button.tsx |  4 ++--
 .../webui/src/components/forms/FormInput.tsx         |  2 +-
 .../src/components/modal/DeleteTorrentModal.tsx      |  7 +++++--
 crates/librqbit/webui/src/components/modal/Modal.tsx | 12 +++++++-----
 .../webui/src/components/modal/ModalBody.tsx         |  2 +-
 5 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/crates/librqbit/webui/src/components/buttons/Button.tsx b/crates/librqbit/webui/src/components/buttons/Button.tsx
index 398f962..b2e8d4e 100644
--- a/crates/librqbit/webui/src/components/buttons/Button.tsx
+++ b/crates/librqbit/webui/src/components/buttons/Button.tsx
@@ -11,11 +11,11 @@ export const Button: React.FC<{
     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 dark:bg-red-800 dark:border-none",
+      "bg-red-400 text-white border-green-50 hover:border-red-700 hover:bg-red-600 dark:bg-red-800 dark:border-none dark:hover:bg-red-900",
     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",
+      "hover:bg-slate-200 dark:bg-slate-600 dark:hover:bg-slate-700 dark:border-none",
     none: "",
   }[variant ?? "secondary"];
   return (
diff --git a/crates/librqbit/webui/src/components/forms/FormInput.tsx b/crates/librqbit/webui/src/components/forms/FormInput.tsx
index d2fb1d9..8aa511a 100644
--- a/crates/librqbit/webui/src/components/forms/FormInput.tsx
+++ b/crates/librqbit/webui/src/components/forms/FormInput.tsx
@@ -29,7 +29,7 @@ export const FormInput: React.FC<{
       <input
         autoFocus={autoFocus}
         type={inputType}
-        className="block border rounded bg-transparent py-1.5 pl-2 text-gray-800 focus:ring-0 sm:text-sm sm:leading-6"
+        className="block border rounded bg-transparent py-1.5 pl-2 text-gray-800 focus:ring-0 sm:text-sm sm:leading-6 dark:text-slate-300"
         id={name}
         name={name}
         disabled={disabled}
diff --git a/crates/librqbit/webui/src/components/modal/DeleteTorrentModal.tsx b/crates/librqbit/webui/src/components/modal/DeleteTorrentModal.tsx
index e182886..1338c41 100644
--- a/crates/librqbit/webui/src/components/modal/DeleteTorrentModal.tsx
+++ b/crates/librqbit/webui/src/components/modal/DeleteTorrentModal.tsx
@@ -52,7 +52,7 @@ export const DeleteTorrentModal: React.FC<{
   return (
     <Modal isOpen={show} onClose={onHide} title="Delete torrent">
       <ModalBody>
-        <p className="text-gray-700">
+        <p className="text-gray-700 dark:text-slate-300">
           Are you sure you want to delete the torrent?
         </p>
 
@@ -65,7 +65,10 @@ export const DeleteTorrentModal: React.FC<{
             checked={deleteFiles}
             placeholder="Also delete files"
           />
-          <label htmlFor="deleteFiles" className="ml-2 text-gray-700">
+          <label
+            htmlFor="deleteFiles"
+            className="ml-2 text-gray-700 dark:text-slate-300"
+          >
             Also delete files
           </label>
         </div>
diff --git a/crates/librqbit/webui/src/components/modal/Modal.tsx b/crates/librqbit/webui/src/components/modal/Modal.tsx
index 209a59e..851dbd1 100644
--- a/crates/librqbit/webui/src/components/modal/Modal.tsx
+++ b/crates/librqbit/webui/src/components/modal/Modal.tsx
@@ -16,8 +16,8 @@ const ModalHeader: React.FC<{
   title: string;
 }> = ({ onClose, title }) => {
   return (
-    <div className="flex p-3 justify-between items-center border-b">
-      <h2 className="text-xl font-semibold">{title}</h2>
+    <div className="flex p-3 justify-between items-center border-b dark:border-slate-600">
+      <h2 className="text-xl font-semibold dark:slate-300">{title}</h2>
       {onClose && (
         <button
           className="text-gray-500 hover:text-gray-700"
@@ -39,17 +39,19 @@ export const Modal: React.FC<ModalProps> = ({
   className,
 }) => {
   const renderBackdrop = () => {
-    return <div className="fixed inset-0 bg-black/30 z-[300]"></div>;
+    return (
+      <div className="fixed inset-0 bg-black/30 z-[300] dark:bg-black/60"></div>
+    );
   };
   return (
     <RestartModal
       show={isOpen}
       onHide={onClose}
       renderBackdrop={renderBackdrop}
-      className={`fixed z-[301] top-0 left-0 w-full h-full block overflow-x-hidden overflow-y-auto`}
+      className="fixed z-[301] top-0 left-0 w-full h-full block overflow-x-hidden overflow-y-auto"
     >
       <div
-        className={`bg-white shadow-lg my-8 mx-auto max-w-2xl rounded ${className}`}
+        className={`bg-white shadow-lg my-8 mx-auto max-w-2xl rounded ${className} dark:bg-slate-800`}
       >
         <ModalHeader onClose={onClose} title={title} />
         {children}
diff --git a/crates/librqbit/webui/src/components/modal/ModalBody.tsx b/crates/librqbit/webui/src/components/modal/ModalBody.tsx
index 45fb285..3168d44 100644
--- a/crates/librqbit/webui/src/components/modal/ModalBody.tsx
+++ b/crates/librqbit/webui/src/components/modal/ModalBody.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
 
 export const ModalBody = ({ children }: { children: ReactNode }) => {
-  return <div className="p-3 border-b">{children}</div>;
+  return <div className="p-3 border-b dark:border-slate-500">{children}</div>;
 };