Create table

src/pages/Volunteers/VolunteersPage.module.css

@@ -4,163 +4,102 @@
     padding: 10px;
 }
 
-.usersList {
-    display: grid;
-    gap: 16px;
+.tableWrapper {
     width: 100%;
-    grid-template-columns: 1fr;
+    overflow-x: auto;
+    padding: 8px;
+    border-radius: 16px;
 }
 
-.usersList > * {
-    min-width: 0;
-}
-
-.profileboard {
+.table {
     width: 100%;
-    max-width: 380px; 
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    box-sizing: border-box;
-    margin: 1rem 0;
-    padding: 12px 10px;
-    border-radius: 12px;
-}
-.header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
+    border-collapse: collapse;
+    font-size: 0.95rem;
 }
 
-.header h2 {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: bold;
+.table thead tr {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.table th {
+    padding: 16px 20px;
+    text-align: left;
+    font-weight: 600;
+    opacity: 0.7;
+    white-space: nowrap;
+}
+
+.row {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+
+.row:last-child {
+    border-bottom: none;
+}
+
+.row:hover {
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.table td {
+    padding: 14px 20px;
+    vertical-align: middle;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: 70%; 
+    max-width: 220px;
 }
 
-.expandButton {
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    background: transparent;
-    border: none;
-    font-size: 16px;
+.avatarCell {
+    width: 52px;
+    padding: 10px 16px !important;
 }
 
-.moreButtonClicked {
-    transform: rotate(90deg);
-}
-
-.mainContent {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-.basicInfo {
-    flex: 1;
-}
-.expandedContent {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 10px;
-}
-.textInfo {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-.contactInfo {
-    margin-top: 8px;
-}
-.contactInfo p {
-    margin: 4px 0;
-    font-size: 0.9rem;
-}
-.bottomBar {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 10px;
-}
-.profilePictureContainer {
-    width: 100px;
-    height: 100px;
-    margin-bottom: 10px;
-}
-.profilePicture {
-    width: 100%;
-    height: 100%;
+.avatar {
+    width: 38px;
+    height: 38px;
     border-radius: 50%;
     object-fit: cover;
-}
-@keyframes slideInMember {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-@media screen and (min-width: 768px) {
-    .profileboard {
-        max-width: 600px;
-        padding: 16px 12px;
-    }
-    .header h2 {
-        font-size: 1.2rem;
-        max-width: 75%;
-    }
-    .profilePictureContainer {
-        width: 150px;
-        height: 150px;
-        margin-right: 15px;
-    }
-    .expandedContent {
-        flex-direction: row;
-        gap: 15px;
-    }
+    display: block;
 }
 
-.loading {
-    width: 100%;
-    text-align: center;
-    font-size: 1.1rem;
+.actionCell {
+    width: 60px;
+    text-align: right;
+}
+
+.viewBtn {
+    font-size: 0.85rem;
+    opacity: 0.6;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.row:hover .viewBtn {
     opacity: 1;
-    color: white;
+}
+
+@media screen and (max-width: 600px) {
+    .container {
+        padding: 6px;
+    }
+
+    .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;
     }
-    .usersList {
-        gap: 20px;
-        grid-template-columns: repeat(3, 1fr);
-        padding-right: 5em;
-        padding-left: 5em;
-    }
-    .profileboard {
-        max-width: 700px;
-        padding: 20px;
-        flex-direction: column;
-    }
-    .header h2 {
-        font-size: 1.4rem;
-        max-width: 80%;
-    }
-    .expandedContent {
-        flex-direction: row;
-        gap: 20px;
-    }
-    .profilePictureContainer {
-        width: 200px;
-        height: auto;
-    }
-    .contactInfo p {
-        font-size: 1rem;
+
+    .tableWrapper {
+        padding: 0 5em;
     }
 }