feat(BOOK-450): Adjust Scandic logo in header when on a themed hotel page

Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx

@@ -4,6 +4,7 @@ import { notFound } from "next/navigation"
 import {
   DEFAULT_THEME,
   getThemeByHotel,
+  type Theme,
 } from "@scandic-hotels/common/utils/theme"
 import { setTheme } from "@scandic-hotels/common/utils/theme/serverContext"
 
@@ -49,21 +50,37 @@ export default async function HotelPagePage(
 
   if (searchParams.subpage) {
     return (
-      <div className={hotelTheme}>
+      <HotelPageWrapper hotelTheme={hotelTheme}>
         <HotelSubpage hotelData={hotelData} subpage={searchParams.subpage} />
-      </div>
+      </HotelPageWrapper>
     )
   } else if (searchParams.view === "map") {
     return (
-      <div className={hotelTheme}>
+      <HotelPageWrapper hotelTheme={hotelTheme}>
         <HotelMapPage hotelData={hotelData} />
-      </div>
+      </HotelPageWrapper>
     )
   } else {
     return (
-      <div className={cx(styles.hotelPage, hotelTheme)}>
+      <HotelPageWrapper className={styles.hotelPage} hotelTheme={hotelTheme}>
         <HotelPage hotelData={hotelData} hotelPageData={hotelPageData} />
-      </div>
+      </HotelPageWrapper>
     )
   }
 }
+
+function HotelPageWrapper({
+  className,
+  hotelTheme,
+  children,
+}: React.PropsWithChildren<{ className?: string; hotelTheme: Theme }>) {
+  return (
+    <div
+      className={cx(className, hotelTheme, {
+        ["themed-hotel-page"]: hotelTheme !== DEFAULT_THEME,
+      })}
+    >
+      {children}
+    </div>
+  )
+}

apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx

@@ -33,7 +33,11 @@ export function LogoLink() {
         defaultMessage: "Back to scandichotels.com",
       })}
     >
-      <ScandicLogoIcon width="103px" height="22px" />
+      <ScandicLogoIcon
+        className={styles.logoIcon}
+        width="103px"
+        height="22px"
+      />
     </NextLink>
   )
 }

apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css

@@ -2,3 +2,7 @@
   display: inline-flex;
   width: auto;
 }
+
+:global(body:has(.themed-hotel-page)) .logoIcon {
+  color: var(--Surface-UI-Fill-Intense);
+}