modif page calendrier

src/pages/Calendrier.js

@@ -78,14 +78,14 @@ const Calendrier = () => {
                     <div className="Calendrier">
                     <h2>Ajouter un évènement</h2>
                     <div className="mini_formulaire_evenement">
-                        <input type="text" placeholder="Ajoutez un titre" style={{height: "50%", width: "100%", marginRight: "10px"}} 
+                        <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 onClick={handleAddEvent}>Ajouter l'évènement</button>
+                        <button className="bouton_ajout" onClick={handleAddEvent}>Ajouter l'évènement</button>
                     </div>
                     <Calendar localizer={localizer} events={allEvents} 
                     startAccessor="start" endAccessor="end" style={{height: "100%", width:"99%"}}/>

src/styles/components/_calendrier.scss

@@ -139,6 +139,27 @@ body {
                 display: flex;
                 flex-direction: row;
                 margin-top: 10px;
+                height: 100px;
+
+                .bouton_ajout {
+                    width: 300px;
+                    height: 50px;
+                    border-radius: 10px;
+                    border: 0.5px solid;
+                    border: 0;
+                    background-color: rgba(163, 163, 163, 0.371);
+                    border: 1px solid rgba(255,255,255,0.1);
+                    backdrop-filter: blur(30px);
+                    color: rgb(255, 255, 255);
+                    cursor: pointer;
+                    font-size: 15px;
+                    &:hover{
+                        background-color: rgba(114, 114, 114, 0.371);   
+                    }
+                    &:active{
+                        background-color:rgba(68, 68, 68, 0.972);   
+                    }
+                }
             }
 
             .rbc-calendar {