From 558eede2cebf59816a1e21436d7481c902b5230c Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Tue, 3 Mar 2026 15:06:52 -0500 Subject: [PATCH 1/5] refactor ribbon component --- .../bars/ribbon/ribbon.component.tsx | 137 +----------------- .../components/bars/ribbon/ribbon.module.scss | 40 +---- 2 files changed, 4 insertions(+), 173 deletions(-) diff --git a/src/features/common/components/bars/ribbon/ribbon.component.tsx b/src/features/common/components/bars/ribbon/ribbon.component.tsx index 4827cb2f..d4954b89 100644 --- a/src/features/common/components/bars/ribbon/ribbon.component.tsx +++ b/src/features/common/components/bars/ribbon/ribbon.component.tsx @@ -1,129 +1,21 @@ "use client"; -import React, { useCallback, useEffect, useMemo, useState } from "react"; +import React from "react"; import { LayoutDictionaryModel } from "@/features/localization/models/layout-dictionary.model"; import styles from "./ribbon.module.scss"; import { BoxComponent } from "@/features/common/components/box/box.component"; -import { savePreferredLanguage } from "@/features/localization/services/ui-language.utils"; import Link from "next/link"; -import { - getSanitizedThemePickerCodeValue, - isLightThemePreference, - isSystemThemePreference, -} from "@/features/themes/services/theme.utils"; -import { RibbonPickerComponent } from "@/features/common/components/bars/ribbon/ribbon-picker/ribbon-picker.component"; -import { LightIconComponent } from "@/features/common/components/bars/ribbon/assets/light-icon.component"; -import { DarkIconComponent } from "@/features/common/components/bars/ribbon/assets/dark-icon.component"; -import { ThemeModel } from "@/features/common/models/theme.model"; -import { useAppStore } from "@/features/common/services/app.store"; -import { SystemIconComponent } from "@/features/common/components/bars/ribbon/assets/system-icon.component"; -import { - ThemeCookieValues, - ThemePickerCodeValues, -} from "@/features/common/values/theme.values"; -import { savePreferredThemeInCookie } from "@/features/themes/services/theme.client.utils"; interface RibbonComponentProps { - themeCode: ThemeCookieValues; - languageCode: string; dictionary: LayoutDictionaryModel["ribbon"]; } export const RibbonComponent: React.FC = ({ - themeCode, - languageCode, dictionary, }) => { - const theme$ = useAppStore((state) => state.theme$); - - const sanitizedThemePickerCodeValue = useMemo(() => { - return getSanitizedThemePickerCodeValue(themeCode); - }, [themeCode]); - - const [currentTheme, setCurrentTheme] = useState( - dictionary.themePicker.options.filter((element) => - isSystemThemePreference(themeCode) - ? isSystemThemePreference(element.code) - : element.code === sanitizedThemePickerCodeValue, - )[0], - ); - - const themeOptions = useMemo( - () => - dictionary.themePicker.options.map((option) => { - return { - code: option.code, - full: { - ...option, - label: option.label, - icon: isSystemThemePreference(option.code) ? ( - - ) : isLightThemePreference(option.code) ? ( - - ) : ( - - ), - }, - compact: { - ...option, - label: null, - icon: isSystemThemePreference(option.code) ? ( - - ) : isLightThemePreference(option.code) ? ( - - ) : ( - - ), - }, - }; - }), - [dictionary.themePicker.options], - ); - - const handleThemeSelection = useCallback( - async (value: ThemePickerCodeValues) => { - const themePreference = await savePreferredThemeInCookie( - value, - languageCode, - ); - - if (themePreference) { - setCurrentTheme(themePreference); - } - }, - [languageCode], - ); - - const handleLanguageSelection = useCallback(async (value: string) => { - await savePreferredLanguage(value); - }, []); - - useEffect(() => { - if (theme$) { - setCurrentTheme( - dictionary.themePicker.options.filter((element) => - isSystemThemePreference(themeCode) - ? isSystemThemePreference(element.code) - : element.code === sanitizedThemePickerCodeValue, - )[0], - ); - } - }, [ - dictionary.themePicker.options, - sanitizedThemePickerCodeValue, - theme$, - themeCode, - ]); return ( - <> - +
{dictionary.cta.title} = ({
-
- - label={null} - compactLabel={null} - icon={ - isSystemThemePreference(currentTheme.code) ? ( - - ) : isLightThemePreference(currentTheme.code) ? ( - - ) : ( - - ) - } - languageCode={languageCode} - selectedOptionCode={currentTheme.code} - handleSelection={handleThemeSelection} - options={themeOptions} - aria={{ - buttonLabel: dictionary.themePicker.button.ariaLabel, - listLabel: dictionary.themePicker.list.ariaLabel, - }} - /> -
- - ); }; diff --git a/src/features/common/components/bars/ribbon/ribbon.module.scss b/src/features/common/components/bars/ribbon/ribbon.module.scss index 8959d4ef..7436d922 100644 --- a/src/features/common/components/bars/ribbon/ribbon.module.scss +++ b/src/features/common/components/bars/ribbon/ribbon.module.scss @@ -1,38 +1,10 @@ @use "@/libs/theme/styles/variables" as *; @use "@/libs/theme/styles/mixins" as *; -.container { - @include Container; - - background: var(--color_bg_app_bar); - border-bottom: 1px solid; - border-image-slice: 1; - border-image-source: linear-gradient( - 135deg, - rgb(76, 183, 163) 0%, - rgb(63, 89, 228) 50%, - rgb(64, 22, 160) 100% - ); -} - -.wrapper { - @include ExtendedGrid; - height: $ribbon-height; -} - -.content { - position: relative; - @include InnerContentFlex; - height: 100%; - grid-column: 1 / -1; - align-items: center; - justify-content: space-between; - - color: $neutrals-light-100-snow; -} - .cta { display: flex; + align-items: center; + justify-content: center; font-size: 0.75rem; line-height: 1.25rem; color: $Neutral0; @@ -88,11 +60,3 @@ } } -.actions { - display: flex; - gap: 0.5rem; - - @media #{$breakpoint-dimension-md} { - gap: 1rem; - } -} From 1ff3f2ab88bb8c87596f96b0eb4f83807fd108ea Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Tue, 3 Mar 2026 15:07:49 -0500 Subject: [PATCH 2/5] udpate navbar height variables --- src/libs/theme/styles/_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/theme/styles/_variables.scss b/src/libs/theme/styles/_variables.scss index b42bba6a..75fa4b29 100644 --- a/src/libs/theme/styles/_variables.scss +++ b/src/libs/theme/styles/_variables.scss @@ -150,8 +150,8 @@ $gradient-app-card---resting: linear-gradient( $ribbon-height: 2rem; $ribbon-height-mobile: 2rem; -$navbar-height: 5rem; -$navbar-height-mobile: 3rem; +$navbar-height: 6rem; +$navbar-height-mobile: 4.5rem; $main-nav-height: calc($ribbon-height + $navbar-height); $main-nav-height-mobile: calc($ribbon-height-mobile + $navbar-height-mobile); From 56a80bf81facc82da354caf64b5aa9cac496f43b Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Tue, 3 Mar 2026 15:09:48 -0500 Subject: [PATCH 3/5] add ribbon to header component and update styles --- .../headers/header/header.component.tsx | 90 ++++++++++--------- .../headers/header/header.module.scss | 13 +++ 2 files changed, 61 insertions(+), 42 deletions(-) diff --git a/src/features/common/components/headers/header/header.component.tsx b/src/features/common/components/headers/header/header.component.tsx index 7002824d..7810c630 100644 --- a/src/features/common/components/headers/header/header.component.tsx +++ b/src/features/common/components/headers/header/header.component.tsx @@ -25,6 +25,7 @@ import { } from "@/features/common/values/theme.values"; import { ThemeModel } from "@/features/common/models/theme.model"; import { savePreferredThemeInCookie } from "@/features/themes/services/theme.client.utils"; +import { RibbonComponent } from "../../bars/ribbon/ribbon.component"; interface HeaderComponentProps { themeCode: ThemeCookieValues; @@ -65,7 +66,7 @@ export const HeaderComponent: React.FC = ({ ), }; }), - [dictionary.ribbon.themePicker.options] + [dictionary.ribbon.themePicker.options], ); const sanitizedThemePickerCodeValue = useMemo(() => { @@ -76,22 +77,22 @@ export const HeaderComponent: React.FC = ({ dictionary.ribbon.themePicker.options.filter((element) => isSystemThemePreference(themeCode) ? isSystemThemePreference(element.code) - : element.code === sanitizedThemePickerCodeValue - )[0] + : element.code === sanitizedThemePickerCodeValue, + )[0], ); const handleThemeSelection = useCallback( async (value: ThemePickerCodeValues) => { const themePreference = await savePreferredThemeInCookie( value, - languageCode + languageCode, ); if (themePreference) { setCurrentTheme(themePreference); } }, - [languageCode] + [languageCode], ); return ( @@ -102,47 +103,52 @@ export const HeaderComponent: React.FC = ({ contentClassName={styles.content} aria-label="Main navigation" > -
- +
+
-
-
-
    - {dictionary.header.links.map((link) => { - const linkPath = - languageCode === DEFAULT_LANGUAGE_CODE || link.isExternal - ? link.path - : createUrlPath([languagePathPrefix, link.path]); +
    +
    + +
    +
    +
    +
      + {dictionary.header.links.map((link) => { + const linkPath = + languageCode === DEFAULT_LANGUAGE_CODE || link.isExternal + ? link.path + : createUrlPath([languagePathPrefix, link.path]); - return ( -
    • - - {link.label} - -
      • - ); - })} -
    + + {link.label} + + + ); + })} +
+
+
+
+
-
-
-
); diff --git a/src/features/common/components/headers/header/header.module.scss b/src/features/common/components/headers/header/header.module.scss index 9a00d9dc..3400faf5 100644 --- a/src/features/common/components/headers/header/header.module.scss +++ b/src/features/common/components/headers/header/header.module.scss @@ -32,6 +32,11 @@ } .content { + display: flex; + flex-direction: column; +} + +.outerNavContainer { display: flex; width: 100%; margin: 0 auto; @@ -49,6 +54,14 @@ z-index: 100; } +.ribbonContainer { + margin-top: 0.25rem; + display: flex; + justify-content: center; + padding-bottom: 1rem; + +} + .navContainer { display: flex; justify-content: center; From c8d5b61d8c2d747e9c128d76269b3fed326e1745 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Tue, 3 Mar 2026 15:10:01 -0500 Subject: [PATCH 4/5] add ribbon to mobile header component and update styles --- .../mobile-header/mobile-header.component.tsx | 25 +++++++++++++------ .../mobile-header/mobile-header.module.scss | 14 +++++++++-- 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/src/features/common/components/headers/mobile-header/mobile-header.component.tsx b/src/features/common/components/headers/mobile-header/mobile-header.component.tsx index 32f1080b..c636172f 100644 --- a/src/features/common/components/headers/mobile-header/mobile-header.component.tsx +++ b/src/features/common/components/headers/mobile-header/mobile-header.component.tsx @@ -12,6 +12,7 @@ import { sitePaths } from "@/features/seo/site-tree"; import { createUrlPath, getPathnameSegments } from "@/libs/utils/path.utils"; import { SiteBrandComponent } from "@/features/common/components/site-brand/site-brand.component"; import { ThemeCookieValues } from "@/features/common/values/theme.values"; +import { RibbonComponent } from "../../bars/ribbon/ribbon.component"; interface MobileHeaderComponentProps { themeCode: ThemeCookieValues; @@ -78,14 +79,21 @@ export const MobileHeaderComponent: React.FC = ({ return ( <> - + +
+ +
+
- +
- +
+
Date: Tue, 3 Mar 2026 15:11:41 -0500 Subject: [PATCH 5/5] add h1 header to homepage --- .../home/components/home-page/home-page.component.tsx | 3 ++- .../home/components/home-page/home-page.module.scss | 11 ++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/features/home/components/home-page/home-page.component.tsx b/src/features/home/components/home-page/home-page.component.tsx index eb24a20f..6ec77ab5 100644 --- a/src/features/home/components/home-page/home-page.component.tsx +++ b/src/features/home/components/home-page/home-page.component.tsx @@ -1,6 +1,6 @@ import React from "react"; +import styles from "./home-page.module.scss" import { HeroComponent } from "@/features/common/components/hero/hero.component"; -import { Auth0CtaComponent } from "@/features/common/components/auth0-cta/auth0-cta.component"; import { getHomeDictionary, getJwtDictionary, @@ -126,6 +126,7 @@ export const HomePageComponent: React.FC = ({ }, ]} /> +

{homeDictionary.metadata.title}