From cdb10726684572fb2f2d3d34376c35bce1c2708c Mon Sep 17 00:00:00 2001
From: cofrizot <colin.frizot@etu.uca.fr>
Date: Wed, 18 Oct 2023 17:05:45 +0200
Subject: [PATCH] Add some style for the form

---
 .../documentation/documentation.component.css |  8 +--
 src/app/form/form.component.css               | 53 +++++++++++++++++++
 src/app/form/form.component.html              | 19 ++++---
 3 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/src/app/documentation/documentation.component.css b/src/app/documentation/documentation.component.css
index 1240d1b..b2abece 100644
--- a/src/app/documentation/documentation.component.css
+++ b/src/app/documentation/documentation.component.css
@@ -1,10 +1,10 @@
 .documentation {
     display: flex;
     flex-direction: column;
-    padding: 8rem;
+    padding: 4rem 8rem;
 
     .title {
-        font-size: 3.75rem;
+        font-size: 3rem;
         text-align: center;
     }
 
@@ -13,11 +13,11 @@
         flex-direction: column;
 
         .question {
-            font-size: 3rem;
+            font-size: 2rem;
         }
 
         .text {
-            font-size: 1.5rem;
+            font-size: 1.25rem;
         }
     }
 }
\ No newline at end of file
diff --git a/src/app/form/form.component.css b/src/app/form/form.component.css
index e69de29..a67575c 100644
--- a/src/app/form/form.component.css
+++ b/src/app/form/form.component.css
@@ -0,0 +1,53 @@
+.contact {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem 8rem;
+
+    .title {
+        font-size: 2rem;
+        text-align: center;
+    }
+
+    .form {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        width: 100%;
+        max-width: 600px;
+
+        & input, & textarea {
+            width: 100%;
+            min-height: 2rem;
+        }
+
+        & textarea {
+            resize: none;
+            height: 10rem;
+        }
+
+        .submit_button {
+            display: flex;
+            justify-content: center;
+
+            & button {
+                border: none;
+                background-color: #1976D2;
+                color: white;
+                border-radius: 10px;
+                width: 80%;
+                height: 2.5rem;
+
+                text-transform: uppercase;
+                cursor: pointer;
+
+                transition: scale .3s ease-in-out;
+
+                &:hover {
+                    scale: 1.05;
+                }
+            }
+
+        }
+    }
+}
diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index d71c382..6d5ce30 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -1,30 +1,29 @@
-<div [formGroup]="form">
+<div class="contact">
+    <h1 class="title">Nous contacter</h1>
 
-    <h1>Nous contacter</h1>
-
-    <div>
+    <div [formGroup]="form" class="form">
             <div>
-                <label for="name">Nom</label>
+<!--                <label for="name">Nom</label>-->
                 <input type="text" id="name" name="name" placeholder="Votre nom" required formControlName="from_name">
             </div>
 
             <div>
-                <label for="email">Email</label>
+<!--                <label for="email">Email</label>-->
                 <input type="email" id="email" name="email" placeholder="Votre email" required formControlName="from_email">
             </div>
 
             <div>
-                <label for="subject">Sujet</label>
+<!--                <label for="subject">Sujet</label>-->
                 <input type="text" id="subject" name="subject" placeholder="Sujet" required formControlName="subject">
             </div>
 
             <div>
-                <label for="message">Message</label>
+<!--                <label for="message">Message</label>-->
                 <textarea id="message" name="message" placeholder="Votre message" required formControlName="message"></textarea>
             </div>
 
-            <div>
-                <button type="submit" (click)="send()" [disabled]="!form.valid">Envoyer</button>
+            <div class="submit_button">
+                <button class="submit_btn" type="submit" (click)="send()" [disabled]="!form.valid">Envoyer</button>
             </div>
     </div>