Merge pull request #73 from topcoder-platform/PROD-1075_header-layout

PROD-1075 profile settings - dev

Author: brooketopcoder

src/config/constants.ts

@@ -0,0 +1 @@
+export const SETTINGS_TITLE: string = 'Profile Settings'

src/config/index.ts

@@ -1 +1,2 @@
+export * from './constants'
 export * from './environments'

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<ProfilePanelProps> = (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 (
         <div className={styles['profile-panel']}>
             <div className={styles.handle}>
@@ -35,9 +34,9 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
             <Link
                 className={styles.profile}
                 onClick={() => props.toggleProfilePanel()}
-                to={getPath(settingsTitle)}
+                to={getPath(SETTINGS_TITLE)}
             >
-                {settingsTitle}
+                {SETTINGS_TITLE}
             </Link>
             <a href={authUrlLogout} className={styles.logout}>
                 Log Out

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;
+    }
+}

src/lib/styles/_typography.scss

@@ -20,7 +20,7 @@ h4 {
     text-transform: uppercase;
     margin: 0;
     letter-spacing: 0;
-    padding: 24px;
+    padding: 24px 0;
 }
 
 h1 {

src/lib/styles/index.scss

@@ -2,6 +2,7 @@
 
 @import 'breakpoints';
 @import 'buttons';
+@import 'cards';
 @import 'fonts';
 @import 'icons';
 @import 'layout';

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;
+    }
+}

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 (
         <ContentLayout
-            title={utilTitle}
+            title={SETTINGS_TITLE}
             titleClass={classNames('font-tc-white', styles['page-header'])}
         >
+
             <Avatar
                 containerClass={styles['avatar-container']}
                 firstName={profile.firstName}
@@ -43,6 +43,28 @@ const Settings: FC<{}> = () => {
                 photoUrl={profile.photoURL}
                 size='xl'
             />
+
+            <div className={styles['page-container']}>
+
+                <h2>Edit your Personal Information and Security</h2>
+
+                <div className={styles['page-content']}>
+
+                    <div className='card'>
+                        <span className='card-title'>
+                        Basic Information
+                        </span>
+                    </div>
+
+                    <div className='card'>
+                        <span className='card-title'>
+                        Reset Password
+                        </span>
+                    </div>
+
+                </div>
+            </div>
+
         </ContentLayout>
     )
 }

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<PlatformRoute> = [
     {
-        children: [
-            {
-                children: [],
-                element: <ProfileUpdate passwordPath={SettingsPath.password} />,
-                enabled: true,
-                route: '',
-                title: profileFormTitle,
-            },
-            {
-                children: [],
-                element: <PasswordReset profilePath={SettingsPath.settings} />,
-                enabled: true,
-                route: SettingsPath.password,
-                title: passwordFormTitle,
-            },
-        ],
+        children: [],
         element: <Settings />,
         enabled: true,
-        route: SettingsPath.settings,
-        title: utilTitle,
+        route: '/settings',
+        title: SETTINGS_TITLE,
     },
 ]