From 0ba7b12535d9d354363ae813049da46a90aa854a Mon Sep 17 00:00:00 2001
From: Henry Ly <160989916+henryhlly@users.noreply.github.com>
Date: Sat, 31 Aug 2024 14:36:12 +1200
Subject: [PATCH] Completed modal responsiveness

Added modal to contact form
---
 frontend/src/ui/Modal.module.css        | 61 ++++++++++++++++++++-----
 frontend/src/ui/contact/ContactForm.tsx | 14 ++++--
 2 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ui/Modal.module.css b/frontend/src/ui/Modal.module.css
index b17cd47..7f771d7 100644
--- 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;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/ui/contact/ContactForm.tsx b/frontend/src/ui/contact/ContactForm.tsx
index d5736f2..d8ff2a6 100644
--- 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>