leyoda/rqbit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add dark styles to modal

Browse source
This commit is contained in:
Artur Lozovski 2023-12-15 14:30:49 +00:00
parent ebe737bc99
commit e06af3e570
5 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

4
crates/librqbit/webui/src/components/buttons/Button.tsx
View file

@ -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 (

2
crates/librqbit/webui/src/components/forms/FormInput.tsx
View file

@ -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}

7
crates/librqbit/webui/src/components/modal/DeleteTorrentModal.tsx
View file

@ -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>

12
crates/librqbit/webui/src/components/modal/Modal.tsx
View file

@ -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}

2
crates/librqbit/webui/src/components/modal/ModalBody.tsx
View file

@ -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>;
};