style: scrollable, centered modal

brown-ccv · Mar 12, 2024 · e9d4d14 · e9d4d14
1 parent 634026c
commit e9d4d14
Showing 1 changed file with 43 additions and 39 deletions.
diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx
@@ -10,7 +10,7 @@ const DownloadModal = () => {
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
-        <button className="hidden sm:inline-flex items-center justify-center text-gray-500 w-8 h-8 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg text-sm">
+        <button className="sm:inline-flex items-center justify-center text-gray-500 w-8 h-8 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg text-sm">
           <svg
             className="w-3.5 h-3.5"
             aria-hidden="true"
@@ -31,47 +31,51 @@ const DownloadModal = () => {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay
-          className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-10 w-screen overflow-y-auto"
+          className="fixed top-0 left-0 right-0 bottom-0 bg-gray-500 bg-opacity-75 transition-opacity z-10 w-screen overflow-y-auto"
           onClick={() => setIsOpen(false)}
         />
-        <Dialog.Content className="fixed inset-0 top-0 z-20 transform overflow-hidden rounded-lg text-left shadow-xl max-h-fit transition-all sm:my-8 sm:w-full sm:max-w-lg bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-          <Dialog.Close asChild>
-            <button
-              className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
-              aria-label="Close"
-              onClick={() => setIsOpen(false)}
-            >
-              <Cross2Icon />
-            </button>
-          </Dialog.Close>
-          <Dialog.Title className="DialogTitle">Download Data</Dialog.Title>
-          <form className="p-4 md:p-5">
-            <div className="flex flex-col justify-center mb-4">
-              <CustomInput label={"name"} placeholder={"Your name"} />
-              <CustomInput label={"institution"} placeholder={"Your institution"} />
-              <CustomInput label={"email"} placeholder={"Your email"} />
-              <CustomTextarea label={"description"} placeholder={"Why you need this file"} />
-            </div>
-            <button
-              type="submit"
-              className="text-white inline-flex items-center bg-black hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
-            >
-              <svg
-                className="me-1 -ms-1 w-5 h-5"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
+        <Dialog.Overlay className="fixed top-0 left-0 right-0 bottom-0 grid place-items-center z-10 w-screen overflow-y-auto">
+          <Dialog.Content className="rounded-lg text-left shadow-xl max-h-fit transition-all sm:my-8 sm:w-full sm:max-w-lg bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+            <Dialog.Close asChild>
+              <div className="flex">
+                <button
+                  className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
+                  aria-label="Close"
+                  onClick={() => setIsOpen(false)}
+                >
+                  <Cross2Icon />
+                </button>
+              </div>
+            </Dialog.Close>
+            <Dialog.Title className="DialogTitle">Download Data</Dialog.Title>
+            <form className="p-4 md:p-5">
+              <div className="flex flex-col justify-center mb-4">
+                <CustomInput label={"name"} placeholder={"Your name"} />
+                <CustomInput label={"institution"} placeholder={"Your institution"} />
+                <CustomInput label={"email"} placeholder={"Your email"} />
+                <CustomTextarea label={"description"} placeholder={"Why you need this file"} />
+              </div>
+              <button
+                type="submit"
+                className="text-white inline-flex items-center bg-black hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
               >
-                <path
-                  fillRule="evenodd"
-                  d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              Validate Email
-            </button>
-          </form>
-        </Dialog.Content>
+                <svg
+                  className="me-1 -ms-1 w-5 h-5"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+                Validate Email
+              </button>
+            </form>
+          </Dialog.Content>
+        </Dialog.Overlay>
       </Dialog.Portal>
     </Dialog.Root>
   )