From 9fa0c948d9ed3f33ea954ca4e59cf64752ff2dfa Mon Sep 17 00:00:00 2001
From: Medenos <masfervic@hotmail.com>
Date: Tue, 27 Sep 2022 23:46:26 -0400
Subject: [PATCH] beautification du form de demande de contact

---
 .../src/components/ContactForm.js             | 54 +++++++++----------
 .../src/stylesheets/site.css                  | 37 +++++++++++++
 2 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ContactForm.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ContactForm.js
index ab92784..870a2f7 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ContactForm.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ContactForm.js
@@ -1,44 +1,44 @@
 const ContactForm = () =>{
     return (
 
-        <section>
-            <form method="post" class="form-horizontal" role="form">
-                <h4 class="text-center text-white">Demander une rencontre!</h4>
-                <div class="form-group">
-                    <div class="col-md-12">
-                        <label class="text-white">Nom*</label>
-                        <input class="form-control"  />
-                        {/* <span asp-validation-for="Name" class="text-danger"></span> */}
+        <div className="contact-form-container">
+            <form method="post" className="form-horizontal" role="form">
+                <h4 className="text-center">Demander une rencontre!</h4>
+                <div className="form-group">
+                    <div className="col-md-12">
+                        <label >Nom*</label>
+                        <input className="form-control contact-form-input"  />
+                        {/* <span asp-validation-for="Name" className="text-danger"></span> */}
                     </div>
                 </div>
-                <div class="form-group">
-                    <div class="col-md-12">
-                        <label class="text-white">Email*</label>
-                        <input class="form-control" />
-                        {/* <span asp-validation-for="Email" class="text-danger"></span> */}
+                <div className="form-group">
+                    <div className="col-md-12">
+                        <label >Email*</label>
+                        <input className="form-control contact-form-input" />
+                        {/* <span asp-validation-for="Email" className="text-danger"></span> */}
                     </div> 
                 </div>
-                <div class="form-group">
-                    <div class="col-md-12">
-                        <label class="text-white">Téléphone*</label>
-                        <input class="form-control" />
-                        {/* <span asp-validation-for="Phone" class="text-danger"></span> */}
+                <div className="form-group">
+                    <div className="col-md-12">
+                        <label >Téléphone*</label>
+                        <input className="form-control contact-form-input" />
+                        {/* <span asp-validation-for="Phone" className="text-danger"></span> */}
                     </div>
                 </div>
-                <div class="form-group">
-                    <div class="col-md-12">
-                        <label class="text-white">Message</label>
-                        <input class="form-control" rows="3"/>
-                        {/* <span asp-validation-for="Message" class="text-danger"></span> */}
+                <div className="form-group">
+                    <div className="col-md-12">
+                        <label >Message</label>
+                        <textarea className="form-control contact-form-input" rows="3"/>
+                        {/* <span asp-validation-for="Message" className="text-danger"></span> */}
                     </div>
                 </div>
-                <div class="form-group">
-                    <div class="col-md-offset-2 col-md-12">
-                        <button type="submit" class="btn btn-default bg-success">Demande</button>
+                <div className="form-group">
+                    <div className="col-md-offset-2 col-md-12">
+                        <button type="submit" className="btn btn-default bg-success contact-form-btn">Demande</button>
                     </div>
                 </div>
             </form>
-        </section>
+        </div>
     );
 }
 
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index 2901d45..47e01b5 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -111,7 +111,26 @@ html{
     background-color: plum;
 }
 
+.contact-form-container{
+    padding:3% 5% 3% 5%;
+    color:black;
+    background-color: beige;
+}
 
+.contact-form-input{
+    border:3px solid rgba(0,0,0,.25);
+    /* box-shadow: 1px 2px rgba(0, 0, 0, .25); */
+}
+
+.contact-form-btn{
+    margin-top:3%;
+    color:beige;
+    background-color: purple !important;
+}
+
+.contact-form-btn:hover{
+    background-color: plum !important;
+}
 
 .footer-container{
     color: black;
@@ -160,4 +179,22 @@ html{
         padding-right: 20px;
         background-color: rgba(255, 255, 255, .75);
     }
+
+    .contact-form-container{
+        margin-bottom: 35px;
+        margin-top: 35px;
+    }
+    
+    .contact-form-input{
+        min-height: 50px;
+    }
+
+    .contact-form-btn{
+        margin-left: 10%;
+        margin-right:10%;
+        height:75px;
+        width: 80%;
+    }
+
+
 }
\ No newline at end of file