fix: adjust Modal component layout and styling for improved user experience

Author: jLynx

src/components/Modal/Modal.tsx

@@ -75,27 +75,24 @@ const Modal = ({
   return (
     <>
       {isModalOpen && (
-        <div className="fixed inset-0 z-40 flex items-start justify-center pt-[5vh]">
+        <div className="fixed inset-0 z-40 flex items-center justify-center">
           <div className="fixed inset-0 bg-black opacity-50"></div>
           <div
             style={{
               transform: `translate(${position.x}px, ${position.y}px)`,
               cursor: isDragging ? "grabbing" : "grab",
               userSelect: "none",
             }}
-            className={`z-50 mx-auto overflow-auto rounded-lg border border-gray-900 bg-gray-500/70 shadow-xl ${className}`}
+            className={`z-50 overflow-auto rounded-lg border border-gray-900 bg-gray-500 shadow-xl ${className}`}
             {...props}
           >
             {title && (
               <div
-                className="flex gap-4 border-b border-gray-500 p-4 cursor-grab select-none bg-gray-500"
+                className="flex cursor-grab select-none gap-4 border-b border-gray-500 p-4"
                 onMouseDown={handleMouseDown}
                 onDragStart={(e) => e.preventDefault()}
               >
-                <button
-                  onClick={closeModal}
-                  className="pr-3 bg-gray-500 hover:bg-gray-600"
-                >
+                <button onClick={closeModal}>
                   <FontAwesomeIcon
                     icon={faRectangleXmark}
                     className="text-2xl text-white"
@@ -104,11 +101,15 @@ const Modal = ({
                 <p className="text-white">{title}</p>
               </div>
             )}
-            <div className={`h-full w-full bg-gray-500/70 ${title && "p-4"}`}>
+            <div
+              className={`h-full w-full cursor-default bg-gray-500 ${
+                title && "p-4"
+              }`}
+            >
               {children}
             </div>
             {footer && (
-              <div className="border-t border-gray-500 p-4 bg-gray-500">
+              <div className="border-t border-gray-500 bg-gray-500 p-4">
                 {footer}
               </div>
             )}