From 7c35bb5a5dee5f26358598688989ada1cb8e9459 Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Wed, 23 Feb 2022 23:56:30 +0100
Subject: [PATCH] various UI improvments

---
 src/app/styles.module.scss                    | 15 ++--
 src/components/ForgotForm/ForgotForm.tsx      |  3 +-
 src/components/Form/FormButton/FormButton.tsx | 19 ++++++
 .../Form/FormButton/styles.module.scss        |  5 ++
 src/components/Form/FormSubmit/FormSubmit.tsx | 14 ++++
 .../Form/FormSubmit/styles.module.scss        |  5 ++
 src/components/LoginForm/index.tsx            |  3 +-
 .../LogoutButton/styles.module.scss           |  3 +
 src/components/Modal/Modal.tsx                |  2 +-
 src/components/Navigation/MainMenu.tsx        | 26 +++++--
 src/components/Navigation/styles.module.scss  | 68 +++++++++++++++++++
 .../Notifications/styles.module.scss          |  2 -
 .../DayWishes/styles.module.scss              |  6 ++
 .../DayWishesForm/DayWishesForm.tsx           |  5 +-
 .../ParticipationDetails/styles.module.scss   |  6 ++
 .../ParticipationDetailsForm.tsx              |  5 +-
 .../TeamWishes/styles.module.scss             |  6 ++
 .../TeamWishesForm/TeamWishesForm.tsx         |  5 +-
 src/routes/index.ts                           |  2 +-
 src/theme/form.scss                           |  6 +-
 src/theme/main.scss                           |  7 +-
 src/theme/mixins.scss                         | 15 ++++
 22 files changed, 193 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Form/FormButton/FormButton.tsx
 create mode 100644 src/components/Form/FormButton/styles.module.scss
 create mode 100644 src/components/Form/FormSubmit/FormSubmit.tsx
 create mode 100644 src/components/Form/FormSubmit/styles.module.scss

diff --git a/src/app/styles.module.scss b/src/app/styles.module.scss
index 0ecd07e..7f6366e 100755
--- a/src/app/styles.module.scss
+++ b/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 {
diff --git a/src/components/ForgotForm/ForgotForm.tsx b/src/components/ForgotForm/ForgotForm.tsx
index b0fd47b..72ad494 100644
--- a/src/components/ForgotForm/ForgotForm.tsx
+++ b/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>
diff --git a/src/components/Form/FormButton/FormButton.tsx b/src/components/Form/FormButton/FormButton.tsx
new file mode 100644
index 0000000..0fbc2df
--- /dev/null
+++ b/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
diff --git a/src/components/Form/FormButton/styles.module.scss b/src/components/Form/FormButton/styles.module.scss
new file mode 100644
index 0000000..70bec07
--- /dev/null
+++ b/src/components/Form/FormButton/styles.module.scss
@@ -0,0 +1,5 @@
+@import "../../../theme/mixins";
+
+.button {
+    @include form-button;
+}
diff --git a/src/components/Form/FormSubmit/FormSubmit.tsx b/src/components/Form/FormSubmit/FormSubmit.tsx
new file mode 100644
index 0000000..06d1823
--- /dev/null
+++ b/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
diff --git a/src/components/Form/FormSubmit/styles.module.scss b/src/components/Form/FormSubmit/styles.module.scss
new file mode 100644
index 0000000..70bec07
--- /dev/null
+++ b/src/components/Form/FormSubmit/styles.module.scss
@@ -0,0 +1,5 @@
+@import "../../../theme/mixins";
+
+.button {
+    @include form-button;
+}
diff --git a/src/components/LoginForm/index.tsx b/src/components/LoginForm/index.tsx
index 772a071..e06906c 100644
--- a/src/components/LoginForm/index.tsx
+++ b/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}>
diff --git a/src/components/LogoutButton/styles.module.scss b/src/components/LogoutButton/styles.module.scss
index c4e4b24..ef244cc 100644
--- a/src/components/LogoutButton/styles.module.scss
+++ b/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;
     }
 }
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index f5ef499..b7cf082 100644
--- a/src/components/Modal/Modal.tsx
+++ b/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}
diff --git a/src/components/Navigation/MainMenu.tsx b/src/components/Navigation/MainMenu.tsx
index 1d1e9e3..e03bbc1 100644
--- a/src/components/Navigation/MainMenu.tsx
+++ b/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>
     )
diff --git a/src/components/Navigation/styles.module.scss b/src/components/Navigation/styles.module.scss
index 1c6a2ac..7c4fdf4 100644
--- a/src/components/Navigation/styles.module.scss
+++ b/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 {
diff --git a/src/components/Notifications/styles.module.scss b/src/components/Notifications/styles.module.scss
index 379b293..a83d092 100755
--- a/src/components/Notifications/styles.module.scss
+++ b/src/components/Notifications/styles.module.scss
@@ -15,8 +15,6 @@
 
 .pushNotificationsContent {
     @include page-content-wrapper;
-
-    background-color: #ece3df;
 }
 
 .notifIntro {
diff --git a/src/components/VolunteerBoard/DayWishes/styles.module.scss b/src/components/VolunteerBoard/DayWishes/styles.module.scss
index 8965534..2e5f96f 100755
--- a/src/components/VolunteerBoard/DayWishes/styles.module.scss
+++ b/src/components/VolunteerBoard/DayWishes/styles.module.scss
@@ -37,4 +37,10 @@
 
     position: absolute;
     right: 20px;
+
+    button {
+        color: $color-green;
+        font-weight: bold;
+        cursor: pointer;
+    }
 }
diff --git a/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx b/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx
index 3ecc404..7d40c90 100644
--- a/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx
+++ b/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>
     )
diff --git a/src/components/VolunteerBoard/ParticipationDetails/styles.module.scss b/src/components/VolunteerBoard/ParticipationDetails/styles.module.scss
index 2b922ae..33a700a 100755
--- a/src/components/VolunteerBoard/ParticipationDetails/styles.module.scss
+++ b/src/components/VolunteerBoard/ParticipationDetails/styles.module.scss
@@ -21,4 +21,10 @@
 
     position: absolute;
     right: 20px;
+
+    button {
+        color: $color-green;
+        font-weight: bold;
+        cursor: pointer;
+    }
 }
diff --git a/src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx b/src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx
index 64a753b..ae85ddd 100644
--- a/src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx
+++ b/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>
     )
diff --git a/src/components/VolunteerBoard/TeamWishes/styles.module.scss b/src/components/VolunteerBoard/TeamWishes/styles.module.scss
index 979460e..5fe7878 100755
--- a/src/components/VolunteerBoard/TeamWishes/styles.module.scss
+++ b/src/components/VolunteerBoard/TeamWishes/styles.module.scss
@@ -41,4 +41,10 @@
 
     position: absolute;
     right: 20px;
+
+    button {
+        color: $color-green;
+        font-weight: bold;
+        cursor: pointer;
+    }
 }
diff --git a/src/components/VolunteerBoard/TeamWishesForm/TeamWishesForm.tsx b/src/components/VolunteerBoard/TeamWishesForm/TeamWishesForm.tsx
index ab23b8c..3c4e39a 100644
--- a/src/components/VolunteerBoard/TeamWishesForm/TeamWishesForm.tsx
+++ b/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>
     )
diff --git a/src/routes/index.ts b/src/routes/index.ts
index f3ef576..edf66ed 100755
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -47,7 +47,7 @@ export default [
                 component: Forgot,
             },
             {
-                path: "/teams",
+                path: "/equipes",
                 component: AsyncTeams,
                 loadData: loadTeamsData,
             },
diff --git a/src/theme/form.scss b/src/theme/form.scss
index 01d3279..5ac4111 100644
--- a/src/theme/form.scss
+++ b/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;
 }
 
diff --git a/src/theme/main.scss b/src/theme/main.scss
index 0754f19..571d6e6 100644
--- a/src/theme/main.scss
+++ b/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;
 }
diff --git a/src/theme/mixins.scss b/src/theme/mixins.scss
index b62bc28..bafa4e0 100644
--- a/src/theme/mixins.scss
+++ b/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;
+}