From 9d695d7d6e2ac7e70873005b00fe9863f1d301db Mon Sep 17 00:00:00 2001
From: Theo DUPIN <Theo.DUPIN@etu.uca.fr>
Date: Tue, 8 Nov 2022 16:11:08 +0100
Subject: [PATCH] =?UTF-8?q?d=C3=A9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Calendrier.js                | 23 +++++++++---------
 src/styles/components/_calendrier.scss | 33 +++++++++++++++++++-------
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/pages/Calendrier.js b/src/pages/Calendrier.js
index f869924..0e33cc7 100644
--- a/src/pages/Calendrier.js
+++ b/src/pages/Calendrier.js
@@ -76,17 +76,18 @@ const Calendrier = () => {
                 <div className="bas_de_page">
                     <NavigationDashboard />
                     <div className="Calendrier">
-                    <h2>Ajouter un évènement</h2>
-                    <div className="mini_formulaire_evenement">
-                        <input className="ajout_titre" type="text" placeholder="Ajoutez un titre" style={{height: "20px", width: "100%", marginRight: "10px"}} 
-                            value={newEvent.Titre} onChange={(e) => setNewEvent({...newEvent, Titre: e.target.value})}
-                        />
-                        <DatePicker placeholderText="Date de début" style={{marginRight: "10px"}}
-                        selected={newEvent.Début} onChange={(Début) => setNewEvent({...newEvent, Début})} />
-                        <DatePicker placeholderText="Date de fin"
-                        selected={newEvent.Fin} onChange={(Fin) => setNewEvent({...newEvent, Fin})} />
-                        <button className="bouton_ajout" onClick={handleAddEvent}>Ajouter l'évènement</button>
-                    </div>
+                    <h2 className="Titre">Ajouter un évènement
+                        <div className="mini_formulaire_evenement">
+                            <input className="ajout_input" type="text" placeholder="Ajoutez un titre" style={{height: "20px", width: "100%", marginRight: "10px"}} 
+                                value={newEvent.Titre} onChange={(e) => setNewEvent({...newEvent, Titre: e.target.value})}
+                            />
+                            <DatePicker className="ajout_input" placeholderText="Date de début" style={{marginRight: "10px"}}
+                            selected={newEvent.Début} onChange={(Début) => setNewEvent({...newEvent, Début})} />
+                            <DatePicker className="ajout_input" placeholderText="Date de fin"
+                            selected={newEvent.Fin} onChange={(Fin) => setNewEvent({...newEvent, Fin})} />
+                            <button className="bouton_ajout" onClick={handleAddEvent}>Ajouter l'évènement</button>
+                        </div>
+                    </h2>
                     <Calendar localizer={localizer} events={allEvents} 
                     startAccessor="start" endAccessor="end" style={{height: "100%", width:"99%"}}/>
                     </div>
diff --git a/src/styles/components/_calendrier.scss b/src/styles/components/_calendrier.scss
index caa4c52..c2d1e65 100644
--- a/src/styles/components/_calendrier.scss
+++ b/src/styles/components/_calendrier.scss
@@ -124,8 +124,7 @@ body {
 
         .Calendrier {
             display: flex;
-            flex-direction: column;
-            align-items: center;
+            flex-direction: row;
             background: rgba(255, 255, 255, 0.3);
             border-radius: 15px;
             box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
@@ -135,14 +134,24 @@ body {
             margin: 5px 10px 10px 5px;
             text-align: center;
 
-            .mini_formulaire_evenement {
+            .Titre {
                 display: flex;
-                flex-direction: row;
-                margin-top: 10px;
-                height: 100px;
+                flex-direction: column;
+                justify-content: center;
+            
+
+                .mini_formulaire_evenement {
+                    display: flex;
+                    flex-direction: column;
+                    margin-top: 10px;
+                    height: 100px;
+                }
 
                 .bouton_ajout {
-                    width: 300px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 150px;
                     height: 50px;
                     border-radius: 10px;
                     border: 0.5px solid;
@@ -153,6 +162,7 @@ body {
                     color: rgb(255, 255, 255);
                     cursor: pointer;
                     font-size: 15px;
+                    margin-top: 30px;
                     &:hover{
                         background-color: rgba(114, 114, 114, 0.371);   
                     }
@@ -162,9 +172,9 @@ body {
                 }
             }
 
-            .rbc-calendar {
-                margin-top: 200px;
+            
 
+            .rbc-calendar {
                 .rbc-day-bg {
                     border-radius: 5px;
                 }
@@ -172,6 +182,11 @@ body {
                     border-radius: 10px;
                 }
             }
+
+            .ajout_input {
+                border-radius: 20px;
+                text-align: center;
+            }
         }
     }
 }
\ No newline at end of file