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

2/n Fixing dark mode bugs

Browse source
This commit is contained in:
Igor Katson 2023-12-16 11:09:51 +00:00
parent 8d886e0961
commit 33c8b11c6e
No known key found for this signature in database
GPG key ID: B4EC22B66D61A3F5
15 changed files with 78 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,7 +36,7 @@ export const ErrorComponent = (props: {
{error.details?.statusText && (
<div className="pb-2 text-md">{error.details?.statusText}</div>
)}
<div className="whitespace-pre-line text-sm">{error.details?.text}</div>
<div className="whitespace-pre text-sm">{error.details?.text}</div>
</AlertDanger>
);
};

12
crates/librqbit/webui/src/components/Spinner.tsx
View file

@ -1,9 +1,9 @@
export const Spinner = () => {
export const Spinner = ({ label }: { label?: string }) => {
return (
<div role="status">
<div className="flex gap-2 items-center w-full justify-center">
<svg
aria-hidden="true"
className="inline w-8 h-8 text-gray-200 animate-spin fill-blue-600"
className="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -17,7 +17,11 @@ export const Spinner = () => {
fill="currentFill"
/>
</svg>
<span className="sr-only">Loading...</span>
{label ? (
<span className="text-sm">{label} ...</span>
) : (
<span className="sr-only">Loading...</span>
)}
</div>
);
};

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

@ -6,26 +6,21 @@ export const TorrentsList = (props: {
torrents: Array<TorrentId> | null;
loading: boolean;
}) => {
if (props.torrents === null && props.loading) {
return <Spinner />;
}
// The app either just started, or there was an error loading torrents.
if (props.torrents === null) {
return;
}
if (props.torrents.length === 0) {
return (
<div className="text-center">
<p>No existing torrents found.</p>
</div>
);
}
return (
<div className="flex flex-col gap-2 mx-2">
{props.torrents.map((t: TorrentId) => (
<Torrent id={t.id} key={t.id} torrent={t} />
))}
<div className="flex flex-col gap-2 mx-2 pb-3 sm:px-7">
{props.torrents === null ? (
props.loading ? (
<Spinner label="Loading torrent list" />
) : null
) : props.torrents.length === 0 ? (
<p className="text-center">No existing torrents found.</p>
) : (
props.torrents.map((t: TorrentId) => (
<>
<Torrent id={t.id} key={t.id} torrent={t} />
</>
))
)}
</div>
);
};

6
crates/librqbit/webui/src/components/forms/FormCheckbox.tsx
View file

@ -24,7 +24,11 @@ export const FormCheckbox: React.FC<{
</div>
<div className="text-sm flex flex-col gap-1">
<label htmlFor={name}>{label}</label>
{help && <div className="text-xs text-slate-500 mb-3">{help}</div>}
{help && (
<div className="text-xs text-slate-500 dark:text-slate-300 mb-3">
{help}
</div>
)}
</div>
</div>
);

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

@ -25,7 +25,7 @@ export const FormInput: React.FC<{
}) => {
return (
<div className="flex flex-col gap-2 text-sm mb-2">
<label htmlFor={name} className="dark:text-slate-500">
<label htmlFor={name} className="dark:text-white">
{label}
</label>
<input
@ -40,7 +40,9 @@ export const FormInput: React.FC<{
onKeyDown={onKeyDown}
onChange={onChange}
/>
{help && <div className="text-xs text-slate-500">{help}</div>}
{help && (
<div className="text-xs text-slate-500 dark:text-slate-300">{help}</div>
)}
</div>
);
};

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

@ -101,7 +101,7 @@ export const FileSelectionModal = (props: {
const getBody = () => {
if (listTorrentLoading) {
return <Spinner />;
return <Spinner label="Loading torrent contents" />;
} else if (listTorrentError) {
return <ErrorComponent error={listTorrentError}></ErrorComponent>;
} else if (listTorrentResponse) {

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

@ -40,7 +40,7 @@ export const Modal: React.FC<ModalProps> = ({
}) => {
const renderBackdrop = () => {
return (
<div className="fixed inset-0 bg-black/30 z-[300] dark:bg-black/60"></div>
<div className="fixed inset-0 bg-black/30 z-[300] dark:bg-black/60 backdrop-blur"></div>
);
};
return (
@ -51,7 +51,7 @@ export const Modal: React.FC<ModalProps> = ({
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} dark:bg-slate-800`}
className={`bg-white shadow-lg my-8 mx-auto max-w-2xl rounded ${className} dark:bg-slate-800 dark:text-zinc-50`}
>
<ModalHeader onClose={onClose} title={title} />
{children}