From 7af74bac050e6f68bbd7d64f5a1b0c13bfc7eab1 Mon Sep 17 00:00:00 2001 From: brooketopcoder Date: Tue, 29 Mar 2022 10:56:14 -0700 Subject: [PATCH] PROD-1075 #comment profile settings updates; add cards; remove section pages from settings; #time 30m --- src/config/constants.ts | 1 + src/config/index.ts | 1 + .../profile-panel/ProfilePanel.tsx | 9 +++--- src/lib/styles/_cards.scss | 14 +++++++++ src/lib/styles/_typography.scss | 2 +- src/lib/styles/index.scss | 1 + src/utils/settings/Settings.module.scss | 10 ++++++ src/utils/settings/Settings.tsx | 28 +++++++++++++++-- src/utils/settings/settings.routes.tsx | 31 +++---------------- 9 files changed, 62 insertions(+), 35 deletions(-) create mode 100644 src/config/constants.ts create mode 100644 src/lib/styles/_cards.scss diff --git a/src/config/constants.ts b/src/config/constants.ts new file mode 100644 index 000000000..f1b718b26 --- /dev/null +++ b/src/config/constants.ts @@ -0,0 +1 @@ +export const SETTINGS_TITLE: string = 'Profile Settings' diff --git a/src/config/index.ts b/src/config/index.ts index 263a990b1..c76828baf 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -1 +1,2 @@ +export * from './constants' export * from './environments' diff --git a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx index 79719e486..e76f1dcb8 100644 --- a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx +++ b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx @@ -1,6 +1,7 @@ import { FC, useContext } from 'react' import { Link } from 'react-router-dom' +import { SETTINGS_TITLE } from '../../../../../../config' import { authUrlLogout, profileContext, @@ -18,15 +19,13 @@ interface ProfilePanelProps { const ProfilePanel: FC = (props: ProfilePanelProps) => { const { profile }: ProfileContextData = useContext(profileContext) - const { getPath }: RouteContextData = useContext(routeContext) + const { getPath }: RouteContextData = useContext(routeContext) if (!profile) { // this should never happen return <> } - const settingsTitle: string = 'Settings' - return (
@@ -35,9 +34,9 @@ const ProfilePanel: FC = (props: ProfilePanelProps) => { props.toggleProfilePanel()} - to={getPath(settingsTitle)} + to={getPath(SETTINGS_TITLE)} > - {settingsTitle} + {SETTINGS_TITLE} Log Out diff --git a/src/lib/styles/_cards.scss b/src/lib/styles/_cards.scss new file mode 100644 index 000000000..39a362570 --- /dev/null +++ b/src/lib/styles/_cards.scss @@ -0,0 +1,14 @@ +@import './palette'; +@import './typography'; + +.card { + padding: 16px 16px 32px 16px; + border: solid 1px $black-10; + box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.05); + border-radius: 8px; + + .card-title { + @include font-weight-semi-bold; + text-transform: uppercase; + } +} \ No newline at end of file diff --git a/src/lib/styles/_typography.scss b/src/lib/styles/_typography.scss index 3843090f9..15aee6047 100644 --- a/src/lib/styles/_typography.scss +++ b/src/lib/styles/_typography.scss @@ -20,7 +20,7 @@ h4 { text-transform: uppercase; margin: 0; letter-spacing: 0; - padding: 24px; + padding: 24px 0; } h1 { diff --git a/src/lib/styles/index.scss b/src/lib/styles/index.scss index 7668f1063..9be922037 100644 --- a/src/lib/styles/index.scss +++ b/src/lib/styles/index.scss @@ -2,6 +2,7 @@ @import 'breakpoints'; @import 'buttons'; +@import 'cards'; @import 'fonts'; @import 'icons'; @import 'layout'; diff --git a/src/utils/settings/Settings.module.scss b/src/utils/settings/Settings.module.scss index 6be82db6a..c95087225 100644 --- a/src/utils/settings/Settings.module.scss +++ b/src/utils/settings/Settings.module.scss @@ -10,3 +10,13 @@ .avatar-container { margin: -108px 32px; } + +.page-container { + margin-top: 120px; + + .page-content { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 24px; + } +} diff --git a/src/utils/settings/Settings.tsx b/src/utils/settings/Settings.tsx index e265f5141..4d2cd170e 100644 --- a/src/utils/settings/Settings.tsx +++ b/src/utils/settings/Settings.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames' import { FC, useContext } from 'react' +import { SETTINGS_TITLE } from '../../config' import { authUrlLogin, Avatar, @@ -13,8 +14,6 @@ import '../../lib/styles/index.scss' import styles from './Settings.module.scss' -export const utilTitle: string = 'Settings' - const Settings: FC<{}> = () => { const profileContextData: ProfileContextData = useContext(profileContext) @@ -32,9 +31,10 @@ const Settings: FC<{}> = () => { return ( + = () => { photoUrl={profile.photoURL} size='xl' /> + +
+ +

Edit your Personal Information and Security

+ +
+ +
+ + Basic Information + +
+ +
+ + Reset Password + +
+ +
+
+ ) } diff --git a/src/utils/settings/settings.routes.tsx b/src/utils/settings/settings.routes.tsx index f7eae9481..f369b3855 100644 --- a/src/utils/settings/settings.routes.tsx +++ b/src/utils/settings/settings.routes.tsx @@ -1,35 +1,14 @@ +import { SETTINGS_TITLE } from '../../config' import { PlatformRoute } from '../../lib' -import { passwordFormTitle, PasswordReset } from './password-reset' -import { profileFormTitle, ProfileUpdate } from './profile-update' -import Settings, { utilTitle } from './Settings' - -export enum SettingsPath { - password = 'password', - settings = '/settings', -} +import Settings from './Settings' export const settingsRoutes: Array = [ { - children: [ - { - children: [], - element: , - enabled: true, - route: '', - title: profileFormTitle, - }, - { - children: [], - element: , - enabled: true, - route: SettingsPath.password, - title: passwordFormTitle, - }, - ], + children: [], element: , enabled: true, - route: SettingsPath.settings, - title: utilTitle, + route: '/settings', + title: SETTINGS_TITLE, }, ]