diff --git a/src/components/TeamMembers/TeamMembers.tsx b/src/components/TeamMembers/TeamMembers.tsx index 83cfbdc..9f7f1a7 100644 --- a/src/components/TeamMembers/TeamMembers.tsx +++ b/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 = ({ volunteer }): JSX.Element const hasWishes = volunteer.dayWishes.length > 0 return ( <> - - {hasWishes ? "" : "?"} - - - {hasWishes ? "" : "?"} - + {dayList.map((dayId) => ( + + {hasWishes ? "" : "?"} + + ))} ) } @@ -73,8 +72,14 @@ const TeamMembers: FC = ({ teamId }): JSX.Element => { Bénévoles - S ({volunteers.filter(hasDay("S")).length}) - D ({volunteers.filter(hasDay("D")).length}) + <> + {dayList.map((dayId) => ( + + {dayId.toUpperCase()} ( + {volunteers.filter(hasDay(dayId.toUpperCase())).length}) + + ))} + {volunteers.map((volunteer) => ( diff --git a/src/components/TeamMembers/styles.module.scss b/src/components/TeamMembers/styles.module.scss index 0228b48..972d385 100755 --- a/src/components/TeamMembers/styles.module.scss +++ b/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 { diff --git a/src/theme/variables.scss b/src/theme/variables.scss index dc112a1..36656d7 100755 --- a/src/theme/variables.scss +++ b/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);