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/buttons/MagnetInput.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { CgLink } from "react-icons/cg";
+import { UploadButton } from "./UploadButton";
+import { Modal } from "../modal/Modal";
+import { Button } from "./Button";
+import { ModalBody } from "../modal/ModalBody";
+import { ModalFooter } from "../modal/ModalFooter";
+import { FormInput } from "../forms/FormInput";
+
+export const MagnetInput = ({ className }: { className?: string }) => {
+  const [magnet, setMagnet] = useState<string | null>(null);
+  const [inputValue, setInputValue] = useState("");
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+
+  const clear = () => {
+    setModalIsOpen(false);
+    setMagnet(null);
+  };
+
+  return (
+    <>
+      <UploadButton
+        onClick={() => {
+          setModalIsOpen(true);
+        }}
+        data={magnet}
+        className={className}
+        resetData={() => setMagnet(null)}
+      >
+        <CgLink color="blue" />
+        <div>Add Torrent from Magnet / URL</div>
+      </UploadButton>
+
+      <Modal isOpen={modalIsOpen} onClose={clear} title="Add torrent">
+        <ModalBody>
+          <FormInput
+            autoFocus
+            value={inputValue}
+            name="magnet"
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder="magnet:?xt=urn:btih:..."
+            help="Enter magnet or HTTP(S) URL to the .torrent"
+          />
+        </ModalBody>
+
+        <ModalFooter>
+          <Button variant="cancel" onClick={clear}>
+            Cancel
+          </Button>
+          <Button
+            disabled={!inputValue}
+            variant="primary"
+            onClick={() => {
+              setMagnet(inputValue);
+              setInputValue("");
+              setModalIsOpen(false);
+            }}
+          >
+            Add
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+};