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

added classes to torrentRow and globas.css for dark mode

Browse source
This commit is contained in:
Artur Lozovski 2023-12-15 13:29:40 +00:00
parent e053480183
commit ebe737bc99
6 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,7 @@ 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 dark:bg-slate-800"> <header className="bg-slate-50 drop-shadow-lg flex flex-wrap justify-center lg:justify-between items-center 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 dark:text-white"> <h1 className="flex items-center dark:text-white">

1
crates/librqbit/webui/src/components/StatusIcon.tsx
View file

@ -1,5 +1,4 @@
import { import {
MdCheck,
MdCheckCircle, MdCheckCircle,
MdDownload, MdDownload,
MdError, MdError,

4
crates/librqbit/webui/src/components/TorrentRow.tsx
View file

@ -45,7 +45,7 @@ export const TorrentRow: React.FC<{
}; };
return ( return (
<section className="flex flex-col sm:flex-row items-center gap-2 border p-2 border-gray-200 rounded-xl shadow-xs hover:drop-shadow-sm"> <section className="flex flex-col sm:flex-row items-center gap-2 border p-2 border-gray-200 rounded-xl shadow-xs hover:drop-shadow-sm dark:bg-slate-800 dark:border-slate-900">
{/* Icon */} {/* Icon */}
<div className="hidden md:block">{statusIcon("w-10 h-10")}</div> <div className="hidden md:block">{statusIcon("w-10 h-10")}</div>
{/* Name, progress, stats */} {/* Name, progress, stats */}
@ -53,7 +53,7 @@ export const TorrentRow: React.FC<{
{detailsResponse && ( {detailsResponse && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="md:hidden">{statusIcon("w-5 h-5")}</div> <div className="md:hidden">{statusIcon("w-5 h-5")}</div>
<div className="text-left text-lg text-gray-900 text-ellipsis break-all"> <div className="text-left text-lg text-gray-900 text-ellipsis break-all dark:text-slate-200">
{getLargestFileName(detailsResponse)} {getLargestFileName(detailsResponse)}
</div> </div>
</div> </div>

2
crates/librqbit/webui/src/components/TorrentsList.tsx
View file

@ -22,7 +22,7 @@ export const TorrentsList = (props: {
); );
} }
return ( return (
<div className="flex flex-col gap-2 mx-2"> <div className="flex flex-col gap-2 mx-2 mt-3">
{props.torrents.map((t: TorrentId) => ( {props.torrents.map((t: TorrentId) => (
<Torrent id={t.id} key={t.id} torrent={t} /> <Torrent id={t.id} key={t.id} torrent={t} />
))} ))}

5
crates/librqbit/webui/src/globals.css
View file

@ -1,3 +1,8 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.dark {
@apply bg-gray-800 text-zinc-50
}

2
crates/librqbit/webui/src/rqbit-web.tsx
View file

@ -67,7 +67,7 @@ export const RqbitWebUI = (props: {
return ( return (
<AppContext.Provider value={context}> <AppContext.Provider value={context}>
<Header title={props.title} /> <Header title={props.title} />
<div className="relative"> <div className="relative dark:bg-gray-900 pt-3 min-h-screen h-full">
{/* Menu buttons */} {/* Menu buttons */}
<div className="absolute top-0 start-0 pl-2 z-10"> <div className="absolute top-0 start-0 pl-2 z-10">
{props.menuButtons && {props.menuButtons &&