Finalisation page calendrier

src/pages/Calendrier.js

@@ -79,11 +79,10 @@ const Calendrier = () => {
                     <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})}
+                                value={newEvent.Titre} onChange={(e) => setNewEvent({...newEvent, Titre: e.target.value})}/>
-                            />
+                            <DatePicker className="ajout_input" placeholderText="Date de début" style={{height: "20px", width: "100%", 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 className="ajout_input" placeholderText="Date de fin"
+                            <DatePicker className="ajout_input" placeholderText="Date de fin" style={{height: "20px", width: "100%"}}
                             selected={newEvent.Fin} onChange={(Fin) => setNewEvent({...newEvent, Fin})} />
                         </div>
                         <button className="bouton_ajout" onClick={handleAddEvent}>

src/styles/components/_calendrier.scss

@@ -141,14 +141,20 @@ body {
                     display: flex;
                     flex-direction: column;
                     justify-content: space-around;
-                    width: 200px;
+                    width: 175px;
+                    margin: 30px;
 
+                    border-radius: 15px;
+                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                    backdrop-filter: blur(3px);
+                    -webkit-backdrop-filter: blur(15px);                 
                 
                     .mini_formulaire_evenement {
                         display: flex;
                         flex-direction: column;
                         margin-top: 10px;
                         height: 100px;
+
                     }
 
                     .bouton_ajout {
@@ -156,6 +162,9 @@ body {
                         flex-direction: column;
                         justify-content: space-around;
                         align-items: center;
+                        margin-left: auto;
+                        margin-right: auto;
+                        width: 75%;
                         height: 50px;
                         border-radius: 10px;
                         background-color: rgba(163, 163, 163, 0.371);
@@ -184,7 +193,7 @@ body {
             }
 
             .ajout_input {
-                border-radius: 20px;
+                border-radius: 10px;
                 text-align: center;
             }
         }