Launch fixes

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<RibbonComponentProps> = ({
-  themeCode,
-  languageCode,
   dictionary,
 }) => {
-  const theme$ = useAppStore((state) => state.theme$);
-
-  const sanitizedThemePickerCodeValue = useMemo(() => {
-    return getSanitizedThemePickerCodeValue(themeCode);
-  }, [themeCode]);
-
-  const [currentTheme, setCurrentTheme] = useState<ThemeModel>(
-    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) ? (
-              <SystemIconComponent />
-            ) : isLightThemePreference(option.code) ? (
-              <LightIconComponent />
-            ) : (
-              <DarkIconComponent />
-            ),
-          },
-          compact: {
-            ...option,
-            label: null,
-            icon: isSystemThemePreference(option.code) ? (
-              <SystemIconComponent />
-            ) : isLightThemePreference(option.code) ? (
-              <LightIconComponent />
-            ) : (
-              <DarkIconComponent />
-            ),
-          },
-        };
-      }),
-    [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 (
-    <>
-      <BoxComponent
-        contentAs="section"
-        containerClassName={styles.container}
-        wrapperClassName={styles.wrapper}
-        contentClassName={styles.content}
-        aria-label="Page options"
-      >
+
         <div className={styles.cta}>
           <span className={styles.cta__title}>{dictionary.cta.title}</span>
           <Link
@@ -156,30 +48,5 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
             </div>
           </Link>
         </div>
-        <div className={styles.actions}>
-          <RibbonPickerComponent<ThemePickerCodeValues>
-            label={null}
-            compactLabel={null}
-            icon={
-              isSystemThemePreference(currentTheme.code) ? (
-                <SystemIconComponent />
-              ) : isLightThemePreference(currentTheme.code) ? (
-                <LightIconComponent />
-              ) : (
-                <DarkIconComponent />
-              )
-            }
-            languageCode={languageCode}
-            selectedOptionCode={currentTheme.code}
-            handleSelection={handleThemeSelection}
-            options={themeOptions}
-            aria={{
-              buttonLabel: dictionary.themePicker.button.ariaLabel,
-              listLabel: dictionary.themePicker.list.ariaLabel,
-            }}
-          />
-        </div>
-      </BoxComponent>
-    </>
   );
 };

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;
-  }
-}

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<HeaderComponentProps> = ({
           ),
         };
       }),
-    [dictionary.ribbon.themePicker.options]
+    [dictionary.ribbon.themePicker.options],
   );
 
   const sanitizedThemePickerCodeValue = useMemo(() => {
@@ -76,22 +77,22 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
     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<HeaderComponentProps> = ({
       contentClassName={styles.content}
       aria-label="Main navigation"
     >
-      <div className={styles.brand}>
-        <SiteBrandComponent
-          path={languagePathPrefix}
-          languageCode={languageCode}
-        />
+      <div className={styles.ribbonContainer}>
+        <RibbonComponent dictionary={dictionary.ribbon} />
       </div>
-      <div className={styles.navContainer}>
-        <div className={styles.navTabs}>
-          <ul className={styles.navList}>
-            {dictionary.header.links.map((link) => {
-              const linkPath =
-                languageCode === DEFAULT_LANGUAGE_CODE || link.isExternal
-                  ? link.path
-                  : createUrlPath([languagePathPrefix, link.path]);
+      <div className={styles.outerNavContainer}>
+        <div className={styles.brand}>
+          <SiteBrandComponent
+            path={languagePathPrefix}
+            languageCode={languageCode}
+          />
+        </div>
+        <div className={styles.navContainer}>
+          <div className={styles.navTabs}>
+            <ul className={styles.navList}>
+              {dictionary.header.links.map((link) => {
+                const linkPath =
+                  languageCode === DEFAULT_LANGUAGE_CODE || link.isExternal
+                    ? link.path
+                    : createUrlPath([languagePathPrefix, link.path]);
 
-              return (
-                <li
-                  className={styles.navList__item}
-                  key={link.label}
-                  data-active={topSegmentPath === link.path}
-                >
-                  <Link
-                    {...(link.isExternal
-                      ? { target: "_blank", rel: "noopener noreferrer" }
-                      : {})}
-                    href={linkPath}
+                return (
+                  <li
+                    className={styles.navList__item}
+                    key={link.label}
+                    data-active={topSegmentPath === link.path}
                   >
-                    {link.label}
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
+                    <Link
+                      {...(link.isExternal
+                        ? { target: "_blank", rel: "noopener noreferrer" }
+                        : {})}
+                      href={linkPath}
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+        <div className={styles.actions}>
+          <ThemePickerComponent
+            options={themeOptions}
+            handleSelection={handleThemeSelection}
+            selectedOptionCode={currentTheme.code}
+          />
         </div>
-      </div>
-      <div className={styles.actions}>
-        <ThemePickerComponent
-          options={themeOptions}
-          handleSelection={handleThemeSelection}
-          selectedOptionCode={currentTheme.code}
-        />
       </div>
     </BoxComponent>
   );

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;