diff --git a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx b/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx index ebb5ce73d..8c5ed4118 100644 --- a/src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx +++ b/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 && (
diff --git a/src/lib/avatar/Avatar.module.scss b/src/lib/avatar/Avatar.module.scss index 7c5c112db..d6552d4fe 100644 --- a/src/lib/avatar/Avatar.module.scss +++ b/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; + } } } diff --git a/src/lib/avatar/Avatar.tsx b/src/lib/avatar/Avatar.tsx index 3717ebc97..c8bb4eb56 100644 --- a/src/lib/avatar/Avatar.tsx +++ b/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 = (props: AvatarProps) => { @@ -19,17 +21,21 @@ const Avatar: FC = (props: AvatarProps) => { const avatarElement: JSX.Element = !!props.photoUrl ? ( - {`${props.handle} + {`${props.handle} ) : ( - + {props.firstName?.charAt(0)} {props.lastName?.charAt(0)} ) return ( -
+
{avatarElement}
) diff --git a/src/lib/content-layout/ContentLayout.module.scss b/src/lib/content-layout/ContentLayout.module.scss index 378df1a16..c644e9e2f 100644 --- a/src/lib/content-layout/ContentLayout.module.scss +++ b/src/lib/content-layout/ContentLayout.module.scss @@ -2,46 +2,12 @@ .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; @@ -49,9 +15,8 @@ .content-inner { flex: 1; background-color: $tc-white; - border-radius: $pad-sm; max-width: $xl-max-content; - padding: $pad-xxl; + padding: 0; } } } diff --git a/src/lib/content-layout/ContentLayout.tsx b/src/lib/content-layout/ContentLayout.tsx index c86ec0f17..666b463bc 100644 --- a/src/lib/content-layout/ContentLayout.tsx +++ b/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 title: string + titleClass?: string } -// TODO: uncomment everything related to sections when we have the UI determined const ContentLayout: FC = (props: ContentLayoutProps) => { -/* const { allRoutes }: RouteContextData = useContext(RouteContext) - - const rootRoute: PlatformRoute | undefined = allRoutes - .find(route => route.title === props.title && route.enabled) - - const sections: Array = rootRoute?.children - .filter(sectionRoute => sectionRoute.enabled) - .map(sectionRoute => ({ - sectionRoute, - toolRoute: rootRoute.route, - })) - || [] - const hideSectionsClass: string = !sections.length ? '' : styles['show-sections'] */ - return ( - <> -
+
- {/* */} +
-
+
-
+
- {/* TODO: the title on the page should be an h1 tag, not h4 */} -

{props.title}

- - {props.children} +

{props.title}

+ {props.children} +
- + +
) } diff --git a/src/lib/content-layout/index.ts b/src/lib/content-layout/index.ts index e0413bf1a..3125caebc 100644 --- a/src/lib/content-layout/index.ts +++ b/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' diff --git a/src/lib/content-layout/sections/Sections.module.scss b/src/lib/content-layout/sections/Sections.module.scss deleted file mode 100644 index ad45ae9c7..000000000 --- a/src/lib/content-layout/sections/Sections.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import '../../styles/'; - -.sections { - @include content-height; - - @include ltemd { - display: none; - } -} diff --git a/src/lib/content-layout/sections/Sections.test.tsx b/src/lib/content-layout/sections/Sections.test.tsx deleted file mode 100644 index 3606036db..000000000 --- a/src/lib/content-layout/sections/Sections.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import '@testing-library/jest-dom' - -describe(' has at least one section', () => { - - test('it should render the sections panel', () => {}) -}) - -describe(' has zero sections', () => { - - test('it should NOT render the content', () => { }) -}) diff --git a/src/lib/content-layout/sections/Sections.tsx b/src/lib/content-layout/sections/Sections.tsx deleted file mode 100644 index 4899bf734..000000000 --- a/src/lib/content-layout/sections/Sections.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { FC } from 'react' - -import SectionSelector from './section-selector/Section-Selector' -import { SectionsProps } from './sections-props.model' -import styles from './Sections.module.scss' - -const Sections: FC = (props: SectionsProps) => { - - // if we don't have any sections, hide the entire area - if (!props.sections.length) { - return <> - } - - const sections: Array = props.sections - .map(section => ( - - )) - - return ( -
- {sections} -
- ) -} - -export default Sections diff --git a/src/lib/content-layout/sections/index.ts b/src/lib/content-layout/sections/index.ts deleted file mode 100644 index e4669eb62..000000000 --- a/src/lib/content-layout/sections/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default as Sections } from './Sections' -export * from './section-selector' -export * from './sections-props.model' diff --git a/src/lib/content-layout/sections/section-selector/Section-Selector.module.scss b/src/lib/content-layout/sections/section-selector/Section-Selector.module.scss deleted file mode 100644 index 62e0df815..000000000 --- a/src/lib/content-layout/sections/section-selector/Section-Selector.module.scss +++ /dev/null @@ -1,46 +0,0 @@ -@import '../../../styles/'; - -$svg-size: $pad-xxxxl; - -.section-selector { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: calc(2 * $svg-size); - - &.active { - - svg { - path { - stroke: $turq-120; - } - } - - .title { - color: $turq-120; - } - } - - svg { - @include icon-xxxxl; - fill: none; - - path { - fill: none; - stroke: $black-60; - stroke-width: $border; - } - } - - .title { - text-align: center; - 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; - } -} \ No newline at end of file diff --git a/src/lib/content-layout/sections/section-selector/Section-Selector.test.tsx b/src/lib/content-layout/sections/section-selector/Section-Selector.test.tsx deleted file mode 100644 index bbda6bb14..000000000 --- a/src/lib/content-layout/sections/section-selector/Section-Selector.test.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import '@testing-library/jest-dom' - -describe('', () => { - - test('it should render the section selector', () => {}) -}) diff --git a/src/lib/content-layout/sections/section-selector/Section-Selector.tsx b/src/lib/content-layout/sections/section-selector/Section-Selector.tsx deleted file mode 100644 index aa36da3e9..000000000 --- a/src/lib/content-layout/sections/section-selector/Section-Selector.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import classNames from 'classnames' -import { FC, SVGProps } from 'react' -import { Link, useLocation } from 'react-router-dom' - -import { routeIsActive } from '../../../route-provider/route.utils' // cannot be imported from barrel - -import { SectionSelectorProps } from './section-selector-props.model' -import styles from './Section-Selector.module.scss' - -const SectionSelector: FC = (props: SectionSelectorProps) => { - - const sectionRoute: string = `${props.toolRoute}${props.sectionRoute.route ? '/' : ''}${props.sectionRoute.route}` - const isActive: boolean = routeIsActive(useLocation().pathname, sectionRoute, props.toolRoute) - const Icon: FC> | undefined = props.sectionRoute.icon - - return ( - -
- {Icon && } -
- {props.sectionRoute.title} -
-
- - ) -} - -export default SectionSelector diff --git a/src/lib/content-layout/sections/section-selector/index.ts b/src/lib/content-layout/sections/section-selector/index.ts deleted file mode 100644 index cd9f9aa69..000000000 --- a/src/lib/content-layout/sections/section-selector/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as SectionSelector } from './Section-Selector' -export * from './section-selector-props.model' diff --git a/src/lib/content-layout/sections/section-selector/section-selector-props.model.ts b/src/lib/content-layout/sections/section-selector/section-selector-props.model.ts deleted file mode 100644 index 9543f3895..000000000 --- a/src/lib/content-layout/sections/section-selector/section-selector-props.model.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { PlatformRoute } from '../../../route-provider' - -export interface SectionSelectorProps { - sectionRoute: PlatformRoute - toolRoute: string -} diff --git a/src/lib/content-layout/sections/sections-props.model.ts b/src/lib/content-layout/sections/sections-props.model.ts deleted file mode 100644 index db7309c76..000000000 --- a/src/lib/content-layout/sections/sections-props.model.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { SectionSelectorProps } from './section-selector/section-selector-props.model' - -export interface SectionsProps { - sections: Array -} diff --git a/src/lib/form/Form.tsx b/src/lib/form/Form.tsx index 0c56e3b94..b50d16c91 100644 --- a/src/lib/form/Form.tsx +++ b/src/lib/form/Form.tsx @@ -143,7 +143,7 @@ const Form: (props: FormProps -
{props.formDef.title}
+

{props.formDef.title}

{formInputs} diff --git a/src/lib/styles/_layout.scss b/src/lib/styles/_layout.scss index 7714a6732..e0c1a6001 100644 --- a/src/lib/styles/_layout.scss +++ b/src/lib/styles/_layout.scss @@ -20,30 +20,7 @@ $pad-xxxxl: calc(8 * $pad-xs); // 32 $pad-content-lg: calc($pad-xxl + $pad-xxxxl); @mixin content-height { - - @include xxs { - height: calc(100vh - $header-height); - } - - @include xs { - height: calc(100vh - $header-height); - } - - @include sm { - height: calc(100vh - $header-height - calc(2 * $pad-xxl)); - } - - @include md { - height: calc(100vh - $header-height - calc(2 * $pad-xxl)); - } - - @include lg { - height: calc(100vh - $header-height - calc(2 * $pad-xxxxl)); - } - - @include xl { - height: calc(100vh - $header-height - calc(2 * $pad-xxxxl)); - } + height: calc(100vh - $header-height); } diff --git a/src/lib/styles/_typography.scss b/src/lib/styles/_typography.scss index 32b58f9b9..3843090f9 100644 --- a/src/lib/styles/_typography.scss +++ b/src/lib/styles/_typography.scss @@ -12,32 +12,23 @@ body { min-width: $xxs-max; } -h1, -h2, -h3, -h4, -h5, -h6, -h7 { - color: $black-100; - text-transform: uppercase; - margin: 16px 0; -} - h1, h2, h3, h4 { @include font-barlow-condensed; + text-transform: uppercase; + margin: 0; + letter-spacing: 0; + padding: 24px; } h1 { @include font-weight-semi-bold; - font-size: $header-height; - line-height: 72px; + font-size: 34px; + line-height: 32px; } -h1, h2, h3, h4 { @@ -45,42 +36,20 @@ h4 { } h2 { - font-size: 60px; - line-height: 56px; + font-size: 28px; + line-height: 28px; } h3 { - font-size: 48px; - line-height: 48px; -} - -h4 { - font-size: 34px; - line-height: 32px; -} - -h5, -h6, -h7 { - @include font-barlow; - @include font-weight-semi-bold; -} - -h5 { font-size: 24px; line-height: 24px; } -h6 { +h4 { font-size: 20px; line-height: 20px; } -h7 { - font-size: 16px; - line-height: 16px; -} - hr { color: $black-10; background-color: $black-10; diff --git a/src/tools/design-lib/DesignLib.module.scss b/src/tools/design-lib/DesignLib.module.scss deleted file mode 100644 index 48664a230..000000000 --- a/src/tools/design-lib/DesignLib.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.design-lib { - -} diff --git a/src/tools/design-lib/DesignLib.tsx b/src/tools/design-lib/DesignLib.tsx index 91e68fe3a..df66fb2b8 100644 --- a/src/tools/design-lib/DesignLib.tsx +++ b/src/tools/design-lib/DesignLib.tsx @@ -3,8 +3,6 @@ import { Outlet, Routes } from 'react-router-dom' import { ContentLayout, routeContext, RouteContextData } from '../../lib' -import styles from './DesignLib.module.scss' - export const toolTitle: string = 'Design Library' const DesignLib: FC<{}> = () => { @@ -12,7 +10,7 @@ const DesignLib: FC<{}> = () => { const { getChildRoutes }: RouteContextData = useContext(routeContext) return ( - + <> diff --git a/src/tools/design-lib/buttons/Buttons.tsx b/src/tools/design-lib/buttons/Buttons.tsx index 0befe3aec..b76411637 100644 --- a/src/tools/design-lib/buttons/Buttons.tsx +++ b/src/tools/design-lib/buttons/Buttons.tsx @@ -2,9 +2,9 @@ import { FC } from 'react' const Buttons: FC<{}> = () => { return ( -

+

Buttons -

+ ) } diff --git a/src/tools/design-lib/fonts/Fonts.tsx b/src/tools/design-lib/fonts/Fonts.tsx index 3750bdcb5..73c31914c 100644 --- a/src/tools/design-lib/fonts/Fonts.tsx +++ b/src/tools/design-lib/fonts/Fonts.tsx @@ -2,9 +2,9 @@ import { FC } from 'react' const Fonts: FC<{}> = () => { return ( -

+

Fonts -

+ ) } diff --git a/src/tools/design-lib/home/Home.tsx b/src/tools/design-lib/home/Home.tsx index 8588d2627..607f478f0 100644 --- a/src/tools/design-lib/home/Home.tsx +++ b/src/tools/design-lib/home/Home.tsx @@ -2,9 +2,9 @@ import { FC } from 'react' const Home: FC<{}> = () => { return ( -

+

Home -

+ ) } diff --git a/src/tools/design-lib/icons/Icons.tsx b/src/tools/design-lib/icons/Icons.tsx index bb1f51184..44ef0640d 100644 --- a/src/tools/design-lib/icons/Icons.tsx +++ b/src/tools/design-lib/icons/Icons.tsx @@ -2,9 +2,9 @@ import { FC } from 'react' const Icons: FC<{}> = () => { return ( -

+

Icons -

+ ) } diff --git a/src/tools/self-service/SelfService.module.scss b/src/tools/self-service/SelfService.module.scss deleted file mode 100644 index 1d03eb47c..000000000 --- a/src/tools/self-service/SelfService.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import '../../lib/styles'; - -.self-service { - -} diff --git a/src/tools/self-service/SelfService.tsx b/src/tools/self-service/SelfService.tsx index de4a37c32..22cdd4268 100644 --- a/src/tools/self-service/SelfService.tsx +++ b/src/tools/self-service/SelfService.tsx @@ -2,10 +2,8 @@ import { FC } from 'react' import { ContentLayout } from '../../lib' -import styles from './SelfService.module.scss' - export const toolTitle: string = 'Self Service' -const SelfService: FC<{}> = () => +const SelfService: FC<{}> = () => export default SelfService diff --git a/src/tools/work-intake/WorkIntake.module.scss b/src/tools/work-intake/WorkIntake.module.scss deleted file mode 100644 index b5eba7e52..000000000 --- a/src/tools/work-intake/WorkIntake.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.work-intake { - -} diff --git a/src/tools/work-intake/WorkIntake.tsx b/src/tools/work-intake/WorkIntake.tsx index 85d0e4482..1a84d32a1 100644 --- a/src/tools/work-intake/WorkIntake.tsx +++ b/src/tools/work-intake/WorkIntake.tsx @@ -3,7 +3,6 @@ import { FC } from 'react' import { ContentLayout, Form } from '../../lib' import { workIntakeDef } from './work-intake-form.config' -import styles from './WorkIntake.module.scss' export const toolTitle: string = 'Work' @@ -18,7 +17,7 @@ const WorkIntake: FC<{}> = () => { } return ( - +
= () => +const Home: FC<{}> = () => export default Home diff --git a/src/utils/settings/Settings.module.scss b/src/utils/settings/Settings.module.scss new file mode 100644 index 000000000..6be82db6a --- /dev/null +++ b/src/utils/settings/Settings.module.scss @@ -0,0 +1,12 @@ +.page-header { + background: url('./profile-settings-background.svg'); + padding: 48px 180px; + + h1 { + padding: 0; + } +} + +.avatar-container { + margin: -108px 32px; +} diff --git a/src/utils/settings/Settings.tsx b/src/utils/settings/Settings.tsx index 92045a76c..e265f5141 100644 --- a/src/utils/settings/Settings.tsx +++ b/src/utils/settings/Settings.tsx @@ -1,17 +1,18 @@ +import classNames from 'classnames' import { FC, useContext } from 'react' -import { Outlet, Routes } from 'react-router-dom' import { authUrlLogin, + Avatar, ContentLayout, profileContext, ProfileContextData, - routeContext, - RouteContextData, routeRoot, } from '../../lib' import '../../lib/styles/index.scss' +import styles from './Settings.module.scss' + export const utilTitle: string = 'Settings' const Settings: FC<{}> = () => { @@ -19,8 +20,6 @@ const Settings: FC<{}> = () => { const profileContextData: ProfileContextData = useContext(profileContext) const { profile, initialized }: ProfileContextData = profileContextData - const { getChildRoutes }: RouteContextData = useContext(routeContext) - // TODO: create an auth provider // if we don't have a profile, don't show the page until it's initialized if (!profile) { @@ -32,13 +31,18 @@ const Settings: FC<{}> = () => { } return ( - - <> - - - {getChildRoutes(utilTitle)} - - + + ) } diff --git a/src/utils/settings/profile-settings-background.svg b/src/utils/settings/profile-settings-background.svg new file mode 100644 index 000000000..f81063e50 --- /dev/null +++ b/src/utils/settings/profile-settings-background.svg @@ -0,0 +1,24 @@ + + + + + + + + + diff --git a/src/utils/settings/profile-update/ProfileUpdate.tsx b/src/utils/settings/profile-update/ProfileUpdate.tsx index a9f92b9fa..7e02738cb 100644 --- a/src/utils/settings/profile-update/ProfileUpdate.tsx +++ b/src/utils/settings/profile-update/ProfileUpdate.tsx @@ -65,7 +65,7 @@ const ProfileUpdate: FC = (props: ProfileUpdateProps) => {
-
Password
+

Password