optimisation du css

src/pages/Home/components/Calendar/Calendar.jsx

@@ -5,7 +5,7 @@ import {AuthContext} from "../../../../contexts/Auth/AuthContext.ts";
 import ExportBtn from "../../../../components/ExportCalendarBtn/ExportBtn.tsx";
 
 function
-Calendar() {
+ Calendar() {
     const { user } = useContext(AuthContext);
 
     const monthNames = [

src/pages/Volunteers/VolunteersPage.module.css

@@ -1,14 +1,14 @@
 .container {
     width: 100%;
     position: relative;
-    padding: 10px;
+    margin: 16px 0 16px 0;
+    padding: 0px 100px 0px 100px;
+
 }
 
 .tableWrapper {
     width: 100%;
     overflow-x: auto;
-    padding: 8px;
-    border-radius: 16px;
 }
 
 .table {
@@ -17,10 +17,6 @@
     font-size: 0.95rem;
 }
 
-.table thead tr {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-}
-
 .table th {
     padding: 16px 20px;
     text-align: left;
@@ -30,7 +26,7 @@
 }
 
 .row {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
     cursor: pointer;
     transition: background 0.15s ease;
 }
@@ -40,7 +36,14 @@
 }
 
 .row:hover {
-    background: rgba(255, 255, 255, 0.06);
+    padding: 10px 20px 10px 20px;
+    border-radius: 20px;
+    border: none;
+    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);
 }
 
 .table td {
@@ -72,34 +75,26 @@
 
 .viewBtn {
     font-size: 0.85rem;
-    opacity: 0.6;
     font-weight: 500;
-    white-space: nowrap;
+    background: linear-gradient(to right, #019AFF 50%, black 50%);
+    background-size: 200% 100%;
+    background-position: right;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: background-position 0.5s ease;
 }
 
 .row:hover .viewBtn {
-    opacity: 1;
+    background-position: left;
 }
 
 @media screen and (max-width: 600px) {
     .container {
-        padding: 6px;
+        padding: 0px 15px 0px 15px;
     }
 
-    .table th:nth-child(4),
-    .table td:nth-child(4),
     .table th:nth-child(5),
     .table td:nth-child(5) {
         display: none;
     }
 }
-
-@media screen and (min-width: 1024px) {
-    .container {
-        padding: 20px;
-    }
-
-    .tableWrapper {
-        padding: 0 5em;
-    }
-}

src/pages/Volunteers/VolunteersPage.tsx

@@ -71,7 +71,7 @@ const VolunteerPage: React.FC = () => {
                 showCreate={false}
             />
 
-            <div className={`glassCard ${styles.tableWrapper}`}>
+            <div className={`${styles.tableWrapper} glassCard`}>
                 <table className={styles.table}>
                     <thead>
                         <tr>