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/forms/FormInput.tsx

@@ -0,0 +1,41 @@
+import { ChangeEventHandler } from "react";
+
+export const FormInput: React.FC<{
+  value: string;
+  label?: string;
+  autoFocus?: boolean;
+  name: string;
+  inputType?: string;
+  placeholder?: string;
+  help?: string;
+  disabled?: boolean;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+}> = ({
+  autoFocus,
+  value,
+  name,
+  disabled,
+  onChange,
+  label,
+  help,
+  inputType,
+  placeholder,
+}) => {
+  return (
+    <div className="flex flex-col gap-2 text-sm mb-6">
+      <label htmlFor={name}>{label}</label>
+      <input
+        autoFocus={autoFocus}
+        type={inputType}
+        className="block border rounded bg-transparent py-1.5 pl-2 text-gray-800 focus:ring-0 sm:text-sm sm:leading-6"
+        id={name}
+        name={name}
+        disabled={disabled}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+      />
+      {help && <div className="text-xs text-slate-500 mb-3">{help}</div>}
+    </div>
+  );
+};