PROD-1075 header layout - dev

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

@@ -33,6 +33,7 @@ const ProfileLoggedIn: FC<{}> = () => {
                     lastName={profile.lastName}
                     handle={profile.handle}
                     photoUrl={profile.photoURL}
+                    size='sm'
                 />
                 {profilePanelOpen && (
                     <div className={styles.overlay}>

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,21 @@
 
 .content {
     @include content-height;
-    padding: $pad-xxxxl $pad-content-lg;
+    padding: 0;
     display: grid;
-    background-color: $black-10;
+    background-color: $tc-white;
     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,38 @@
 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>
     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)}>
 
-                {/* <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'