From 3433f37a0e023dbc950eb2fc6571164c3899da13 Mon Sep 17 00:00:00 2001
From: bsourisse <dev@r4ven.fr>
Date: Mon, 6 Mar 2023 19:19:28 +0100
Subject: [PATCH] ux: creation of a menu in the user settings

---
 .../EmailSettings/EmailSettings.js            |  2 +-
 .../PasswordSettings/PasswordSettings.js      |  2 +-
 Containers/UserSettings/UserSettings.js       | 57 ++++++++++---
 .../UserSettings/UserSettings.module.css      | 85 +++++++++++++++++++
 .../UsernameSettings/UsernameSettings.js      |  2 +-
 5 files changed, 135 insertions(+), 13 deletions(-)

diff --git a/Containers/UserSettings/EmailSettings/EmailSettings.js b/Containers/UserSettings/EmailSettings/EmailSettings.js
index cfed37b..1991328 100644
--- a/Containers/UserSettings/EmailSettings/EmailSettings.js
+++ b/Containers/UserSettings/EmailSettings/EmailSettings.js
@@ -107,7 +107,7 @@ export default function EmailSettings(props) {
                                     )}
                                 </p>
                                 <button
-                                    className='defaultButton'
+                                    className={classes.AccountSettingsButton}
                                     disabled={!isValid || isSubmitting}
                                 >
                                     {isLoading ? (
diff --git a/Containers/UserSettings/PasswordSettings/PasswordSettings.js b/Containers/UserSettings/PasswordSettings/PasswordSettings.js
index 8616fc8..ee3bab4 100644
--- a/Containers/UserSettings/PasswordSettings/PasswordSettings.js
+++ b/Containers/UserSettings/PasswordSettings/PasswordSettings.js
@@ -106,7 +106,7 @@ export default function PasswordSettings(props) {
                                 )}
                             </p>
                             <button
-                                className='defaultButton'
+                                className={classes.AccountSettingsButton}
                                 disabled={!isValid || isSubmitting}
                             >
                                 {isLoading ? (
diff --git a/Containers/UserSettings/UserSettings.js b/Containers/UserSettings/UserSettings.js
index 0b82d94..d83d761 100644
--- a/Containers/UserSettings/UserSettings.js
+++ b/Containers/UserSettings/UserSettings.js
@@ -1,6 +1,7 @@
 //Lib
 import 'react-toastify/dist/ReactToastify.css';
 import classes from './UserSettings.module.css';
+import { useState } from 'react';
 
 //Components
 import EmailSettings from './EmailSettings/EmailSettings';
@@ -10,21 +11,57 @@ import EmailAlertSettings from './EmailAlertSettings/EmailAlertSettings';
 import AppriseAlertSettings from './AppriseAlertSettings/AppriseAlertSettings';
 
 export default function UserSettings(props) {
+    //States
+    const [tab, setTab] = useState('General');
+
     return (
         <div className={classes.containerSettings}>
             <div>
-                <h1 style={{ color: '#494b7a', textAlign: 'center' }}>
-                    Welcome{' '}
-                    {props.status === 'authenticated' && props.data.user.name}{' '}
-                    👋
+                <h1
+                    style={{
+                        color: '#494b7a',
+                        textAlign: 'left',
+                        marginLeft: '30px',
+                    }}
+                >
+                    Account{' '}
                 </h1>
             </div>
-
-            <PasswordSettings username={props.data.user.name} />
-            <EmailSettings email={props.data.user.email} />
-            <UsernameSettings username={props.data.user.name} />
-            <EmailAlertSettings />
-            <AppriseAlertSettings />
+            <div className={classes.tabList}>
+                <button
+                    className={
+                        tab == 'General'
+                            ? classes.tabListButtonActive
+                            : classes.tabListButton
+                    }
+                    onClick={() => setTab('General')}
+                >
+                    General
+                </button>
+                <button
+                    className={
+                        tab == 'Notifications'
+                            ? classes.tabListButtonActive
+                            : classes.tabListButton
+                    }
+                    onClick={() => setTab('Notifications')}
+                >
+                    Notifications
+                </button>
+            </div>
+            {tab == 'General' && (
+                <>
+                    <PasswordSettings username={props.data.user.name} />
+                    <EmailSettings email={props.data.user.email} />
+                    <UsernameSettings username={props.data.user.name} />{' '}
+                </>
+            )}
+            {tab == 'Notifications' && (
+                <>
+                    <EmailAlertSettings />
+                    <AppriseAlertSettings />
+                </>
+            )}
         </div>
     );
 }
diff --git a/Containers/UserSettings/UserSettings.module.css b/Containers/UserSettings/UserSettings.module.css
index 67e0842..8319caf 100644
--- a/Containers/UserSettings/UserSettings.module.css
+++ b/Containers/UserSettings/UserSettings.module.css
@@ -161,3 +161,88 @@
     animation: entrance 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
     font-weight: 300;
 }
+
+.tabList {
+    display: flex;
+}
+
+.tabListButton {
+    color: #494b7a;
+    padding: 12px 0px;
+    min-height: 48px;
+    overflow: hidden;
+    text-align: center;
+    flex-direction: column;
+    font-size: 1em;
+    font-weight: 500;
+    line-height: 1.71;
+    text-transform: none;
+    align-items: center;
+    cursor: pointer;
+    vertical-align: middle;
+    text-decoration: none;
+    border: 0;
+    background-color: transparent;
+    margin-left: 30px;
+    border-bottom: 2px solid transparent;
+}
+
+.tabListButton:hover {
+    color: #6d4aff;
+    border-bottom: 2px solid #6d4aff;
+}
+
+.tabListButtonActive {
+    color: #6d4aff;
+    border: 0;
+    border-bottom: 2px solid #6d4aff;
+    padding: 12px 0px;
+    min-height: 48px;
+    overflow: hidden;
+    text-align: center;
+    flex-direction: column;
+    font-size: 1em;
+    font-weight: 500;
+    line-height: 1.71;
+    text-transform: none;
+    align-items: center;
+    cursor: pointer;
+    vertical-align: middle;
+    text-decoration: none;
+    background-color: transparent;
+    margin-left: 30px;
+}
+
+.AccountSettingsButton {
+    border: 0;
+    padding: 10px 15px;
+    background-color: #6d4aff;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1em;
+}
+
+.AccountSettingsButton:hover {
+    border: 0;
+    padding: 10px 15px;
+    background-color: #4f31ce;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1em;
+}
+
+.AccountSettingsButton:active {
+    border: 0;
+    padding: 10px 15px;
+    background-color: #4f31ce;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1em;
+    transform: scale(0.95);
+}
diff --git a/Containers/UserSettings/UsernameSettings/UsernameSettings.js b/Containers/UserSettings/UsernameSettings/UsernameSettings.js
index da39717..f5f3994 100644
--- a/Containers/UserSettings/UsernameSettings/UsernameSettings.js
+++ b/Containers/UserSettings/UsernameSettings/UsernameSettings.js
@@ -116,7 +116,7 @@ export default function UsernameSettings(props) {
                                     )}
                                 </p>
                                 <button
-                                    className='defaultButton'
+                                    className={classes.AccountSettingsButton}
                                     disabled={!isValid || isSubmitting}
                                 >
                                     {isLoading ? (