PLAT-825 profile and form fields - dev (#49)

Author: brooketopcoder

src/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.module.scss

@@ -9,8 +9,7 @@
     }
 
     svg {
-        height: $pad-xxl;
-        width: $pad-xxl;
+        @include icon-xxl;
         fill: none;
 
         path {
@@ -25,8 +24,8 @@
         left: 0;
         width: calc(100% - calc(2 * $pad-xxl));
         z-index: 100;
-        height: $content-height;
         background-color: $black-100;
         padding: $pad-xxl;
+        @include content-height;
     }
 }

src/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.module.scss

@@ -9,16 +9,15 @@
     .tool-selector-narrow-link {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         border-top: 1px solid $black-60;
         padding: $pad-lg 0;
         color: $tc-white;
-        font-size: 16px;
-        @include font-bold;
+        @include font-weight-medium;
         background-color: $black-100;
 
         svg {
-            width: $pad-lg;
-            height: $pad-lg;
+            @include icon-lg;
             fill: $tc-white;
 
             path {

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

@@ -2,7 +2,8 @@
 
 $overlaySquare: calc($pad-xxxxl + 2 * $border);
 
-a {
+.profile-avater,
+.overlay {
     cursor: pointer;
 }
 
@@ -21,7 +22,6 @@ a {
     svg {
         stroke: $turq-160;
         stroke-width: $border;
-        height: $pad-xxl;
-        width: $pad-xxl;
+        @include icon-xxl;
     }
 }

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

@@ -22,7 +22,7 @@ const ProfileLoggedIn: FC<{}> = () => {
 
     return (
         <>
-            <div onClick={() => toggleProfilePanel()} >
+            <div className={styles['profile-avater']} onClick={() => toggleProfilePanel()} >
                 <Avatar
                     firstName={profile.firstName}
                     lastName={profile.lastName}
@@ -35,7 +35,7 @@ const ProfileLoggedIn: FC<{}> = () => {
                     </div>
                 )}
             </div>
-            {profilePanelOpen && <ProfilePanel />}
+            {profilePanelOpen && <ProfilePanel toggleProfilePanel={toggleProfilePanel} />}
         </>
     )
 }

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

@@ -1,21 +1,20 @@
 @import '../../../../../../lib/styles';
 
 .profile-panel {
+    @extend .body-small;
     position: absolute;
     z-index: 1000;
     top: calc($pad-xxxxl * 2);
     right: calc($pad-sm + 2px);
     width: 168px;
     display: flex;
     flex-direction: column;
-    font-size: 14px;
     background: url('./profile-panel-header.png') no-repeat top center;
     filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.2));
 
     .handle {
         padding: $pad-xl $pad-xl calc($pad-lg - 1px) $pad-xl;
         color: $tc-white;
-        line-height: 22px;
     }
 
     .logout,

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

@@ -1,4 +1,5 @@
 import { FC, useContext } from 'react'
+import { Link } from 'react-router-dom'
 
 import {
     AuthenticationUrlConfig,
@@ -9,7 +10,11 @@ import {
 
 import styles from './ProfilePanel.module.scss'
 
-const ProfilePanel: FC<{}> = () => {
+interface ProfilePanelProps {
+    toggleProfilePanel: () => void
+}
+
+const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
 
     const { profile }: ProfileContextData = useContext(ProfileContext)
 
@@ -23,9 +28,13 @@ const ProfilePanel: FC<{}> = () => {
             <div className={styles.handle}>
                 {profile.handle}
             </div>
-            <a href={ProfileRouteConfig.profile} className={styles.profile}>
+            <Link
+                className={styles.profile}
+                onClick={() => props.toggleProfilePanel()}
+                to={ProfileRouteConfig.profile}
+            >
                 My Profile
-            </a>
+            </Link>
             <a href={AuthenticationUrlConfig.logout} className={styles.logout}>
                 Log Out
             </a>

src/lib/avatar/Avatar.module.scss

@@ -23,7 +23,7 @@ $avatar-size: 32px;
         align-items: center;
         color: $tc-white;
         background-color: $blue-100;
-        @include font-bold;
+        @include font-weight-medium;
         @extend .medium-subtitle;
     }
 }

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

@@ -1,46 +1,57 @@
 @import '../styles/';
 
 .content {
-    height: $content-height;
-    padding: $pad-xxl $pad-xxl $pad-xxl 0;
-
+    @include content-height;
+    padding: $pad-xxxxl $pad-content-lg;
     display: grid;
-    @include font-roboto;
+    background-color: $black-10;
+    grid-template-columns: 1fr;
+    justify-content: center;
 
     .sections {
-        display: grid;
+        display: none;
         height: 200px;
-    }
-
-    .sections {
         background-color: $tc-white;
     }
 
-    &.hide-sections {
-        grid-template-columns: 1fr;
-        justify-content: center;
-        padding-left: $pad-xxl;
+    &.show-sections {
+        padding-left: 0;
 
         .sections {
-            display: none;
-        }        
-    }
+            display: grid;
+        }
 
-    @include ltemd {
-        grid-template-columns: 1fr;
-        justify-content: center;
-        padding-left: $pad-xxl;
+        @include md {
+            padding-left: $pad-xxl;
+        }
 
-        .sections {
-            display: none;
+        @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 lg {
-        grid-template-columns: $left-col-width-lg 1fr;
+    @include ltesm {
+        padding: 0;
     }
 
-    @include xl {
-        grid-template-columns: $left-col-width-xl 1fr;
+    .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;
+        }
     }
 }

src/lib/content-layout/ContentLayout.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames'
 import { FC, ReactNode, useContext } from 'react'
 
-import { ProfileContext, ProfileContextData } from '../profile-provider'
 import { PlatformRoute, RouteContextData } from '../route-provider'
 import RouteContext from '../route-provider/route.context' // cannot be imported from index file
 import '../styles/index.scss'
@@ -18,7 +17,6 @@ export interface ContentLayoutProps {
 
 const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => {
 
-    const { profile }: ProfileContextData = useContext(ProfileContext)
     const { toolsRoutes, utilsRoutes }: RouteContextData = useContext(RouteContext)
 
     const rootRoute: PlatformRoute | undefined = [
@@ -34,19 +32,26 @@ const ContentLayout: FC<ContentLayoutProps> = (props: ContentLayoutProps) => {
             toolRoute: rootRoute.route,
         }))
         || []
-    const hideSectionsClass: string = !!sections.length ? '' : styles['hide-sections']
+    const hideSectionsClass: string = !sections.length ? '' : styles['show-sections']
 
     return (
         <>
             <div className={classNames(styles.content, props.classNames, hideSectionsClass)}>
+
                 <Sections sections={sections}></Sections>
-                <div>
-                    <h1>{props.title}</h1>
-                    {props.children}
-                    <div>
-                        Logged in as: {profile?.handle || 'Not Logged In'}
+
+                <div className={styles['content-outer']}>
+
+                    <div className={styles['content-inner']}>
+
+                        <h1>{props.title}</h1>
+
+                        {props.children}
+
                     </div>
+
                 </div>
+
             </div>
         </>
     )

src/lib/content-layout/sections/Sections.module.scss

@@ -1,7 +1,7 @@
 @import '../../styles/';
 
 .sections {
-    height: $content-height;
+    @include content-height;
 
     @include ltemd {
         display: none;