fix: address pr comments, style

Co-Authored-By: Galen Winsor <[email protected]>
brown-ccv · Mar 12, 2024 · 5f41130 · 5f41130
1 parent 348086e
commit 5f41130
Showing 1 changed file with 12 additions and 42 deletions.
diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import * as Dialog from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import { Cross2Icon, DownloadIcon, PlusIcon } from "@radix-ui/react-icons"
 import { CustomInput } from "./CustomInput.tsx"
 import { CustomTextarea } from "./CustomTextarea.tsx"
 
@@ -11,21 +11,7 @@ const DownloadModal = () => {
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
         <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"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 16 18"
-          >
-            <path
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M8 1v11m0 0 4-4m-4 4L4 8m11 4v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3"
-            ></path>
-          </svg>
+          <DownloadIcon />
           <span className="sr-only">Download data</span>
         </button>
       </Dialog.Trigger>
@@ -36,18 +22,13 @@ const DownloadModal = () => {
         />
         <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>
+            <div className="flex justify-end">
+              <Dialog.Close className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center">
+                <Cross2Icon />
+                <span className="sr-only">Close</span>
+              </Dialog.Close>
+            </div>
+            <Dialog.Title>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"} />
@@ -57,21 +38,10 @@ const DownloadModal = () => {
               </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"
+                className="flex items-center gap-2 bg-black text-white  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"
-                >
-                  <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
+                <PlusIcon />
+                <span className="pt-1">Validate Email</span>
               </button>
             </form>
           </Dialog.Content>