From 13b9d4d6283095437ad9c34082f4241f889255fa Mon Sep 17 00:00:00 2001 From: brooketopcoder Date: Mon, 28 Mar 2022 16:00:05 -0700 Subject: [PATCH 1/5] PROD-1075 #comment remove settings; re-do h tag styles #time 15m --- src/lib/content-layout/ContentLayout.tsx | 40 ++++------------ src/lib/content-layout/index.ts | 3 -- .../sections/Sections.module.scss | 9 ---- .../content-layout/sections/Sections.test.tsx | 11 ----- src/lib/content-layout/sections/Sections.tsx | 30 ------------ src/lib/content-layout/sections/index.ts | 3 -- .../Section-Selector.module.scss | 46 ------------------- .../Section-Selector.test.tsx | 6 --- .../section-selector/Section-Selector.tsx | 28 ----------- .../sections/section-selector/index.ts | 2 - .../section-selector-props.model.ts | 6 --- .../sections/sections-props.model.ts | 5 -- src/lib/form/Form.tsx | 2 +- src/lib/styles/_typography.scss | 40 ++++------------ src/tools/design-lib/buttons/Buttons.tsx | 4 +- src/tools/design-lib/fonts/Fonts.tsx | 4 +- src/tools/design-lib/home/Home.tsx | 4 +- src/tools/design-lib/icons/Icons.tsx | 4 +- .../settings/profile-update/ProfileUpdate.tsx | 2 +- 19 files changed, 26 insertions(+), 223 deletions(-) delete mode 100644 src/lib/content-layout/sections/Sections.module.scss delete mode 100644 src/lib/content-layout/sections/Sections.test.tsx delete mode 100644 src/lib/content-layout/sections/Sections.tsx delete mode 100644 src/lib/content-layout/sections/index.ts delete mode 100644 src/lib/content-layout/sections/section-selector/Section-Selector.module.scss delete mode 100644 src/lib/content-layout/sections/section-selector/Section-Selector.test.tsx delete mode 100644 src/lib/content-layout/sections/section-selector/Section-Selector.tsx delete mode 100644 src/lib/content-layout/sections/section-selector/index.ts delete mode 100644 src/lib/content-layout/sections/section-selector/section-selector-props.model.ts delete mode 100644 src/lib/content-layout/sections/sections-props.model.ts diff --git a/src/lib/content-layout/ContentLayout.tsx b/src/lib/content-layout/ContentLayout.tsx index c86ec0f17..aa74d1835 100644 --- a/src/lib/content-layout/ContentLayout.tsx +++ b/src/lib/content-layout/ContentLayout.tsx @@ -1,58 +1,34 @@ 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 } -// 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 ( - <> -
+
- {/* */} +
-
+
-
+

{props.title}

- {/* TODO: the title on the page should be an h1 tag, not h4 */} -

{props.title}

- - {props.children} - -
+ {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/_typography.scss b/src/lib/styles/_typography.scss index 32b58f9b9..099612056 100644 --- a/src/lib/styles/_typography.scss +++ b/src/lib/styles/_typography.scss @@ -15,10 +15,7 @@ body { h1, h2, h3, -h4, -h5, -h6, -h7 { +h4 { color: $black-100; text-transform: uppercase; margin: 16px 0; @@ -29,15 +26,16 @@ h2, h3, h4 { @include font-barlow-condensed; + text-transform: uppercase; + letter-spacing: 0; } h1 { @include font-weight-semi-bold; - font-size: $header-height; - line-height: 72px; + font-size: 34; + line-height: 32px; } -h1, h2, h3, h4 { @@ -45,42 +43,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/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/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

From fcb2e17be22193360d3ca19c17f2a2bf4afa761b Mon Sep 17 00:00:00 2001 From: brooketopcoder Date: Mon, 28 Mar 2022 16:02:45 -0700 Subject: [PATCH 2/5] PROD-1075 #comment remove more sections #time 5m --- .../content-layout/ContentLayout.module.scss | 26 ------------------- 1 file changed, 26 deletions(-) diff --git a/src/lib/content-layout/ContentLayout.module.scss b/src/lib/content-layout/ContentLayout.module.scss index 378df1a16..1690d06f8 100644 --- a/src/lib/content-layout/ContentLayout.module.scss +++ b/src/lib/content-layout/ContentLayout.module.scss @@ -8,32 +8,6 @@ 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; } From b850cf9ca64bf4917f8f824ca188b756259dd7c9 Mon Sep 17 00:00:00 2001 From: brooketopcoder Date: Tue, 29 Mar 2022 08:44:04 -0700 Subject: [PATCH 3/5] PROD-1075 #comment remove content margin, padding, and background; allow tool-specific header styling #time 1h --- .../content-layout/ContentLayout.module.scss | 15 +++-------- src/lib/content-layout/ContentLayout.tsx | 10 +++++--- src/lib/styles/_layout.scss | 25 +------------------ src/lib/styles/_palette.scss | 7 ++++++ src/lib/styles/_typography.scss | 13 +++------- src/tools/design-lib/DesignLib.module.scss | 3 --- src/tools/design-lib/DesignLib.tsx | 4 +-- .../self-service/SelfService.module.scss | 5 ---- src/tools/self-service/SelfService.tsx | 4 +-- src/tools/work-intake/WorkIntake.module.scss | 3 --- src/tools/work-intake/WorkIntake.tsx | 3 +-- src/utils/home/Home.tsx | 4 +-- src/utils/settings/Settings.tsx | 5 +++- 13 files changed, 29 insertions(+), 72 deletions(-) delete mode 100644 src/tools/design-lib/DesignLib.module.scss delete mode 100644 src/tools/self-service/SelfService.module.scss delete mode 100644 src/tools/work-intake/WorkIntake.module.scss diff --git a/src/lib/content-layout/ContentLayout.module.scss b/src/lib/content-layout/ContentLayout.module.scss index 1690d06f8..c644e9e2f 100644 --- a/src/lib/content-layout/ContentLayout.module.scss +++ b/src/lib/content-layout/ContentLayout.module.scss @@ -2,20 +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; - @include md { - padding: $pad-xxl; - } - - @include ltesm { - padding: 0; - } - .content-outer { display: flex; justify-content: center; @@ -23,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 aa74d1835..666b463bc 100644 --- a/src/lib/content-layout/ContentLayout.tsx +++ b/src/lib/content-layout/ContentLayout.tsx @@ -7,20 +7,24 @@ import styles from './ContentLayout.module.scss' export interface ContentLayoutProps { children?: ReactNode - classNames?: string title: string + titleClass?: string } const ContentLayout: FC = (props: ContentLayoutProps) => { return ( -
+
-

{props.title}

+
+ +

{props.title}

+ +
{props.children} 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/_palette.scss b/src/lib/styles/_palette.scss index cb06e51ab..ba89535a5 100644 --- a/src/lib/styles/_palette.scss +++ b/src/lib/styles/_palette.scss @@ -150,6 +150,13 @@ $tc-grad12: linear-gradient(90deg, #652385 0%, #8C384C 100%); $tc-grad13: linear-gradient(90deg, #219174 0%, #B98F31 100%); $tc-grad14: linear-gradient(0deg, #880152 0%, #BE4A1D 100%); +@mixin tc-grad6-bg { + background: $tc-grad6; +} +.tc-grad6-bg { + @include tc-grad6-bg; +} + /* OPACITY */ $black-100-opacity-80: rgba(255, 255, 255, 0.8) \ No newline at end of file diff --git a/src/lib/styles/_typography.scss b/src/lib/styles/_typography.scss index 099612056..0d39c6d99 100644 --- a/src/lib/styles/_typography.scss +++ b/src/lib/styles/_typography.scss @@ -12,28 +12,21 @@ body { min-width: $xxs-max; } -h1, -h2, -h3, -h4 { - 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; } h1 { @include font-weight-semi-bold; - font-size: 34; + font-size: 34px; line-height: 32px; + padding: 24px; } h2, 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/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.tsx b/src/utils/settings/Settings.tsx index 92045a76c..6af38106c 100644 --- a/src/utils/settings/Settings.tsx +++ b/src/utils/settings/Settings.tsx @@ -32,7 +32,10 @@ const Settings: FC<{}> = () => { } return ( - + <> From 6e97d876f4e1c4d29bd2904fd5b47da6fa007a88 Mon Sep 17 00:00:00 2001 From: brooketopcoder Date: Tue, 29 Mar 2022 10:29:44 -0700 Subject: [PATCH 4/5] PROD-1075 #comment settings header; xl and sm avatars; #time 1h --- .../profile-logged-in/ProfileLoggedIn.tsx | 1 + src/lib/avatar/Avatar.module.scss | 35 ++++++++++++++++--- src/lib/avatar/Avatar.tsx | 12 +++++-- src/lib/styles/_typography.scss | 2 +- src/utils/settings/Settings.module.scss | 12 +++++++ src/utils/settings/Settings.tsx | 25 ++++++------- .../settings/profile-settings-background.svg | 24 +++++++++++++ 7 files changed, 90 insertions(+), 21 deletions(-) create mode 100644 src/utils/settings/Settings.module.scss create mode 100644 src/utils/settings/profile-settings-background.svg 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/styles/_typography.scss b/src/lib/styles/_typography.scss index 0d39c6d99..3843090f9 100644 --- a/src/lib/styles/_typography.scss +++ b/src/lib/styles/_typography.scss @@ -20,13 +20,13 @@ h4 { text-transform: uppercase; margin: 0; letter-spacing: 0; + padding: 24px; } h1 { @include font-weight-semi-bold; font-size: 34px; line-height: 32px; - padding: 24px; } h2, diff --git a/src/utils/settings/Settings.module.scss b/src/utils/settings/Settings.module.scss new file mode 100644 index 000000000..e9a516893 --- /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; +} \ No newline at end of file diff --git a/src/utils/settings/Settings.tsx b/src/utils/settings/Settings.tsx index 6af38106c..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) { @@ -34,14 +33,16 @@ 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 @@ + + + + + + + + + From 2252d368508548e42f1a944503458faea1a55d39 Mon Sep 17 00:00:00 2001 From: brooketopcoder Date: Tue, 29 Mar 2022 10:33:10 -0700 Subject: [PATCH 5/5] PROD-1075 #comment clean-up #time 5m --- src/lib/styles/_palette.scss | 7 ------- src/utils/settings/Settings.module.scss | 2 +- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/src/lib/styles/_palette.scss b/src/lib/styles/_palette.scss index ba89535a5..cb06e51ab 100644 --- a/src/lib/styles/_palette.scss +++ b/src/lib/styles/_palette.scss @@ -150,13 +150,6 @@ $tc-grad12: linear-gradient(90deg, #652385 0%, #8C384C 100%); $tc-grad13: linear-gradient(90deg, #219174 0%, #B98F31 100%); $tc-grad14: linear-gradient(0deg, #880152 0%, #BE4A1D 100%); -@mixin tc-grad6-bg { - background: $tc-grad6; -} -.tc-grad6-bg { - @include tc-grad6-bg; -} - /* OPACITY */ $black-100-opacity-80: rgba(255, 255, 255, 0.8) \ No newline at end of file diff --git a/src/utils/settings/Settings.module.scss b/src/utils/settings/Settings.module.scss index e9a516893..6be82db6a 100644 --- a/src/utils/settings/Settings.module.scss +++ b/src/utils/settings/Settings.module.scss @@ -9,4 +9,4 @@ .avatar-container { margin: -108px 32px; -} \ No newline at end of file +}