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

classes for dark mode added to header

Browse source
This commit is contained in:
Artur Lozovski 2023-12-15 09:53:08 +00:00
parent f45195a745
commit e053480183
5 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

10
crates/librqbit/webui/src/components/Header.tsx
View file

@ -7,19 +7,19 @@ import Logo from "../../assets/logo.svg?react";
export const Header = ({ title }: { title: string }) => { export const Header = ({ title }: { title: string }) => {
const [name, version] = title.split("-"); const [name, version] = title.split("-");
return ( 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"> <div className="flex flex-nowrap items-center justify-between m-2">
<Logo className="w-10 h-10 p-1" alt="logo" /> <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="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} {version}
</div> </div>
</h1> </h1>
</div> </div>
<div className="flex flex-wrap gap-1 m-2"> <div className="flex flex-wrap gap-1 m-2">
<MagnetInput className="flex-grow justify-center" /> <MagnetInput className="flex-grow justify-center dark:text-white" />
<FileInput className="flex-grow justify-center" /> <FileInput className="flex-grow justify-center dark:text-white" />
</div> </div>
</header> </header>
); );

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

@ -8,11 +8,14 @@ export const Button: React.FC<{
children: ReactNode; children: ReactNode;
}> = ({ onClick, children, className, disabled, variant }) => { }> = ({ onClick, children, className, disabled, variant }) => {
let variantClassNames = { 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: danger:
"bg-red-400 text-white border-green-50 hover:border-red-700 hover:bg-red-600", "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", primary:
cancel: "hover:bg-slate-200", "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: "", none: "",
}[variant ?? "secondary"]; }[variant ?? "secondary"];
return ( return (
@ -22,7 +25,7 @@ export const Button: React.FC<{
e.preventDefault(); e.preventDefault();
onClick(); 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} {children}
</button> </button>

2
crates/librqbit/webui/src/components/buttons/FileInput.tsx
View file

@ -44,7 +44,7 @@ export const FileInput = ({ className }: { className?: string }) => {
resetData={reset} resetData={reset}
className={className} className={className}
> >
<CgFileAdd color="blue" /> <CgFileAdd className="text-blue-500 dark:text-white" />
<div>Upload .torrent File</div> <div>Upload .torrent File</div>
</UploadButton> </UploadButton>
</> </>

2
crates/librqbit/webui/src/components/buttons/MagnetInput.tsx
View file

@ -33,7 +33,7 @@ export const MagnetInput = ({ className }: { className?: string }) => {
className={className} className={className}
resetData={() => setMagnet(null)} resetData={() => setMagnet(null)}
> >
<CgLink color="blue" /> <CgLink className="text-blue-500 dark:text-white" />
<div>Add Torrent from Magnet / URL</div> <div>Add Torrent from Magnet / URL</div>
</UploadButton> </UploadButton>

1
crates/librqbit/webui/tailwind.config.js
View file

@ -20,6 +20,7 @@ export default {
'fade-out': 'fadeOut 0.3s ease-in-out', 'fade-out': 'fadeOut 0.3s ease-in-out',
}, },
}, },
darkMode: 'class',
plugins: [], plugins: [],
} }