débug

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>
+                    <h2 className="Titre">Ajouter un évènement
                         <div className="mini_formulaire_evenement">
-                        <input className="ajout_titre" type="text" placeholder="Ajoutez un titre" style={{height: "20px", width: "100%", marginRight: "10px"}} 
+                            <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 placeholderText="Date de début" style={{marginRight: "10px"}}
+                            <DatePicker className="ajout_input" placeholderText="Date de début" style={{marginRight: "10px"}}
                             selected={newEvent.Début} onChange={(Début) => setNewEvent({...newEvent, Début})} />
-                        <DatePicker placeholderText="Date de fin"
+                            <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>

src/styles/components/_calendrier.scss

@@ -124,8 +124,7 @@ body {
 
         .Calendrier {
             display: flex;
-            flex-direction: column;
+            flex-direction: row;
-            align-items: center;
             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;
 
+            .Titre {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            
+
                 .mini_formulaire_evenement {
                     display: flex;
-                flex-direction: row;
+                    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;
+            }
         }
     }
 }