PR0D-1075 header layout - PROD-1069_re-style

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/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)
@@ -33,14 +37,20 @@ const ProfileLoggedIn: FC<{}> = () => {
                     lastName={profile.lastName}
                     handle={profile.handle}
                     photoUrl={profile.photoURL}
+                    size='sm'
                 />
                 {profilePanelOpen && (
                     <div className={styles.overlay}>
                         <IconOutline.XIcon />
                     </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

@@ -12,21 +12,20 @@ import {
 import styles from './ProfilePanel.module.scss'
 
 interface ProfilePanelProps {
+    settingsTitle: string
     toggleProfilePanel: () => void
 }
 
 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(props.settingsTitle)}
             >
-                {settingsTitle}
+                {props.settingsTitle}
             </Link>
             <a href={authUrlLogout} className={styles.logout}>
                 Log Out

src/lib/avatar/Avatar.module.scss

@@ -1,19 +1,37 @@
 @import '../../lib/styles';
 
-$avatar-size: 32px;
+$avatar-size-sm: 32px;
+$avatar-size-xl: 120px;
 
 .avatar-container {
     overflow: hidden;
     background-color: $tc-white;
     border-radius: 50%;
-    height: 36px;
+
+    &.sm {
+        height: calc($avatar-size-sm + 2 * $border);
+        width: calc($avatar-size-sm + 2 * $border);
+    }
+
+    &.xl {
+        height: calc($avatar-size-xl + 2 * $border);
+        width: calc($avatar-size-xl + 2 * $border);
+    }
 
     .avatar {
-        height: $avatar-size;
-        width: $avatar-size;
         background-color: $tc-white;
         border-radius: 50%;
         border: 2px solid $tc-white;
+
+        &.sm {
+            height: $avatar-size-sm;
+            width: $avatar-size-sm;
+        }
+
+        &.xl {
+            height: $avatar-size-xl;
+            width: $avatar-size-xl;
+        }
     }
 
     .avatar-letters {
@@ -24,6 +42,13 @@ $avatar-size: 32px;
         color: $tc-white;
         background-color: $blue-100;
         @include font-weight-medium;
-        @extend .medium-subtitle;
+
+        &.sm {
+            @extend .medium-subtitle;
+        }
+
+        &.xl {
+            font-size: 48px;
+        }
     }
 }

src/lib/avatar/Avatar.tsx

@@ -4,10 +4,12 @@ import { FC } from 'react'
 import styles from './Avatar.module.scss'
 
 interface AvatarProps {
+    containerClass?: string
     firstName?: string
     handle?: string
     lastName?: string
     photoUrl?: string
+    size: 'sm' | 'xl'
 }
 
 const Avatar: FC<AvatarProps> = (props: AvatarProps) => {
@@ -19,17 +21,21 @@ const Avatar: FC<AvatarProps> = (props: AvatarProps) => {
 
     const avatarElement: JSX.Element = !!props.photoUrl
         ? (
-            <img src={props.photoUrl} alt={`${props.handle} avatar`} className={styles.avatar} />
+            <img
+                alt={`${props.handle} avatar`}
+                className={classNames(styles.avatar, styles[props.size])}
+                src={props.photoUrl}
+            />
         )
         : (
-            <span className={classNames(styles.avatar, styles['avatar-letters'])}>
+            <span className={classNames(styles.avatar, styles['avatar-letters'], styles[props.size])}>
                 {props.firstName?.charAt(0)}
                 {props.lastName?.charAt(0)}
             </span>
         )
 
     return (
-        <div className={styles['avatar-container']}>
+        <div className={classNames(styles['avatar-container'], styles[props.size], props.containerClass)}>
             {avatarElement}
         </div>
     )

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

@@ -2,56 +2,19 @@
 
 .content {
     @include content-height;
-    padding: $pad-xxxxl $pad-content-lg;
+    padding: 0;
     display: grid;
-    background-color: $black-10;
     grid-template-columns: 1fr;
     justify-content: center;
 
-    .sections {
-        display: none;
-        height: 200px;
-        background-color: $tc-white;
-    }
-
-    &.show-sections {
-        padding-left: 0;
-
-        .sections {
-            display: grid;
-        }
-
-        @include md {
-            padding-left: $pad-xxl;
-        }
-
-        @include lg {
-            grid-template-columns: $left-col-width-lg 1fr;
-        }
-
-        @include xl {
-            grid-template-columns: $left-col-width-xl 1fr;
-        }
-    }
-
-    @include md {
-        padding: $pad-xxl;
-    }
-
-    @include ltesm {
-        padding: 0;
-    }
-
     .content-outer {
         display: flex;
         justify-content: center;
 
         .content-inner {
             flex: 1;
-            background-color: $tc-white;
-            border-radius: $pad-sm;
             max-width: $xl-max-content;
-            padding: $pad-xxl;
+            padding: 0;
         }
     }
 }

src/lib/content-layout/ContentLayout.tsx

@@ -1,58 +1,39 @@
 import classNames from 'classnames'
-import { FC, ReactNode, /* useContext */ } from 'react'
+import { FC, ReactNode } from 'react'
 
-/* import { PlatformRoute, RouteContextData } from '../route-provider'
-import RouteContext from '../route-provider/route.context' // cannot be imported from index file */
 import '../styles/index.scss'
 
 import styles from './ContentLayout.module.scss'
-import { /* Sections, */ SectionSelectorProps } from './sections'
 
 export interface ContentLayoutProps {
     children?: ReactNode
-    classNames?: string
-    sections?: Array<SectionSelectorProps>
+    contentClass?: string
     title: string
+    titleClass?: string
 }
 
-// TODO: uncomment everything related to sections when we have the UI determined
 const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => {
 
-/*     const { allRoutes }: RouteContextData = useContext(RouteContext)
-
-    const rootRoute: PlatformRoute | undefined = allRoutes
-        .find(route => route.title === props.title && route.enabled)
-
-    const sections: Array<SectionSelectorProps> = rootRoute?.children
-        .filter(sectionRoute => sectionRoute.enabled)
-        .map(sectionRoute => ({
-            sectionRoute,
-            toolRoute: rootRoute.route,
-        }))
-        || []
-    const hideSectionsClass: string = !sections.length ? '' : styles['show-sections'] */
-
     return (
-        <>
-            <div className={classNames(styles.content, props.classNames/* , hideSectionsClass */)}>
+        <div className={classNames(styles.content, props.contentClass)}>
 
-                {/* <Sections sections={sections}></Sections> */}
+            <div className={styles['content-outer']}>
 
-                <div className={styles['content-outer']}>
+                <div className={styles['content-inner']}>
 
-                    <div className={styles['content-inner']}>
+                    <div className={classNames(styles['page-header'], props.titleClass)}>
 
-                        {/* TODO: the title on the page should be an h1 tag, not h4 */}
-                        <h4>{props.title}</h4>
-
-                        {props.children}
+                        <h1>{props.title}</h1>
 
                     </div>
 
+                    {props.children}
+
                 </div>
 
             </div>
-        </>
+
+        </div>
     )
 }
 

src/lib/content-layout/index.ts

@@ -1,4 +1 @@
 export { default as ContentLayout } from './ContentLayout'
-export
-    // tslint:disable-next-line: no-unused-expression
-type { SectionSelectorProps } from './sections'