Some upgrades for teams choice

src/components/Navigation/styles.module.scss

@@ -1,9 +1,23 @@
-@import "../../theme/mixins";
+@import "../../theme/variables";
 
 .mainMenu {
-    @include nav-menu;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 
 .mainMenuItem {
-    @include nav-menu-item;
+    display: inline-block;
+    margin: 0 6px;
+
+    a {
+        font-size: 0.9em;
+        font-weight: bold;
+        color: $color-black;
+        text-decoration: none;
+    }
+
+    a:hover {
+        color: $color-grey-dark;
+    }
 }

src/components/VolunteerBoard/TeamWishes/TeamWishes.tsx

@@ -30,7 +30,7 @@ const TeamWishes: FC<Props> = (): JSX.Element | null => {
 
     return (
         <div className={styles.root}>
-            <div className={styles.title}>Mes choix d&apos;équipes</div>
+            <div className={styles.title}>Mon choix d&apos;équipe</div>
             {teamWishesString && <span>{teamWishesString}</span>}
             {!teamWishesString && <span className={styles.lineEmpty}>Non renseignés</span>}
             {comment && (

src/components/VolunteerBoard/TeamWishesForm/TeamWishesForm.tsx

@@ -1,4 +1,4 @@
-import { FC, memo, useCallback, useEffect, useRef, useState } from "react"
+import { FC, memo, useCallback, useEffect, useRef } from "react"
 import { useSelector } from "react-redux"
 import get from "lodash/get"
 import set from "lodash/set"
@@ -18,7 +18,6 @@ const TeamWishesForm: FC<Props> = ({ afterSubmit }): JSX.Element | null => {
     const { addToSelection, toggleToSelection, isInSelection } = useSelection()
     const commentRef = useRef<HTMLTextAreaElement | null>(null)
     const [userWishes, saveWishes] = useUserTeamWishes()
-    const [extendedTeam, setExtendedTeam] = useState<number | null>(null)
 
     useEffect(() => {
         if (!userWishes) return
@@ -28,13 +27,6 @@ const TeamWishesForm: FC<Props> = ({ afterSubmit }): JSX.Element | null => {
 
     const onTeamClick = useCallback((id) => toggleToSelection(id), [toggleToSelection])
 
-    const onExtendClick = useCallback(
-        (id) => setExtendedTeam(extendedTeam === id ? null : id),
-        [extendedTeam, setExtendedTeam]
-    )
-
-    console.log("extendedTeam", extendedTeam)
-
     const onSubmit = useCallback(() => {
         const teamWishesComment = get(commentRef, "current.value", "")
         const teamWishes = teams
@@ -47,8 +39,16 @@ const TeamWishesForm: FC<Props> = ({ afterSubmit }): JSX.Element | null => {
 
     return (
         <div className={styles.root}>
-            <div className={styles.title}>
-                Sélectionne la ou les équipes que tu aimerais rejoindre :
+            <div className={styles.title}>Mon choix d&apos;équipe</div>
+            <div className={styles.intro}>
+                <p>Sélectionne la ou les équipes que tu aimerais rejoindre.</p>
+                <p>
+                    Pour plus d&apos;informations sur les équipes,{" "}
+                    <a href="/teams" target="_blank">
+                        clique ici
+                    </a>
+                    .
+                </p>
             </div>
             <ul className={styles.teamList}>
                 {teams.map((team: any) => (
@@ -56,8 +56,7 @@ const TeamWishesForm: FC<Props> = ({ afterSubmit }): JSX.Element | null => {
                         key={team.id}
                         className={classnames(
                             styles.teamLine,
-                            isInSelection(team.id) && styles.active,
-                            extendedTeam === team.id && styles.extended
+                            isInSelection(team.id) && styles.active
                         )}
                     >
                         <button
@@ -67,14 +66,6 @@ const TeamWishesForm: FC<Props> = ({ afterSubmit }): JSX.Element | null => {
                         >
                             {team.name}
                         </button>
-                        <button
-                            type="button"
-                            onClick={() => onExtendClick(team.id)}
-                            className={styles.extendButton}
-                        >
-                            Détails
-                        </button>
-                        <div className={styles.teamDescription}>{team.description}</div>
                     </li>
                 ))}
             </ul>

src/components/VolunteerBoard/TeamWishesForm/styles.module.scss

@@ -11,6 +11,15 @@
     text-align: center;
 }
 
+.intro {
+    padding: 15px 0;
+
+    p {
+        margin: 0;
+        padding: 4px 0;
+    }
+}
+
 .inputWrapper {
     margin: 10px 0;
 
@@ -66,17 +75,6 @@
     }
 }
 
-.teamDescription {
-    display: none;
-    padding: 2px 4px 6px 8px;
-    color: $color-grey-dark;
-    font-size: 0.95em;
-
-    .extended & {
-        display: block;
-    }
-}
-
 .commentWrapper {
     margin: 6px 0;
 

src/theme/main.scss

@@ -8,3 +8,13 @@ body {
     font-family: "Helvetica-Light", Helvetica, Arial, sans-serif;
     background-color: $color-orange;
 }
+
+a {
+    color: $color-green;
+    text-decoration: none;
+    font-weight: bold;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}

src/theme/variables.scss

@@ -7,6 +7,7 @@ $color-grey-dark: #555;
 $color-grey-medium: #999;
 $color-grey-light: #ccc;
 $color-grey-lighter: #eee;
+$color-green: #080;
 
 $border-large: 4px solid $color-black;
 $border-thin: 2px solid $color-black;