feat: add confirmation modal

cesium · Mar 25, 2024 · 854b44d · 854b44d
1 parent 19cf52c
commit 854b44d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 38 deletions.
diff --git a/src/components/confirmationModal.jsx b/src/components/confirmationModal.jsx
@@ -1,30 +1,8 @@
-export default function ConfirmationModal({ placeHolder, confirmAction, closeModal }) {
+export default function ConfirmationModal({ placeHolder, closeModal }) {
 
   return (
     <div className="fixed top-0 bottom-0 left-0 right-0 bg-gray-800 bg-opacity-75 flex justify-center items-center">
-      <div className="relative bg-white rounded-lg shadow-lg">
-        <button
-          className="absolute top-3 end-2.5 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"
-          onClick={closeModal}
-          type="button"
-        >
-          <svg
-            className="w-3 h-3"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 14 14"
-          >
-            <path
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-            />
-          </svg>
-          <span className="sr-only">Close modal</span>
-        </button>
+      <div className="relative bg-black rounded-lg shadow-lg">
         <div className="p-4 md:p-5 text-center">
           <svg
             className="mx-auto mb-4 text-gray-400 w-12 h-12"
@@ -41,19 +19,18 @@ export default function ConfirmationModal({ placeHolder, confirmAction, closeMod
               d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
             />
           </svg>
-          <h3 className="mb-5 text-lg font-normal text-gray-500">
+          <h3 className="mb-5 text-lg font-normal text-white">
             {placeHolder}
           </h3>
           <button
-            onClick={confirmAction}
             className="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center"
-            type="button"
+            type="submit"
           >
             Yes, I'm sure
           </button>
           <button
             onClick={closeModal}
-            className="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700"
+            className="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary"
             type="button"
           >
             No, cancel

diff --git a/src/components/teamFormation/createTeam.jsx b/src/components/teamFormation/createTeam.jsx
@@ -8,6 +8,7 @@ export default function CreateTeam() {
 
   async function submit(e) {
     e.preventDefault();
+    closeModal();
     const formData = new FormData(e.target);
     const response = await fetch("/api/teams/create", {
       method: "POST",
@@ -30,12 +31,6 @@ export default function CreateTeam() {
     setShowModal(false);
   }
 
-  function confirmAction(e) {
-    // submit forms and close modal
-    submit(e)
-    closeModal();
-  }
-
   return (
     <div className="mx-auto max-w-7xl px-4 sm:px-0 pb-24">
       <div className="mx-auto max-w-3xl">
@@ -100,16 +95,19 @@ export default function CreateTeam() {
           )}
           <button
             className="text-white bg-primary hover:bg-primary focus:ring-4 focus:outline-none focus:ring-primary font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
-            onClick={openModal}
             type="button"
+            onClick={openModal}
           >
             Create
           </button>
+          {showModal &&
+            <ConfirmationModal
+              placeHolder="Are you sure you want to create this team?"
+              closeModal={closeModal}
+            />
+          }
         </form>
       </div>
-      {showModal &&
-        <ConfirmationModal showModal={showModal} closeModal={closeModal} confirmAction={confirmAction} placeHolder="Are you sure you want to create a new team?" />
-      }
     </div>
   );
 }