débug calendrier

src/pages/Calendrier.js

@@ -85,8 +85,10 @@ const Calendrier = () => {
                             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>
+                        <button className="bouton_ajout" onClick={handleAddEvent}>
+                            <p>Ajouter l'évènement</p>
+                        </button>
                     </h2>
                     <Calendar localizer={localizer} events={allEvents} 
                     startAccessor="start" endAccessor="end" style={{height: "100%", width:"99%"}}/>

src/styles/components/_calendrier.scss

@@ -125,48 +125,58 @@ body {
                 }
             }
 
-        .Calendrier {
+            .Calendrier {
-            display: flex;
-            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);
-            backdrop-filter: blur(3px);
-            -webkit-backdrop-filter: blur(15px);
-            width: 100%;
-            margin: 5px 10px 10px 5px;
-            text-align: center;
-
-            .mini_formulaire_evenement {
                 display: flex;
                 flex-direction: row;
-                margin-top: 10px;
+                background: rgba(255, 255, 255, 0.3);
-                height: 100px;
+                border-radius: 15px;
+                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                backdrop-filter: blur(3px);
+                -webkit-backdrop-filter: blur(15px);
+                width: 100%;
+                margin: 5px 10px 10px 5px;
+                text-align: center;
 
-                .bouton_ajout {
+                .Titre {
-                    width: 300px;
+                    display: flex;
-                    height: 50px;
+                    flex-direction: column;
-                    border-radius: 10px;
+                    justify-content: space-around;
-                    border: 0.5px solid;
+                    width: 200px;
-                    border: 0;
+                
-                    background-color: rgba(163, 163, 163, 0.371);
+
-                    border: 1px solid rgba(255,255,255,0.1);
+                    .mini_formulaire_evenement {
-                    backdrop-filter: blur(30px);
+                        display: flex;
-                    color: rgb(255, 255, 255);
+                        flex-direction: column;
-                    cursor: pointer;
+                        margin-top: 10px;
-                    font-size: 15px;
+                        height: 100px;
-                    &:hover{
-                        background-color: rgba(114, 114, 114, 0.371);   
                     }
-                    &:active{
+
-                        background-color:rgba(68, 68, 68, 0.972);   
+                    .bouton_ajout {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        margin: 5px;
+                        height: 50px;
+                        align-items: center;
+                        border-radius: 10px;
+                        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 {
-                margin-top: 200px;
-
                 .rbc-day-bg {
                     border-radius: 5px;
                 }
@@ -181,4 +191,4 @@ body {
             }
         }
     }
-}
+}