various UI improvments

src/app/styles.module.scss

@@ -57,10 +57,17 @@
 
 .menuWrapper {
     position: absolute;
-    bottom: 5px;
-    left: 420px;
-    right: 10px;
-    text-align: center;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    @include desktop {
+        top: auto;
+        bottom: 5px;
+        left: 420px;
+        right: 10px;
+        text-align: center;
+    }
 }
 
 .logoutWrapper {

src/components/ForgotForm/ForgotForm.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom"
 import { AppDispatch } from "../../store"
 import { fetchVolunteerForgot } from "../../store/volunteerForgot"
 import styles from "./styles.module.scss"
+import FormSubmit from "../Form/FormSubmit/FormSubmit"
 
 interface Props {
     dispatch: AppDispatch
@@ -34,7 +35,7 @@ const ForgotForm = ({ dispatch, error, message }: Props): JSX.Element => {
                 <input type="email" id="email" name="utilisateur" />
             </div>
             <div className={styles.formButtons}>
-                <button type="submit">Envoyer</button>
+                <FormSubmit>Envoyer</FormSubmit>
             </div>
             <div className={styles.error}>{error}</div>
             <div className={styles.message}>{message}</div>

src/components/Form/FormButton/FormButton.tsx

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from "react"
+import styles from "./styles.module.scss"
+
+type Props = {
+    children: ReactNode
+    onClick?: () => void | undefined
+}
+
+const FormButton: FC<Props> = ({ children, onClick }): JSX.Element => (
+    <button type="button" className={styles.button} onClick={onClick}>
+        {children}
+    </button>
+)
+
+FormButton.defaultProps = {
+    onClick: undefined,
+}
+
+export default FormButton

src/components/Form/FormButton/styles.module.scss

@@ -0,0 +1,5 @@
+@import "../../../theme/mixins";
+
+.button {
+    @include form-button;
+}

src/components/Form/FormSubmit/FormSubmit.tsx

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react"
+import styles from "./styles.module.scss"
+
+type Props = {
+    children: ReactNode
+}
+
+const FormSubmit: FC<Props> = ({ children }): JSX.Element => (
+    <button type="submit" className={styles.button}>
+        {children}
+    </button>
+)
+
+export default FormSubmit

src/components/Form/FormSubmit/styles.module.scss

@@ -0,0 +1,5 @@
+@import "../../../theme/mixins";
+
+.button {
+    @include form-button;
+}

src/components/LoginForm/index.tsx

@@ -4,6 +4,7 @@ import { shallowEqual, useDispatch, useSelector } from "react-redux"
 import { AppState } from "../../store"
 import { fetchVolunteerLogin } from "../../store/volunteerLogin"
 import styles from "./styles.module.scss"
+import FormSubmit from "../Form/FormSubmit/FormSubmit"
 
 const LoginForm = (): JSX.Element => {
     const dispatch = useDispatch()
@@ -38,7 +39,7 @@ const LoginForm = (): JSX.Element => {
                 <input type="password" id="password" name="motdepasse" />
             </div>
             <div className={styles.formButtons}>
-                <button type="submit">Connexion</button>
+                <FormSubmit>Connexion</FormSubmit>
             </div>
             {loginError && <div className={styles.error}>{loginError}</div>}
             <div className={styles.link}>

src/components/LogoutButton/styles.module.scss

@@ -1,3 +1,5 @@
+@import "../../theme/variables";
+
 .logoutButton {
     text-align: center;
 
@@ -6,5 +8,6 @@
         background: none;
         font-weight: normal;
         font-size: 0.9em;
+        color: $color-white;
     }
 }

src/components/Modal/Modal.tsx

@@ -27,7 +27,7 @@ const Modal: FC<Props> = ({ modalId, children }): JSX.Element => {
             overlayClassName={styles.modalOverlay}
             onRequestClose={onClose}
         >
-            <button type="submit" className={styles.closeButton} onClick={onClose}>
+            <button type="button" className={styles.closeButton} onClick={onClose}>
                 &#10005;
             </button>
             {children}

src/components/Navigation/MainMenu.tsx

@@ -1,25 +1,41 @@
-import { FC } from "react"
+import { FC, useCallback, useState } from "react"
 import { useSelector } from "react-redux"
+import classnames from "classnames"
 import { isUserConnected } from "../../store/auth"
 import styles from "./styles.module.scss"
 
 const MainMenu: FC = (): JSX.Element | null => {
     const connected = useSelector(isUserConnected)
+    const [opened, setOpened] = useState(false)
+
+    const onOpen = useCallback(() => {
+        setOpened(true)
+    }, [setOpened])
+
+    const onClose = useCallback(() => {
+        setOpened(false)
+    }, [setOpened])
 
     if (!connected) return null
 
     return (
         <nav>
-            <ul className={styles.mainMenu}>
+            <button type="button" className={styles.burger} onClick={onOpen}>
+                ☰
+            </button>
+            <ul className={classnames(styles.mainMenu, opened && styles.opened)}>
                 {/* <li className={styles.mainMenuItem}>
                     <a href="/">Mon espace</a>
                 </li> */}
-                {/* <li className={styles.mainMenuItem}>
-                    <a href="/teams">Equipes</a>
-                </li> */}
+                <li className={styles.mainMenuItem}>
+                    <a href="/equipes">Equipes</a>
+                </li>
                 <li className={styles.mainMenuItem}>
                     <a href="/annonces">Annonces</a>
                 </li>
+                <button type="button" className={styles.close} onClick={onClose}>
+                    ×
+                </button>
             </ul>
         </nav>
     )

src/components/Navigation/styles.module.scss

@@ -1,20 +1,88 @@
 @import "../../theme/variables";
+@import "../../theme/mixins";
 
 .mainMenu {
     margin: 0;
     padding: 0;
     list-style: none;
+
+    @include mobile {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        right: -260px;
+        width: 250px;
+        padding-top: 40px;
+        background-color: $color-white;
+        box-shadow: 0 0 8px $color-grey-dark;
+        transition: right 0.6s ease;
+        z-index: 10;
+    }
+
+    &.opened {
+        @include mobile {
+            right: 0;
+        }
+    }
+}
+
+.close {
+    display: none;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    font-size: 26px;
+    color: $color-grey-medium;
+
+    @include mobile {
+        display: block;
+    }
+}
+
+.burger {
+    display: none;
+
+    @include mobile {
+        display: block;
+        position: absolute;
+        right: 10px;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        font-size: 22px;
+        color: $color-black;
+
+        @include vertical-center();
+    }
 }
 
 .mainMenuItem {
     display: inline-block;
     margin: 0 6px;
 
+    @include mobile {
+        display: block;
+        border-bottom: 1px solid $color-grey-light;
+
+        &:first-child {
+            border-top: 1px solid $color-grey-light;
+        }
+    }
+
     a {
         font-size: 0.9em;
         font-weight: bold;
         color: $color-black;
         text-decoration: none;
+
+        @include mobile {
+            display: block;
+            padding: 10px 15px;
+        }
     }
 
     a:hover {

src/components/Notifications/styles.module.scss

@@ -15,8 +15,6 @@
 
 .pushNotificationsContent {
     @include page-content-wrapper;
-
-    background-color: #ece3df;
 }
 
 .notifIntro {

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

@@ -37,4 +37,10 @@
 
     position: absolute;
     right: 20px;
+
+    button {
+        color: $color-green;
+        font-weight: bold;
+        cursor: pointer;
+    }
 }

src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx

@@ -9,6 +9,7 @@ import {
     selectionChoices,
     useUserDayWishes,
 } from "../daysWishes.utils"
+import FormButton from "../../Form/FormButton/FormButton"
 
 type Props = {
     afterSubmit?: () => void | undefined
@@ -72,9 +73,7 @@ const DayWishesForm: FC<Props> = ({ afterSubmit }): JSX.Element => {
                 <textarea id="day-choice-comment" ref={commentRef} />
             </div>
             <div className={styles.dayWishesButtonWrapper}>
-                <button type="submit" onClick={onChoiceSubmit}>
-                    Enregistrer
-                </button>
+                <FormButton onClick={onChoiceSubmit}>Enregistrer</FormButton>
             </div>
         </div>
     )

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

@@ -21,4 +21,10 @@
 
     position: absolute;
     right: 20px;
+
+    button {
+        color: $color-green;
+        font-weight: bold;
+        cursor: pointer;
+    }
 }

src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx

@@ -7,6 +7,7 @@ import {
     tShirtSizes,
     useUserParticipationDetails,
 } from "../participationDetails.utils"
+import FormButton from "../../Form/FormButton/FormButton"
 
 type Props = {
     afterSubmit?: () => void | undefined
@@ -96,9 +97,7 @@ const ParticipationDetailsForm: FC<Props> = ({ afterSubmit }): JSX.Element | nul
                 />
             </div>
             <div className={styles.buttonWrapper}>
-                <button type="submit" onClick={onSubmit}>
-                    Enregistrer
-                </button>
+                <FormButton onClick={onSubmit}>Enregistrer</FormButton>
             </div>
         </div>
     )

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

@@ -41,4 +41,10 @@
 
     position: absolute;
     right: 20px;
+
+    button {
+        color: $color-green;
+        font-weight: bold;
+        cursor: pointer;
+    }
 }

src/components/VolunteerBoard/TeamWishesForm/TeamWishesForm.tsx

@@ -8,6 +8,7 @@ import { useUserTeamWishes } from "../teamWishes.utils"
 import { fetchTeamListIfNeed, selectTeamList } from "../../../store/teamList"
 import useSelection from "../useSelection"
 import { fetchVolunteerTeamWishesSetIfNeed } from "../../../store/volunteerTeamWishesSet"
+import FormButton from "../../Form/FormButton/FormButton"
 
 type Props = {
     afterSubmit?: () => void | undefined
@@ -74,9 +75,7 @@ const TeamWishesForm: FC<Props> = ({ afterSubmit }): JSX.Element | null => {
                 <textarea id="day-choice-comment" ref={commentRef} />
             </div>
             <div className={styles.buttonWrapper}>
-                <button type="submit" onClick={onSubmit}>
-                    Enregistrer
-                </button>
+                <FormButton onClick={onSubmit}>Enregistrer</FormButton>
             </div>
         </div>
     )

src/routes/index.ts

@@ -47,7 +47,7 @@ export default [
                 component: Forgot,
             },
             {
-                path: "/teams",
+                path: "/equipes",
                 component: AsyncTeams,
                 loadData: loadTeamsData,
             },

src/theme/form.scss

@@ -1,12 +1,8 @@
 @import "./variables";
 
 button {
-    padding: 7px 20px;
-    background-color: $color-orange;
+    background: none;
     border: 0;
-    color: $color-white;
-    border-radius: 16px;
-    font-weight: bold;
     cursor: pointer;
 }
 

src/theme/main.scss

@@ -11,10 +11,5 @@ body {
 
 a {
     color: $color-green;
-    text-decoration: none;
-    font-weight: bold;
-
-    &:hover {
-        text-decoration: underline;
-    }
+    text-decoration: underline;
 }

src/theme/mixins.scss

@@ -6,6 +6,12 @@
     }
 }
 
+@mixin mobile {
+    @media (max-width: 799px) {
+        @content;
+    }
+}
+
 @mixin flex-center {
     display: flex;
     justify-content: center;
@@ -82,3 +88,12 @@
     left: 50%;
     transform: translate(-50%, -50%);
 }
+
+@mixin form-button {
+    padding: 7px 20px;
+    background-color: $color-orange;
+    border: 0;
+    color: $color-white;
+    border-radius: 16px;
+    font-weight: bold;
+}