replacing bootstrap with useModal

crates/librqbit/webui/src/components/modal/DeleteTorrentModal.tsx

@@ -13,7 +13,7 @@ export const DeleteTorrentModal: React.FC<{
   if (!show) {
     return null;
   }
-  const [Modal, isOpen, openModal, closeModal] = useModal();
+  const [Modal, isOpen, , closeModal] = useModal();
 
   const [deleteFiles, setDeleteFiles] = useState(false);
   const [error, setError] = useState<ErrorWithLabel | null>(null);
@@ -58,7 +58,7 @@ export const DeleteTorrentModal: React.FC<{
     >
       <h1 className="text-xl mb-2">Delete torrent</h1>
       <div className="flex my-3 justify-start gap-4">
-        <div className="mt-4">
+        <div className="mt-2">
           <p className="text-gray-700">
             Are you sure you want to delete the torrent?
           </p>
@@ -82,7 +82,7 @@ export const DeleteTorrentModal: React.FC<{
       <div className="flex gap-2 justify-end">
         {deleting && <Spinner />}
         <button
-          className="p-2 rounded-lg border-1 border-red-50 drop-shadow-md hover:border-red-400"
+          className="p-2 rounded-lg border-1 border-red-50 drop-shadow-md hover:border-slate-400 hover:text-slate-500"
           onClick={close}
         >
           Cancel

crates/librqbit/webui/src/components/modal/FileSelectionModal.tsx

@@ -1,10 +1,13 @@
 import { useContext, useEffect, useState } from "react";
-import { Button, Modal, Form, Spinner } from "react-bootstrap";
+import { Button, Form } from "react-bootstrap";
 import { AddTorrentResponse, AddTorrentOptions } from "../../api-types";
 import { AppContext, APIContext } from "../../context";
 import { ErrorComponent } from "../ErrorComponent";
 import { formatBytes } from "../../helper/formatBytes";
 import { ErrorWithLabel } from "../../rqbit-web";
+import { Spinner } from "../Spinner";
+import { Modal } from "./Modal";
+// import useModal from "../useModal";
 
 export const FileSelectionModal = (props: {
   onHide: () => void;
@@ -28,6 +31,7 @@ export const FileSelectionModal = (props: {
   const [outputFolder, setOutputFolder] = useState<string>("");
   const ctx = useContext(AppContext);
   const API = useContext(APIContext);
+  // const [Modal, , , closeModal] = useModal({ fullScreen: true });
 
   useEffect(() => {
     console.log(listTorrentResponse);
@@ -135,31 +139,51 @@ export const FileSelectionModal = (props: {
       );
     }
   };
-
   return (
-    <Modal show onHide={clear} size="lg">
-      <Modal.Header closeButton>
-        <Modal.Title>Add torrent</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        {getBody()}
-        <ErrorComponent error={uploadError} />
-      </Modal.Body>
-      <Modal.Footer>
+    <Modal isOpen={true} onClose={clear} title="Add Torrent">
+      <h1 className="text-2xl font-bold mb-4 mt-2 text-center text-blue-500">
+        Add torrent
+      </h1>
+      {getBody()}
+      <ErrorComponent error={uploadError} />
+      <div id="footer" className="flex justify-end gap-4">
         {uploading && <Spinner />}
-        <Button
-          variant="primary"
+        <button onClick={clear}>Cancel</button>
+        <button
           onClick={handleUpload}
           disabled={
             listTorrentLoading || uploading || selectedFiles.length == 0
           }
         >
           OK
-        </Button>
-        <Button variant="secondary" onClick={clear}>
-          Cancel
-        </Button>
-      </Modal.Footer>
+        </button>
+      </div>
     </Modal>
   );
+  // return (
+  //   <Modal show onHide={clear} size="lg">
+  //     <Modal.Header closeButton>
+  //       <Modal.Title>Add torrent</Modal.Title>
+  //     </Modal.Header>
+  //     <Modal.Body>
+  //       {getBody()}
+  //       <ErrorComponent error={uploadError} />
+  //     </Modal.Body>
+  //     <Modal.Footer>
+  //       {uploading && <Spinner />}
+  //       <Button
+  //         variant="primary"
+  //         onClick={handleUpload}
+  //         disabled={
+  //           listTorrentLoading || uploading || selectedFiles.length == 0
+  //         }
+  //       >
+  //         OK
+  //       </Button>
+  //       <Button variant="secondary" onClick={clear}>
+  //         Cancel
+  //       </Button>
+  //     </Modal.Footer>
+  //   </Modal>
+  // );
 };

crates/librqbit/webui/src/components/modal/Modal.tsx

@@ -0,0 +1,79 @@
+// Modal.tsx
+import React, { useEffect, useState, type ReactNode } from "react";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState(isOpen);
+
+  useEffect(() => {
+    setIsModalOpen(isOpen);
+  }, [isOpen]);
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    onClose();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Escape") {
+      closeModal();
+    }
+  };
+
+  return (
+    <div
+      className={`fixed top-0 left-0 w-full h-full flex items-center justify-center bg-opacity-50 ${
+        isModalOpen ? "" : "hidden"
+      }`}
+      onClick={closeModal}
+    >
+      <div
+        className="bg-white p-6 rounded shadow-lg"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        tabIndex={-1}
+      >
+        <div className="flex justify-between items-center border-b-2 pb-4">
+          <h2 id="modal-title" className="text-2xl font-semibold">
+            {title}
+          </h2>
+          <button
+            className="text-gray-500 hover:text-gray-700 focus:outline-none"
+            onClick={closeModal}
+            aria-label="Close modal"
+          >
+            <svg
+              className="h-6 w-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              ></path>
+            </svg>
+          </button>
+        </div>
+        <div className="mt-4">{children}</div>
+      </div>
+    </div>
+  );
+};

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

@@ -68,7 +68,7 @@ const useModal = (
             <div className="fixed inset-0 transition-opacity">
               <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
             </div>
-            <div className="flex items-center justify-center min-h-screen">
+            <div className="flex items-center justify-center min-h-screen p-4">
               <div
                 className={`z-50 ${
                   options.fullScreen ? "w-full h-full" : "max-w-md"