From e8de1b463f0a6c688027a21279cfaaa1784b59c2 Mon Sep 17 00:00:00 2001
From: Kasundie Hewawasam <e20148@eng.pdn.ac.lk>
Date: Thu, 10 Oct 2024 20:54:52 +0530
Subject: [PATCH] Contact form updated

---
 front-end/src/Pages/Contact.jsx               | 56 +++++++++----------
 front-end/src/components/Components.css       | 24 ++++++++
 .../{Contact.css => Contact.module.css}       | 15 +++--
 3 files changed, 62 insertions(+), 33 deletions(-)
 rename front-end/src/components/{Contact.css => Contact.module.css} (94%)

diff --git a/front-end/src/Pages/Contact.jsx b/front-end/src/Pages/Contact.jsx
index c4b1c225..10fdd621 100644
--- a/front-end/src/Pages/Contact.jsx
+++ b/front-end/src/Pages/Contact.jsx
@@ -3,7 +3,7 @@ import DrErunikaDayaratna from '../assets/erunika-dayaratna.jpg';
 import contactImg from '../assets/contactImg.jpg';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUser, faPhone, faEnvelope} from '@fortawesome/free-solid-svg-icons';
-
+import style from "../components/Contact.module.css";
 /*Contact Page*/ 
 function Contact() {
 
@@ -51,70 +51,70 @@ function Contact() {
   </nav>
     </div>
 
-    <div className = "contactpage">
+    <div className = {style["contactpage"]}>
 
-    <div className = "contactDetails">
+    <div className = {style["contactDetails"]}>
     {/* Image and the contact details of the Project manager */}
-    <div className = "contactManagerCoordinator"> 
-      <img className="Dr-Upul-Jayasinghe-img" src={DrUpulJayasinghe} alt="DrUpulJayasinghe" /> 
-      <div className = "contactMCDetails">
+    <div className = {style["contactManagerCoordinator"]}> 
+      <img className = {style["Dr-Upul-Jayasinghe-img"]} src={DrUpulJayasinghe} alt="DrUpulJayasinghe" /> 
+      <div className = {style["contactMCDetails"]}>
         <h3>Dr. Upul Jayasinghe</h3>
         <h4>Manager</h4>
         <p>Telephone Number: <a href="tel:+94760416590">+94 76 0416 590</a></p>
         <p>Email Address: <a href="mailto:upuljm@eng.pdn.ac.lk">upuljm@eng.pdn.ac.lk</a></p>
-        <a href="https://people.ce.pdn.ac.lk/staff/academic/upul/"><FontAwesomeIcon className = "contactIcons" icon={faUser} /></a>
-        <a href="tel:+94760416590"><FontAwesomeIcon className = "contactIcons" icon={faPhone} /></a>
-        <a href="mailto:upuljm@eng.pdn.ac.lk"><FontAwesomeIcon className = "contactIcons" icon={faEnvelope} /></a>
+        <a href="https://people.ce.pdn.ac.lk/staff/academic/upul/"><FontAwesomeIcon className = {style["contactIcons"]} icon={faUser} /></a>
+        <a href="tel:+94760416590"><FontAwesomeIcon className = {style["contactIcons"]} icon={faPhone} /></a>
+        <a href="mailto:upuljm@eng.pdn.ac.lk"><FontAwesomeIcon className = {style["contactIcons"]} icon={faEnvelope} /></a>
       </div>
 
     </div>
 
     {/* Image and the contact details of the Project coordinator */}
-    <div className = "contactManagerCoordinator">
-      <img className="Dr-Erunika-Dayaratna-img" src={DrErunikaDayaratna} alt="DrErunikaDayaratna" />
-      <div className = "contactMCDetails">
+    <div className = {style["contactManagerCoordinator"]}>
+      <img  className = {style["Dr-Erunika-Dayaratna-img"]} src={DrErunikaDayaratna} alt="DrErunikaDayaratna" />
+      <div className = {style["contactMCDetails"]}>
         <h3>Dr. Erunika Dayaratna</h3>
         <h4>Coordinator</h4>
         <p>Telephone Number: <a href="tel:+94766986500">+94 76 698 6500</a></p>
         <p>Email Address: <a href="mailto:dayaratna@sci.pdn.ac.lk">dayaratna@sci.pdn.ac.lk</a></p>
-        <a href="https://sci.pdn.ac.lk/scs/staff/Erunika-Dayaratna"><FontAwesomeIcon className = "contactIcons" icon={faUser} /></a>
-        <a href="tel:+94766986500"><FontAwesomeIcon className = "contactIcons" icon={faPhone} /></a>
-        <a href="mailto:dayaratna@sci.pdn.ac.lk"><FontAwesomeIcon className = "contactIcons" icon={faEnvelope} /></a>
+        <a href="https://sci.pdn.ac.lk/scs/staff/Erunika-Dayaratna"><FontAwesomeIcon className = {style["contactIcons"]} icon={faUser} /></a>
+        <a href="tel:+94766986500"><FontAwesomeIcon className = {style["contactIcons"]} icon={faPhone} /></a>
+        <a href="mailto:dayaratna@sci.pdn.ac.lk"><FontAwesomeIcon className = {style["contactIcons"]} icon={faEnvelope} /></a>
       </div>
     </div>
     </div>
 
 
     {/* Contact Us form */}
-    <div className = "ContactUsTitle">
+    <div className = {style["ContactUsTitle"]}>
       <h3>Contact Us</h3>
-      <p className = "ContactUsSubTitle">For inquiries or support, contact us and we'll respond promptly</p>
+      <p className = {style["ContactUsSubTitle"]}>For inquiries or support, contact us and we'll respond promptly</p>
     </div>
 
-    <div className = "contactUsForm">
-      <img className="contactImg" src={contactImg} alt="contactImg" /> 
+    <div className = {style["contactUsForm"]}>
+      <img className = {style["contactImg"]} src={contactImg} alt="contactImg" /> 
       <form onSubmit={onSubmit}>
         
-        <div className = "inputbox">
+        <div className = {style["inputbox"]}>
         <label>Full Name</label>
-        <input type = "text" className = "field" placeholder = "Enter your Full Name" name = "user_name" required/>
+        <input type = "text" className = {style["field"]} placeholder = "Enter your Full Name" name = "user_name" required/>
         </div>
 
-        <div className = "inputbox">
+        <div className = {style["inputbox"]}>
         <label>Email Address</label>
-        <input type = "email" className = "field" placeholder = "Enter your Email address" name = "user_email" required
+        <input type = "email" className = {style["field"]} placeholder = "Enter your Email address" name = "user_email" required
             title="Please enter a valid email address"/>
         </div>
 
-        <div className = "inputbox">
+        <div className = {style["inputbox"]}>
         <label>Subject</label>
-        <input type = "text" className = "field" placeholder = " Enter the Subject" name = "subject" required/>
+        <input type = "text" className = {style["field"]} placeholder = " Enter the Subject" name = "subject" required/>
         </div>
-        <div className = "inputbox">
+        <div className = {style["inputbox"]}>
         <label>Your Message</label>
-        <textarea name = "message" id = "" className = "field mess" placeholder = "Enter your message" required></textarea>
+        <textarea name = "message" id = "" className = {style["field-mess"]} placeholder = "Enter your message" required></textarea>
         </div>
-        <button type = "submit" className = "contactButton" >Send Message</button>
+        <button type = "submit" className = {style["contactButton"]}>Send Message</button>
       </form>
 
     </div>
diff --git a/front-end/src/components/Components.css b/front-end/src/components/Components.css
index 3dd2ed99..fd00f044 100644
--- a/front-end/src/components/Components.css
+++ b/front-end/src/components/Components.css
@@ -135,6 +135,30 @@
   font-size: 16px;
   color: #333;
 }
+
+/* file upload button */
+.inputbox[type="file"]::file-selector-button {
+  border-radius: 4px;
+  padding: 0 16px;
+  height: 40px;
+  cursor: pointer;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
+  margin-right: 16px;
+  transition: background-color 200ms;
+}
+
+/* file upload button hover state */
+.inputbox[type="file"]::file-selector-button:hover {
+  background-color: #f3f4f6;
+}
+
+/* file upload button active state */
+.inputbox[type="file"]::file-selector-button:active {
+  background-color: #e5e7eb;
+}
+
 /********************************************************************/
 
 /* Buttons at the bottom of a form */
diff --git a/front-end/src/components/Contact.css b/front-end/src/components/Contact.module.css
similarity index 94%
rename from front-end/src/components/Contact.css
rename to front-end/src/components/Contact.module.css
index 6781147b..cf53656f 100644
--- a/front-end/src/components/Contact.css
+++ b/front-end/src/components/Contact.module.css
@@ -111,7 +111,7 @@
 .contactUsForm img{
     width: auto;
     height: 400px;
-    margin-top: 200px;
+    margin-top: 20px;
     margin-right: 20px;
     margin-left: 20px;
 }
@@ -126,7 +126,6 @@
 .inputbox {
     margin-top: 20px;
     width: 400px;
-    margin-right: 20px;
     font-size: 18px;
 }
 
@@ -143,12 +142,18 @@
 }
 
 /* Message input section */
-.inputbox .field.mess {
+.inputbox .field-mess {
+    width: 93%;
     height: 100px;
-    resize: none;
+    background: transparent;
+    border: 2px solid #c9e1ef;
+    outline: none;
+    padding: 15px;
     font-size: 16px;
+    color: #333;
+    margin-top: 8px;
+    resize: none;
     font-family: Sans-serif;
-
 }
 
 /* Send Message button */