Show more days in team member listing

src/components/TeamMembers/TeamMembers.tsx

@@ -14,6 +14,8 @@ interface ExtendedVolunteer extends Volunteer {
     teamObject: Team | undefined
 }
 
+const dayList = ["m", "j", "v", "S", "D", "l"] // Upper case for important days
+
 const selectVolunteersWithTeam = createSelector(
     selectVolunteerListAlphaSorted,
     selectTeamList,
@@ -36,22 +38,19 @@ const DaysAvailability: FC<DaysAvailabilityProps> = ({ volunteer }): JSX.Element
     const hasWishes = volunteer.dayWishes.length > 0
     return (
         <>
-            <td
-                className={classnames(
-                    styles.day,
-                    hasWishes ? hasDay("S")(volunteer) && styles.available : styles.unknown
-                )}
-            >
-                {hasWishes ? "" : "?"}
-            </td>
-            <td
-                className={classnames(
-                    styles.day,
-                    hasWishes ? hasDay("D")(volunteer) && styles.available : styles.unknown
-                )}
-            >
-                {hasWishes ? "" : "?"}
-            </td>
+            {dayList.map((dayId) => (
+                <td
+                    className={classnames(
+                        styles.day,
+                        hasWishes
+                            ? hasDay(dayId.toUpperCase())(volunteer) && styles.available
+                            : styles.unknown,
+                        dayId === dayId.toUpperCase() ? styles.weekend : styles.week
+                    )}
+                >
+                    {hasWishes ? "" : "?"}
+                </td>
+            ))}
         </>
     )
 }
@@ -73,8 +72,14 @@ const TeamMembers: FC<Props> = ({ teamId }): JSX.Element => {
             <tbody>
                 <tr>
                     <th>Bénévoles</th>
-                    <th className={styles.dayTitle}>S ({volunteers.filter(hasDay("S")).length})</th>
-                    <th className={styles.dayTitle}>D ({volunteers.filter(hasDay("D")).length})</th>
+                    <>
+                        {dayList.map((dayId) => (
+                            <th className={styles.dayTitle}>
+                                {dayId.toUpperCase()} (
+                                {volunteers.filter(hasDay(dayId.toUpperCase())).length})
+                            </th>
+                        ))}
+                    </>
                 </tr>
                 {volunteers.map((volunteer) => (
                     <tr key={volunteer.id}>

src/components/TeamMembers/styles.module.scss

@@ -1,15 +1,27 @@
 @import "../../theme/variables";
 @import "../../theme/mixins";
 .day {
-    background-color: $color-red;
     text-align: center;
     min-width: 10%;
-    &.unknown {
+
+    &.weekend {
+        background-color: $color-red;
+    }
+    &.weekend.unknown {
         background-color: $color-grey-medium;
     }
-    &.available {
+    &.weekend.available {
         background-color: $color-green;
     }
+    &.week {
+        background-color: $color-red-light;
+    }
+    &.week.unknown {
+        background-color: $color-grey-light;
+    }
+    &.week.available {
+        background-color: $color-green-light;
+    }
 }
 
 .teamMembers {

src/theme/variables.scss

@@ -1,6 +1,7 @@
 $color-white: #fff;
 $color-black: #000;
 $color-red: #f00;
+$color-red-light: #ec7c7c;
 $color-blue: rgb(43, 61, 223);
 $color-orange: #ea4d0a;
 $color-yellow: #fdd137;
@@ -9,6 +10,7 @@ $color-grey-medium: #999;
 $color-grey-light: #ccc;
 $color-grey-lighter: #eee;
 $color-green: #080;
+$color-green-light: #58ba58;
 
 $color-unknown: rgb(232, 223, 235);
 $color-active-unknown: rgb(167, 74, 196);