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 }) => {
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>
);