Merge pull request #106 from UoaWDCC/feat/modal-responsiveness

Completed modal responsiveness
UoaWDCC · Sep 15, 2024 · 053c217 · 053c217
2 parents a4e6ec2 + 0ba7b12
commit 053c217
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 15 deletions.
diff --git a/frontend/src/ui/Modal.module.css b/frontend/src/ui/Modal.module.css
@@ -5,7 +5,8 @@
     transform: translate(-50%, -50%);
     background-color: #87562A;
     border-radius: 2rem;
-    width: 20rem;
+    width: 80%;
+    max-width: 500px;
     padding: 1rem;
     line-height: 2.4rem;
 }
@@ -16,7 +17,7 @@
     padding-left: 1rem;
     padding-right: 1rem;
     color: #FBF5F0;
-    font-size: 2rem;
+    font-size: 1.5rem;
     text-align: center;
 }
 
@@ -29,29 +30,67 @@
     padding-bottom: 0.5rem;
 }
 
-/* temporary unresponsiveness */
-.confirmButton {
+.modal .confirmButton {
     background-color: #DD995B;
-    width: auto;
+    max-width: 60%;
     height: 3rem;
     border-style: solid;
     border-color: #FBF5F0;
     border-width: 5px;
-    border-radius: 3rem;
+    border-radius: 3em;
     color: #FBF5F0;
-    font-size: 1.5rem;
+    font-size: 1.5em;
     font-weight: bold;
+    padding-bottom: 0px;
 }
 
-.denyButton {
+.modal .denyButton {
     background-color: #A65656;
-    width: auto;
+    max-width: 60%;
     height: 3rem;
     border-style: solid;
     border-color: #FBF5F0;
     border-width: 5px;
-    border-radius: 3rem;
+    border-radius: 3em;
     color: #FBF5F0;
-    font-size: 1.5rem;
+    font-size: 1.5em;
     font-weight: bold;
+    padding-bottom: 0px;
+}
+
+/* Media Queries for Responsiveness */
+@media (max-width: 768px) {
+    .modal {
+        width: 90%;
+        padding: 0.5rem;
+    }
+
+    .text {
+        font-size: 1.2rem;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+
+    .confirmButton, .denyButton {
+        font-size: 1.2em;
+        height: 2.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .modal {
+        width: 95%;
+        padding: 0.5rem;
+    }
+
+    .text {
+        font-size: 1rem;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+
+    .confirmButton, .denyButton {
+        font-size: 1em;
+        height: 2rem;
+    }
 }
diff --git a/frontend/src/ui/contact/ContactForm.tsx b/frontend/src/ui/contact/ContactForm.tsx
@@ -4,24 +4,30 @@ import React from 'react';
 import { useState } from 'react';
 import styles from './contacts.module.css';
 
+import Modal from '@/ui/Modal'
+
 function ContactForm(){
     const [formData, setFormData] = useState({firstName: "", lastName: "", email: "", query: ""})
+    const [showModal, setShowModal] = useState(false)
 
     const handleChange = (event: React.ChangeEvent<any>) => {
         const {name, value} = event.target;
         setFormData((prevFormData) => ({...prevFormData, [name]: value}))
     }
 
-    const handleSubmit = (event: React.ChangeEvent<any>) => {
-        alert(`Thank you for submitting your query, we will get back to you as soon as possible.`)
+    const handleSubmit = (event : React.ChangeEvent<any>) => {
+        event.preventDefault(); // Stops page from reloading
+        setShowModal(true)
     }
 
   return (
     <div className={styles.queryFormBorder}>
         <div className={styles.queryFormBg}>
             <h1>Inquiry Form</h1>
-            <form onSubmit={handleSubmit}>
-
+            <form>
+                <Modal showModal={showModal} onConfirm={() => {}} onDeny={null}>
+                    Thank you for submitting your query, we will get back to you as soon as possible.
+                </Modal>
                 <div className={styles.queryFormRow}>
                     <div className={styles.names}>
                         <label>First Name:</label>