display dayWishes in team candidates

src/components/TeamAssignment/TeamWithCandidates.tsx

@@ -31,6 +31,16 @@ const selectTeamsWithVolunteersCandidates = createSelector(
         })
 )
 
+type PropsDaysDisplay = {
+    dayWishes: string[]
+}
+
+const DaysDisplay: FC<PropsDaysDisplay> = ({ dayWishes }): JSX.Element => (
+    <span className={styles.daysDisplay}>
+        {dayWishes.map((day) => (day === "S" || day === "D" ? <strong>{day}</strong> : day))}
+    </span>
+)
+
 type Props = {
     teamId: number
 }
@@ -51,12 +61,11 @@ const TeamWithCandidates: FC<Props> = ({ teamId }): JSX.Element | null => {
                 Equipe {team.name} ({team.volunteers.length}) :
             </div>
             <ul>
-                {team.volunteers.map(({ id, lastname, firstname, teamWishes }) => (
+                {team.volunteers.map(({ id, lastname, firstname, teamWishes, dayWishes }) => (
                     <li key={id}>
-                        <b>
+                        <span className={styles.volunteerName}>
-                            {firstname} {lastname}
+                            {firstname} {lastname} (<DaysDisplay dayWishes={dayWishes} />)
-                        </b>{" "}
+                        </span>
-                        :
                         {teamWishes.map((teamWish) => {
                             const active = false
                             return (

src/components/TeamAssignment/styles.module.scss

@@ -35,3 +35,16 @@
         background-color: #fb0;
     }
 }
+
+.volunteerName {
+    font-weight: bold;
+}
+
+.daysDisplay {
+    font-weight: normal;
+    color: $color-grey-medium;
+
+    strong {
+        color: $color-green;
+    }
+}