From e4647a29da342b5c637d8bf317602c4a1a4af091 Mon Sep 17 00:00:00 2001 From: Kendall Strautman Swarthout <36613477+kendallstrautman@users.noreply.github.com> Date: Thu, 22 Jun 2023 12:18:47 -0700 Subject: [PATCH] feat: adds theming homepage (#2007) * enable theming homepage * remove homepage from non themed path config * update bg page color * update bg page title * adds chiclet dark theme styles * overrides on featured cards * adjust prefooter * adjust cert card body color * update search card styles * adds dark bg * border primary * make it border faint * remove base box shadow, make border primary --- config/base.json | 2 +- .../mobile-menu-container/index.tsx | 3 +- .../components/chiclets/chiclets.module.css | 17 ++++-- .../certifications-featured-card.module.css | 4 ++ .../featured-card.module.css | 9 +++- .../search-featured-card.module.css | 18 +++++++ .../page-title/page-title.module.css | 15 ++++-- .../homepage/components/pre-footer/index.tsx | 1 + .../pre-footer/pre-footer.module.css | 6 +++ src/views/homepage/homepage.module.css | 5 ++ src/views/homepage/img/background-dark.svg | 52 +++++++++++++++++++ src/views/homepage/index.tsx | 1 - 12 files changed, 120 insertions(+), 13 deletions(-) create mode 100644 src/views/homepage/img/background-dark.svg diff --git a/config/base.json b/config/base.json index d53f80ff0a..35cdcb8488 100644 --- a/config/base.json +++ b/config/base.json @@ -30,7 +30,7 @@ "/certifications", "/certifications/[slug]" ], - "non_themed_paths": ["/", "/sign-up"], + "non_themed_paths": ["/sign-up"], "datadog_config": { "scriptUrl": "https://www.datadoghq-browser-agent.com/datadog-rum-v4.js", "applicationId": "40a2019f-88ad-4076-ab52-ffd074064eed", diff --git a/src/components/mobile-menu-container/index.tsx b/src/components/mobile-menu-container/index.tsx index 13f80d7b06..421c60f9dd 100644 --- a/src/components/mobile-menu-container/index.tsx +++ b/src/components/mobile-menu-container/index.tsx @@ -11,6 +11,7 @@ import { useRouter } from 'next/router' // Global imports import { getUserMenuItems } from 'lib/auth/user' +import isThemedPath from 'lib/isThemedPath' import { useMobileMenu } from 'contexts' import useAuthentication from 'hooks/use-authentication' import Button from 'components/button' @@ -46,7 +47,7 @@ const MobileAuthenticationControls = () => { useAuthentication() const showUnauthenticatedUI = !isLoading && !isAuthenticated const { pathname } = useRouter() - const shouldRenderThemeSwitcher = pathname !== '/' + const shouldRenderThemeSwitcher = isThemedPath(pathname) if (!isAuthenticated && !showUnauthenticatedUI) { return null diff --git a/src/views/homepage/components/chiclets/chiclets.module.css b/src/views/homepage/components/chiclets/chiclets.module.css index 0ca34213e2..d16d63ff43 100644 --- a/src/views/homepage/components/chiclets/chiclets.module.css +++ b/src/views/homepage/components/chiclets/chiclets.module.css @@ -35,6 +35,10 @@ line-height: var(--token-typography-display-300-line-height); margin-bottom: 20px; } + + @nest html[data-theme='dark'] & { + color: var(--token-color-foreground-strong); + } } .navList { @@ -61,16 +65,16 @@ display: block; padding: 1px; - /* this is --token-surface-mid-box-shadow in dark mode */ - box-shadow: 0 0 0 1px #b2b6bd26, 0 2px 3px 0 #6168751a, - 0 8px 16px -10px #61687533; - &:hover { /* this is --token-surface-high-box-shadow in dark mode */ box-shadow: 0 0 0 1px #b2b6bd40, 0 2px 3px 0 #61687526, 0 16px 16px -10px #61687533; background: var(--hover-background); } + + @nest html[data-theme='dark'] & { + background-color: var(--token-color-border-primary); + } } .navListLinkContent { @@ -91,6 +95,11 @@ width: 22px; } } + + @nest html[data-theme='dark'] & { + background-color: var(--token-color-foreground-high-contrast); + color: var(--token-color-foreground-strong); + } } .chicletText { diff --git a/src/views/homepage/components/featured-content-grid/certifications-featured-card.module.css b/src/views/homepage/components/featured-content-grid/certifications-featured-card.module.css index b55f56485e..3a40b1191b 100644 --- a/src/views/homepage/components/featured-content-grid/certifications-featured-card.module.css +++ b/src/views/homepage/components/featured-content-grid/certifications-featured-card.module.css @@ -71,4 +71,8 @@ font-size: var(--token-typography-body-200-font-size); line-height: var(--token-typography-body-200-line-height); } + + @nest html[data-theme='dark'] & { + color: var(--token-color-foreground-primary); + } } diff --git a/src/views/homepage/components/featured-content-grid/featured-card.module.css b/src/views/homepage/components/featured-content-grid/featured-card.module.css index 64b6334b3c..449de9344b 100644 --- a/src/views/homepage/components/featured-content-grid/featured-card.module.css +++ b/src/views/homepage/components/featured-content-grid/featured-card.module.css @@ -5,7 +5,7 @@ .card { background-color: var(--token-color-foreground-strong); - color: var(--token-color-palette-neutral-0); + color: var(--token-color-foreground-high-contrast); display: flex; flex-direction: column; height: 100%; @@ -17,6 +17,11 @@ gap: 10px; padding-right: 0; } + + @nest html[data-theme='dark'] & { + background-color: var(--token-color-foreground-high-contrast); + color: var(--token-color-foreground-strong); + } } .learnMoreCtaContainer { @@ -24,7 +29,7 @@ } .learnMoreCta { - color: var(--token-color-palette-neutral-0); + color: inherit; gap: 6px; padding-right: 4px; diff --git a/src/views/homepage/components/featured-content-grid/search-featured-card.module.css b/src/views/homepage/components/featured-content-grid/search-featured-card.module.css index b4c28c1d15..a358026003 100644 --- a/src/views/homepage/components/featured-content-grid/search-featured-card.module.css +++ b/src/views/homepage/components/featured-content-grid/search-featured-card.module.css @@ -21,6 +21,11 @@ background-image: url('../../img/search-card-graphic.svg'); background-position-x: 1rem; } + + @nest html[data-theme='dark'] & { + background-color: var(--token-color-foreground-high-contrast); + color: var(--token-color-foreground-strong); + } } .heading { @@ -42,6 +47,10 @@ font-size: var(--token-typography-display-300-font-size); line-height: var(--token-typography-display-300-line-height); } + + @nest html[data-theme='dark'] & { + color: var(--token-color-foreground-strong); + } } .description { @@ -51,6 +60,10 @@ & span { display: block; } + + @nest html[data-theme='dark'] & { + color: var(--token-color-foreground-primary); + } } .carousel { @@ -193,6 +206,11 @@ align-items: flex-start; flex-direction: column; } + + @nest html[data-theme='dark'] & { + background-color: var(--token-color-foreground-high-contrast); + color: var(--token-color-foreground-strong); + } } .buttonText { diff --git a/src/views/homepage/components/page-title/page-title.module.css b/src/views/homepage/components/page-title/page-title.module.css index 9fcb6b5013..f22d07df8e 100644 --- a/src/views/homepage/components/page-title/page-title.module.css +++ b/src/views/homepage/components/page-title/page-title.module.css @@ -29,21 +29,24 @@ * https://stackoverflow.com/a/28592238 */ .line1 { + --bg-gradient-base: var(--token-color-foreground-high-contrast); + background: linear-gradient( 90deg, rgba(136, 143, 255, 0.46) 9.03%, rgba(223, 255, 199, 0.57) 41.12%, rgba(255, 177, 80, 0.31) 61.68% ), - linear-gradient( - var(--token-color-foreground-high-contrast), - var(--token-color-foreground-high-contrast) - ); + linear-gradient(var(--bg-gradient-base), var(--bg-gradient-base)); background-clip: text; color: transparent; display: block; font-weight: var(--token-typography-font-weight-bold); width: fit-content; + + @nest html[data-theme='dark'] & { + --bg-gradient-base: var(--token-color-foreground-strong); + } } .line2 { @@ -51,4 +54,8 @@ display: block; font-weight: var(--token-typography-font-weight-semibold); width: fit-content; + + @nest html[data-theme='dark'] & { + color: var(--token-color-foreground-strong); + } } diff --git a/src/views/homepage/components/pre-footer/index.tsx b/src/views/homepage/components/pre-footer/index.tsx index 5540a18659..f199501e17 100644 --- a/src/views/homepage/components/pre-footer/index.tsx +++ b/src/views/homepage/components/pre-footer/index.tsx @@ -54,6 +54,7 @@ function PreFooter({ heading, description, actions }: PreFooterProps) { {action.heading} } diff --git a/src/views/homepage/components/pre-footer/pre-footer.module.css b/src/views/homepage/components/pre-footer/pre-footer.module.css index 5ec25a7512..f395c69b85 100644 --- a/src/views/homepage/components/pre-footer/pre-footer.module.css +++ b/src/views/homepage/components/pre-footer/pre-footer.module.css @@ -22,6 +22,7 @@ .content { grid-column: 1 / -1; + color: var(--token-color-foreground-strong); @media (--dev-dot-tablet-up) { grid-column: 1 / 7; @@ -57,4 +58,9 @@ .actionsHeading { margin-bottom: 8px; + color: var(--token-color-foreground-strong); +} + +.actionsDescription { + color: var(--token-color-foreground-primary); } diff --git a/src/views/homepage/homepage.module.css b/src/views/homepage/homepage.module.css index 7a6e6e9a40..ec0173a311 100644 --- a/src/views/homepage/homepage.module.css +++ b/src/views/homepage/homepage.module.css @@ -37,6 +37,11 @@ background-position-x: -550px; background-position-y: -30px; } + + @nest html[data-theme='dark'] & { + background-color: var(--token-color-page-primary); + background-image: url('./img/background-dark.svg'); + } } .limitedWidthContainer { diff --git a/src/views/homepage/img/background-dark.svg b/src/views/homepage/img/background-dark.svg new file mode 100644 index 0000000000..6b8e9c19bc --- /dev/null +++ b/src/views/homepage/img/background-dark.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/views/homepage/index.tsx b/src/views/homepage/index.tsx index 4fe00067d6..fb95a0b7e8 100644 --- a/src/views/homepage/index.tsx +++ b/src/views/homepage/index.tsx @@ -64,6 +64,5 @@ function HomePageView(): ReactElement { */ HomePageView.contentType = 'tutorials' HomePageView.layout = BaseNewLayout -HomePageView.theme = GlobalThemeOption.light export default HomePageView