PLAT-825 profile and form fields - dev

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;

src/lib/content-layout/sections/section-selector/Section-Selector.module.scss

@@ -23,8 +23,7 @@ $svg-size: $pad-xxxxl;
     }
 
     svg {
-        width: $svg-size;
-        height: $svg-size;
+        @include icon-xxxxl;
         fill: none;
 
         path {
@@ -36,12 +35,12 @@ $svg-size: $pad-xxxxl;
 
     .title {
         text-align: center;
-        /* TODO: replace below this w/a named design system font class */
-        font-size: 11px;
-        font-weight: 600;
-        line-height: 14px;
-        letter-spacing: 0px;
-        text-transform: uppercase;
         color: $black-60;
+        // extend ultra small and override it
+        @extend .ultra-small;
+        font-style: normal;
+        @include font-weight-semi-bold;
+        line-height: 14px; 
+        text-transform: uppercase;
     }
 }

src/lib/form-elements/form-field/Form-Field.module.scss

@@ -0,0 +1,78 @@
+@import '../../styles';
+
+$form-pad-top: calc($pad-md - $border);
+$border-xs: 1px;
+
+.form-field-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-bottom: $pad-md;
+
+    .form-field {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: $pad-sm $form-pad-top;
+        height: calc($pad-xxl * 2);
+        background: $tc-white;
+        border: $border-xs solid $black-40;
+        box-sizing: border-box;
+        border-radius: $pad-xs;
+
+        &:hover,
+        &.focus {
+            border-color: $turq-160;
+
+            &.form-field-error {
+                border-color: $red-100;
+            }
+        }
+
+        &.focus,
+        &.form-field-error {
+            border-width: $border;
+            padding: calc($pad-sm - $border-xs) calc($form-pad-top - $border-xs);
+        }
+
+        &.disabled {
+            background-color: $black-10;
+            background: $black-10;
+            border-color: $black-40;
+        }
+
+        &.form-field-error {
+            border-color: $red-100;
+
+            .label {
+                color: $red-100;
+            }
+        }
+
+        .label {
+            top: calc(50% - $form-pad-top/2);
+            color: $turq-160;
+            margin-bottom: $pad-xs;
+            // extend ultra-small and override some properties
+            @extend .ultra-small;
+            @include font-weight-medium;
+            line-height: calc($pad-md - $border);
+        }
+    }
+
+    .error {
+        display: flex;
+        align-items: center;
+        color: $red-100;
+        // extend body ultra small and override it
+        @extend .body-ultra-small;
+        line-height: 14px;
+
+        svg {
+            @include icon-md;
+            fill: $red-100;
+            margin-right: $pad-xs;
+        }
+    }
+}