Merge pull request #75 from topcoder-platform/PROD-1070_restyle-settings

PROD-1070 restyle settings - dev

Author: brooketopcoder

src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx

@@ -1,5 +1,6 @@
 import { FC, useContext } from 'react'
 
+import { SETTINGS_TITLE } from '../../../../config'
 import { profileContext, ProfileContextData } from '../../../../lib'
 import '../../../../lib/styles/index.scss'
 
@@ -23,7 +24,7 @@ const ProfileSelector: FC<{}> = () => {
     return (
         <div className={styles['profile-selector']}>
             {!isLoggedIn && <ProfileNotLoggedIn />}
-            {isLoggedIn && <ProfileLoggedIn />}
+            {isLoggedIn && <ProfileLoggedIn settingsTitle={SETTINGS_TITLE} />}
         </div>
     )
 }

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx

@@ -11,7 +11,11 @@ import {
 import { ProfilePanel } from './profile-panel'
 import styles from './ProfileLoggedIn.module.scss'
 
-const ProfileLoggedIn: FC<{}> = () => {
+interface ProfileLoggedInProps {
+    settingsTitle: string
+}
+
+const ProfileLoggedIn: FC<ProfileLoggedInProps> = (props: ProfileLoggedInProps) => {
 
     const { profile }: ProfileContextData = useContext(profileContext)
     const [profilePanelOpen, setProfilePanelOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
@@ -41,7 +45,12 @@ const ProfileLoggedIn: FC<{}> = () => {
                     </div>
                 )}
             </div>
-            {profilePanelOpen && <ProfilePanel toggleProfilePanel={toggleProfilePanel} />}
+            {profilePanelOpen && (
+                <ProfilePanel
+                    settingsTitle={props.settingsTitle}
+                    toggleProfilePanel={toggleProfilePanel}
+                />
+            )}
         </>
     )
 }

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -1,7 +1,6 @@
 import { FC, useContext } from 'react'
 import { Link } from 'react-router-dom'
 
-import { SETTINGS_TITLE } from '../../../../../../config'
 import {
     authUrlLogout,
     profileContext,
@@ -13,6 +12,7 @@ import {
 import styles from './ProfilePanel.module.scss'
 
 interface ProfilePanelProps {
+    settingsTitle: string
     toggleProfilePanel: () => void
 }
 
@@ -34,9 +34,9 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
             <Link
                 className={styles.profile}
                 onClick={() => props.toggleProfilePanel()}
-                to={getPath(SETTINGS_TITLE)}
+                to={getPath(props.settingsTitle)}
             >
-                {SETTINGS_TITLE}
+                {props.settingsTitle}
             </Link>
             <a href={authUrlLogout} className={styles.logout}>
                 Log Out

src/lib/content-layout/ContentLayout.module.scss

@@ -4,7 +4,6 @@
     @include content-height;
     padding: 0;
     display: grid;
-    background-color: $tc-white;
     grid-template-columns: 1fr;
     justify-content: center;
 
@@ -14,7 +13,6 @@
 
         .content-inner {
             flex: 1;
-            background-color: $tc-white;
             max-width: $xl-max-content;
             padding: 0;
         }

src/lib/content-layout/ContentLayout.tsx

@@ -7,14 +7,15 @@ import styles from './ContentLayout.module.scss'
 
 export interface ContentLayoutProps {
     children?: ReactNode
+    contentClass?: string
     title: string
     titleClass?: string
 }
 
 const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => {
 
     return (
-        <div className={classNames(styles.content)}>
+        <div className={classNames(styles.content, props.contentClass)}>
 
             <div className={styles['content-outer']}>
 

src/lib/styles/_cards.scss

@@ -9,6 +9,7 @@
 
     .card-title {
         @include font-weight-semi-bold;
+        @include font-barlow;
         text-transform: uppercase;
     }
-}
+}

src/utils/settings/Settings.module.scss

@@ -1,5 +1,9 @@
-.page-header {
+.content {
     background: url('./profile-settings-background.svg');
+    background-size: 100% 100%;
+}
+
+.page-header {
     padding: 48px 180px;
 
     h1 {

src/utils/settings/Settings.tsx

@@ -31,6 +31,7 @@ const Settings: FC<{}> = () => {
 
     return (
         <ContentLayout
+            contentClass={styles.content}
             title={SETTINGS_TITLE}
             titleClass={classNames('font-tc-white', styles['page-header'])}
         >
@@ -51,15 +52,15 @@ const Settings: FC<{}> = () => {
                 <div className={styles['page-content']}>
 
                     <div className='card'>
-                        <span className='card-title'>
-                        Basic Information
-                        </span>
+                        <div className='card-title'>
+                            Basic Information
+                        </div>
                     </div>
 
                     <div className='card'>
-                        <span className='card-title'>
-                        Reset Password
-                        </span>
+                        <div className='card-title'>
+                            Reset Password
+                        </div>
                     </div>
 
                 </div>