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

Rewrite all styles to tailwind CSS from Bootstrap by @arccik (#58)

Browse source 
* add tailwindcss

* add header component with logo and add torrent buttons

* remove bootstrap from few files replace it with tailwindcss classes, add card which diplay all nessesarry information about torrent and current state

* Add modal component and reorganize components folder

* add useModal hook to render modal though react portal, remove UrlPromptModal and replace it with useModal.

* add taliwindcss to Desctop app

* removed bootstrap from deleteTorrentModal replace it with useModal

* replacing bootstrap with useModal

* saving

* Saving

* Header and cards now look good

* Modals still broken...

* still doesnt work

* Finally it scrolls

* Continuing to fix bugs

* Continuing to fix bugs

* Aler

* Getting better

* Desktop doesnt work with tailwind somehow

* Desktop now works with tailwind

* Styles fully work

* (De)select all buttons

* fix alert styles

* Animate progress bar

* Progress bar + error colors

* Fix error message

* Torrent status icon (#56)

* add statusIcon component to display icon of the torrent status

* change props name and remove isDownloading variable

* Tweak styles for icon

* Tweak styles

* Update styles

---------

Co-authored-by: Artur Lozovski <arccik@gmail.com>
This commit is contained in:
Igor Katson 2023-12-14 10:37:29 +00:00 • committed by GitHub
parent 911bf3a0d5
commit 50fc7f2f01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
62 changed files with 7454 additions and 1776 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,26 @@
import { Alert } from "react-bootstrap";
import { BsX } from "react-icons/bs";
import { ErrorWithLabel } from "../rqbit-web";
const AlertDanger: React.FC<{
title: string;
children: React.ReactNode;
onClose?: () => void;
}> = ({ title, children, onClose }) => {
return (
<div className="bg-red-200 p-3 rounded-md mb-3">
<div className="flex justify-between mb-2">
<h2 className="text-lg font-semibold">{title}</h2>
{onClose && (
<button onClick={onClose}>
<BsX />
</button>
)}
</div>
{children}
</div>
);
};
export const ErrorComponent = (props: {
error: ErrorWithLabel | null;
remove?: () => void;
@ -12,14 +32,11 @@ export const ErrorComponent = (props: {
}
return (
<Alert variant="danger" onClose={remove} dismissible={remove != null}>
<Alert.Heading>{error.text}</Alert.Heading>
<AlertDanger onClose={remove} title={error.text}>
{error.details?.statusText && (
<p>
<strong>{error.details?.statusText}</strong>
</p>
<div className="pb-2 text-md">{error.details?.statusText}</div>
)}
<pre>{error.details?.text}</pre>
</Alert>
<div className="whitespace-pre text-sm">{error.details?.text}</div>
</AlertDanger>
);
};