fin de fix css eventPage

src/components/ToolBar/tools/CreateEventBtn/CreateEventBtn.jsx

@@ -35,17 +35,17 @@ export default function CreateEventBtn() {
 
             <section className={styles.section}>
                 <div className={styles.inputContainer}>
-                    <h2>Titre</h2>
+                    <h3>Titre</h3>
                     <TextInput className={styles.input} placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
                 </div>
 
                 <div className={styles.inputContainer}>
-                    <h2>Description</h2>
+                    <h3>Description</h3>
                     <TextInput className={styles.input} placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
                 </div>
 
                 <div className={styles.inputContainer}>
-                    <h2>Date</h2>
+                    <h3>Date</h3>
                     <div className={styles.dateInputContainer}>
                         <div className={styles.dateInput}>
                             <p>Début</p>

src/components/ToolBar/tools/CreateEventBtn/CreateEventBtn.module.css

@@ -20,16 +20,10 @@
 }
 
 .inputContainer {
-
+    margin: 0.5em;
-    h2 {
-        margin-bottom: 0.5rem;
-    }
-
-    margin: 1em;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
 }
 
 .input {
@@ -51,17 +45,18 @@
 .dateInputContainer {
     display: flex;
     flex-direction: row;
-    justify-content: space-evenly;
+    gap: 40px;
 }
 
-.dateInput {
+.inputContainer h3{
- margin: 1em;
+    font-size: 20px;
 }
 
 
-@media screen and (max-width: 760px) {
+@media screen and (max-width: 900px) {
 
     .dateInputContainer {
         flex-direction: column;
+        gap: 15px;
     }
 }

src/pages/Events/EventsPage.module.css

@@ -1,15 +1,15 @@
 .eventsContainer {
     width: 100%;
     position: relative;
-    padding: 10px;
     box-sizing: border-box;
+    margin: 16px 0 16px 0;
 }
 
 .eventsList {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 10px;
+    gap: 20px;
 }
 
 .eventCard {
@@ -48,31 +48,10 @@
     margin-bottom: 8px;
 }
 
-@media screen and (min-width: 768px) {
-    .eventCard {
-        max-width: 600px;
-        padding: 16px 12px;
-    }
-    .eventCard h3 {
-        font-size: 1.2rem;
-        white-space: normal; 
-        overflow: visible;
-        text-overflow: clip;
-    }
-    .eventCard p {
-        font-size: 1rem;
-        white-space: normal;
-        overflow: visible;
-        text-overflow: clip;
-    }
-}
 @media screen and (min-width: 1024px) {
     .eventsContainer {
-        padding: 20px;
-    }
-    .eventsList {
-        gap: 20px;
     }
+
     .eventCard {
         max-width: 700px;
         padding: 20px;

src/pages/Events/components/Event/Event.module.css

@@ -1,9 +1,8 @@
 .eventContainer {
     display: flex;
     flex-direction: column;
-    margin: 1rem 0;
     width: 80%;
-    padding: 1rem 0.5rem;
+    padding: 10px 20px 10px 20px;
 }
 
 .eventContainer:hover {
@@ -118,8 +117,15 @@
         border-bottom-left-radius: 0;
     }
 
+    .eventContainerTop {
+        flex-direction: column;
+        justify-content: initial;
+        padding-bottom: 10px;
+    }
+
     .eventContainer{
         padding: 0;
+        margin: 16px 0 16px 0;
     }
 
     .eventImageDiv {
@@ -131,6 +137,6 @@
     }
 
     .eventInfos, .eventContainerBottom {
-        padding: 10px;
+        padding: 10px 20px 10px 20px;
     }
 }

src/pages/Profile/components/SettingsModal/SettingsModal.module.css

@@ -6,7 +6,6 @@
     gap: 20px;
 }
 
-
 .modifyIcon {
     height: 26px;
     width: 26px;
@@ -31,7 +30,7 @@
 }
 
 .section h4 {
-    font-size: 0.9rem;
+    font-size: 1rem;
     font-weight: 500;
     opacity: 0.85;
 }