mise en commun des scrollbar,et padding des glassBorder

src/components/Header/Header.module.css

@@ -150,7 +150,7 @@
 
 .notificationDiv {
     position: absolute;
-    width: 300px;
+    width: auto;
     top: 105%;
     right: 2rem;
     opacity: 0;
@@ -159,7 +159,8 @@
     z-index: 0;
     max-height: 60vh;
     overflow: scroll;
-    scrollbar-width: none;
+    overflow-x: hidden;
+    backdrop-filter: blur(10px);
 }
 
 .activeNotificationDiv {

src/components/NotificationCard/NotificationCard.jsx

@@ -7,7 +7,7 @@ import styles from "./NotificationCard.module.css"
 function NotificationCard({notifications, deleteNotification}) {
     return (
         notifications.map((notification, index) => (
-            <div className={styles.notificationCard} key={index}>
+            <div className={`${styles.notificationCard} glassBorder`}key={index}>
                 <div className={styles.cardHeader}>
                     <span className={styles.timeTag}>
                         Le {formatDate(notification.created_at)} à {formatTime(notification.created_at)}

src/components/ToolBar/ToolBar.module.css

@@ -83,7 +83,7 @@
         right: 0;
         align-items: flex-start;
         width: 100%;
-        margin-top: 16px;
+        margin: 6px 0 16px 0;
     }
 
     .filterContainer{

src/index.css

@@ -2,6 +2,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  scrollbar-color: #b5b5b5 transparent;
 }
 
 html {
@@ -26,13 +27,6 @@ html {
     inset 0 0 8px 4px rgba(255, 255, 255, 0.2);
 }
 
-@media screen and (max-width: 768px) {
-  .content{
-    padding: 0.7rem;
-  }
-}
-
-
 .content {
     padding: 1.5rem;
     z-index: 1;
@@ -78,6 +72,7 @@ body.dark {
 }
 
 .glassBorder{
+    padding: 10px 20px 10px 20px;
     border-radius: 20px;
     border: none;
     background: rgb(255, 255, 255, 0.25);
@@ -101,3 +96,10 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
+
+@media screen and (max-width: 768px) {
+    .content{
+        padding: 0.7rem;
+    }
+}
+

src/pages/Admin/components/PendingMembers/PendingMembers.module.css

@@ -2,6 +2,7 @@
   width: 100%;
 }
 
+
 .rightBlock > h2 {
   font-size: 29px;
 }

src/pages/EventDetail/components/AssignUserBtn/AssignUserBtn.module.css

@@ -9,7 +9,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 20px 10px 20px;
 }
 
 .userName {

src/pages/EventDetail/components/EventTask/EventTask.module.css

@@ -17,16 +17,6 @@
 
 .content {
     margin: 16px 0 16px 0;
-    padding: 10px 20px 10px 20px;
-    border-radius: 20px;
-    border: none;
-    background: transparent;
-    box-shadow:
-            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
-            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
-            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
-            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
-    opacity: 0;
     animation: fadeInUp 0.6s ease-out forwards;
     animation-delay: calc(var(--i) * 0.1s);
 }

src/pages/EventDetail/components/EventTask/EventTask.tsx

@@ -81,7 +81,7 @@ export default function EventTask({ task, index, eventId }: EventTaskProps) {
     };
 
     return (
-        <div style={{ "--i": index } as any} key={index} className={styles.content}>
+        <div style={{ "--i": index } as any} key={index} className={`${styles.content} glassBorder`}>
             <div className={styles.task}>
                 <div>
           <span>

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

@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     width: 80%;
-    padding: 10px 20px 10px 20px;
 }
 
 .eventContainer:hover {

src/pages/Home/components/Calendar/Calendar.module.css

@@ -114,27 +114,13 @@
     list-style: none;
 }
 
-.eventGroup{
-    border-radius: 20px;
-    padding: 15px;
-    margin-top: 16px;
-    border: none;
-    background: rgb(255, 255, 255, 0.25);
-    box-shadow:
-            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
-            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
-            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
-            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
-}
-
 .glassCard {
     width: 45%;
     max-height: 90vh;
     margin: 16px 0 16px 0;
-    padding: 10px 20px 10px 20px;
     height: fit-content;
     overflow: scroll;
-
+    overflow-x: hidden;
 }
 
 .glassCard::-webkit-scrollbar{

src/pages/Home/components/EventList/EventList.module.css

@@ -2,9 +2,9 @@
     width: 45%;
     max-height: 90vh;
     margin: 16px 0 16px 0;
-    padding: 10px 20px 10px 20px;
     height: fit-content;
     overflow: scroll;
+    overflow-x: hidden;
 }
 
 .glassCard::-webkit-scrollbar{
@@ -41,7 +41,6 @@ h2{
 
 .eventGroup{
     margin: 16px 0 16px 0;
-    padding: 10px 20px 10px 20px;
 }
 
 .eventGroup:hover{

src/pages/Profile/components/ManageMember/DeleteMember/DeleteMemberBtn.tsx

@@ -19,7 +19,7 @@ export default function DeleteMemberBtn({name, id, className}: { name: string, i
     }
 
     return <div className={className}>
-        <Button variant={"danger"} onClick={() => setOpen(true)}>Désactiver</Button>
+        <Button variant={"danger"} onClick={() => setOpen(true)}>Supprimer</Button>
 
         <Modal open={open} onClose={() => setOpen(false)} title={"Supprimer"}>
             <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 15 }}>

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

@@ -27,16 +27,10 @@
 
 .select {
     width: 70%;
-    padding: 10px 14px;
-
     font-size: 14px;
     font-weight: 500;
     color: #1d1d1f;
-
+    background: rgb(255, 255, 255, 0.75);
-    background-color: #ffffff;
-    border: 1px solid #d2d2d7;
-    border-radius: 10px;
-
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;

src/pages/Profile/components/ManageMember/ManageMember.tsx

@@ -4,38 +4,39 @@ import {useContext, useState} from "react";
 import styles from "./ManageMember.module.css"
 import DeactivateMemberBtn from "./DeactivateMember/DeactivateMemberBtn.jsx";
 import ModifyRole from "./ModifyRole/ModifyRole.jsx";
-import { AuthContext, AuthContextType } from "../../../../contexts/Auth/AuthContext.js";
+import {AuthContext, AuthContextType} from "../../../../contexts/Auth/AuthContext.js";
 import DeleteMemberBtn from "./DeleteMember/DeleteMemberBtn";
-import User from  "../../../../interfaces/user.interface";
+import User from "../../../../interfaces/user.interface";
 
 
-export default function ManageMember({ userToManage }: { userToManage: User }) {
+export default function ManageMember({userToManage}: { userToManage: User }) {
 
-    const { user } = useContext(AuthContext) as AuthContextType;
+    const {user} = useContext(AuthContext) as AuthContextType;
     const [open, setOpen] = useState(false);
 
 
     return <>
         <Button onClick={() => setOpen(true)} variant={"default"} className={styles.manageBtn}>
-            <img src="/icons/tools.svg" alt="tools icon" className={styles.icon} />
+            <img src="/icons/tools.svg" alt="tools icon" className={styles.icon}/>
             <p>Gérer</p>
         </Button>
 
         <Modal open={open} onClose={() => setOpen(false)} title={`Gestion de l'utilisateur ${userToManage.name}`}>
 
             {(user?.id != userToManage.id) ? (
-                <div className={styles.manageSection}>
+                <div className={`${styles.manageSection} glassBorder`}>
-                    <h3>Désactiver le compte</h3>
+                        <h3>Désactiver le compte</h3>
-                    <DeactivateMemberBtn name={userToManage.name} id={userToManage.id} className={styles.manageBlockContent} />
+                        <DeactivateMemberBtn name={userToManage.name} id={userToManage.id}
-
+                                             className={styles.manageBlockContent}/>
-                    <h3>Supprimer le compte</h3>
+                        <h3> Supprimer le compte</h3>
-                    <DeleteMemberBtn name={userToManage.name} id={userToManage.id} className={styles.manageBlockContent} />
+                        <DeleteMemberBtn name={userToManage.name} id={userToManage.id}
+                                         className={styles.manageBlockContent}/>
                 </div>
             ) : null}
 
-            <div className={styles.manageSection}>
+            <div className={`${styles.manageSection} glassBorder`}>
                 <h3>Modifier le rôle</h3>
-                <ModifyRole user={userToManage} />
+                <ModifyRole user={userToManage}/>
             </div>
         </Modal>
     </>

src/pages/Profile/components/ManageMember/ModifyRole/ModifyRole.jsx

@@ -40,7 +40,7 @@ export default function ModifyRole({ user }) {
         <select
             value={selectedRole}
             onChange={(e) => setSelectedRole(e.target.value)}
-            className={styles.select}
+            className={`${styles.select} glassBorder`}
         >
             {roles.map((role, index) => (
                 <option key={index} value={index+1}>

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

@@ -2,7 +2,6 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    padding: 10px 20px 10px 20px;
     gap: 20px;
 }
 

src/pages/RGPD/RGPDPage.jsx

@@ -4,7 +4,7 @@ import {Link} from "react-router";
 export default function RGPDPage() {
     return (
         <div className={`${styles.RGPD} glassCard`}>
-            <h1> Fiche d'informatino RGPD </h1>
+            <h1> Fiche d'information RGPD </h1>
 
             <section className={styles.section}>
                 <h2 className={styles.h2}> 1. Présentation du site </h2>

src/pages/RGPD/RGPDPage.module.css

@@ -11,5 +11,5 @@
 }
 
 .RGPD{
-    margin: 16px 2em;
+    margin: 16px 30px 16px 30px;
 }