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

* 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>

crates/librqbit/webui/src/components/UploadButton.tsx

@@ -1,72 +0,0 @@
-import { useContext, useEffect, useState } from "react";
-import { Button } from "react-bootstrap";
-import {
-  AddTorrentResponse,
-  ErrorDetails as ApiErrorDetails,
-} from "../api-types";
-import { APIContext } from "../context";
-import { ErrorWithLabel } from "../rqbit-web";
-import { FileSelectionModal } from "./FileSelectionModal";
-
-export const UploadButton: React.FC<{
-  buttonText: string;
-  onClick: () => void;
-  data: string | File | null;
-  resetData: () => void;
-  variant: string;
-}> = ({ buttonText, onClick, data, resetData, variant }) => {
-  const [loading, setLoading] = useState(false);
-  const [listTorrentResponse, setListTorrentResponse] =
-    useState<AddTorrentResponse | null>(null);
-  const [listTorrentError, setListTorrentError] =
-    useState<ErrorWithLabel | null>(null);
-  const API = useContext(APIContext);
-
-  // Get the torrent file list if there's data.
-  useEffect(() => {
-    if (data === null) {
-      return;
-    }
-
-    let t = setTimeout(async () => {
-      setLoading(true);
-      try {
-        const response = await API.uploadTorrent(data, { list_only: true });
-        setListTorrentResponse(response);
-      } catch (e) {
-        setListTorrentError({
-          text: "Error listing torrent files",
-          details: e as ApiErrorDetails,
-        });
-      } finally {
-        setLoading(false);
-      }
-    }, 0);
-    return () => clearTimeout(t);
-  }, [data]);
-
-  const clear = () => {
-    resetData();
-    setListTorrentError(null);
-    setListTorrentResponse(null);
-    setLoading(false);
-  };
-
-  return (
-    <>
-      <Button variant={variant} onClick={onClick} className="m-1">
-        {buttonText}
-      </Button>
-
-      {data && (
-        <FileSelectionModal
-          onHide={clear}
-          listTorrentError={listTorrentError}
-          listTorrentResponse={listTorrentResponse}
-          data={data}
-          listTorrentLoading={loading}
-        />
-      )}
-    </>
-  );
-};