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

packages/design-system/lib/components/Icons/Logos/ScandicLogo.tsx

@@ -1,5 +1,8 @@
+import { cx } from 'class-variance-authority'
 import type { LogoProps } from '../icon'
 
+import styles from './logo.module.css'
+
 export default function ScandicLogoIcon({
   className = '',
   height = 14,
@@ -8,7 +11,7 @@ export default function ScandicLogoIcon({
 }: LogoProps) {
   return (
     <svg
-      className={className}
+      className={cx(styles.scandicLogo, className)}
       width={width}
       height={height}
       viewBox="0 0 58 14"
@@ -20,41 +23,41 @@ export default function ScandicLogoIcon({
         fillRule="evenodd"
         clipRule="evenodd"
         d="M16.9227 12.9571C16.1038 13.1614 15.285 13.2295 14.4661 13.2295C11.532 13.2295 9.62134 11.8679 9.62134 8.66813C9.62134 5.60455 11.6002 4.31104 14.3979 4.31104C15.2167 4.31104 16.0356 4.37911 16.8544 4.51527V6.01303C16.2403 5.94495 15.7626 5.87687 15.2167 5.87687C12.9649 5.87687 11.8731 6.55766 11.8731 8.80429C11.8731 10.9148 12.8967 11.6636 15.2167 11.6636C15.8309 11.6636 16.3085 11.5956 16.8544 11.5275V12.9571H16.9227Z"
-        fill="#CD0921"
+        fill="CurrentColor"
       />
       <path
         d="M47.1499 13.0248H49.3335V4.44681H47.1499V13.0248ZM47.1499 2.74482H49.3335V0.770508H47.1499V2.74482Z"
-        fill="#CD0921"
+        fill="CurrentColor"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M45.3765 12.8206C44.9671 12.8887 43.4659 13.161 41.9647 13.161C39.167 13.161 37.1199 11.8675 37.1199 8.73583C37.1199 5.74032 38.9623 4.24257 41.76 4.24257C42.1694 4.24257 42.8518 4.31065 43.1929 4.31065V0.770508H45.3765C45.3765 1.17899 45.3765 12.6164 45.3765 12.8206ZM43.2612 11.5271V5.94456C42.9882 5.94456 42.5106 5.87648 42.0329 5.87648C40.054 5.87648 39.3034 6.8296 39.3034 8.80391C39.3034 10.574 39.9858 11.6633 41.9647 11.6633C42.3741 11.6633 42.7835 11.5952 43.2612 11.5271Z"
-        fill="#CD0921"
+        fill="CurrentColor"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M35.6873 13.0252H33.572V7.37462C33.572 6.4215 33.1625 5.87687 31.7978 5.87687C30.8425 5.87687 29.819 6.08111 29.819 6.08111V13.0252H27.7036V4.71951C27.8401 4.71951 30.5696 4.31104 32.139 4.31104C34.0496 4.31104 35.7555 4.65143 35.7555 7.23846V13.0252H35.6873Z"
-        fill="#CD0921"
+        fill="CurrentColor"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M25.9296 13.0245C24.4284 13.1606 23.2684 13.2287 21.9719 13.2287C19.7883 13.2287 18.0142 12.8883 18.0142 10.4374C18.0142 8.05465 20.1977 7.91849 22.1766 7.85041C22.6543 7.85041 23.2001 7.85041 23.746 7.85041C23.746 6.35266 23.6778 5.80802 21.4942 5.80802C20.4024 5.80802 19.2424 6.01226 18.5601 6.14842V4.58259C19.3789 4.37835 20.6754 4.31027 21.6307 4.24219C24.0872 4.24219 25.9296 4.51451 25.9296 7.10153V13.0245ZM23.746 11.7309V9.28008C23.3366 9.28008 22.586 9.28008 22.3131 9.28008C21.0166 9.28008 20.1977 9.34816 20.1977 10.5736C20.1977 11.799 21.2213 11.8671 22.2448 11.8671C22.859 11.799 23.2001 11.799 23.746 11.7309Z"
-        fill="#CD0921"
+        fill="CurrentColor"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M58.0001 12.9571C57.1812 13.1614 56.3624 13.2295 55.5435 13.2295C52.6094 13.2295 50.6987 11.8679 50.6987 8.66813C50.6987 5.60455 52.6776 4.31104 55.4753 4.31104C56.2941 4.31104 57.113 4.37911 57.9318 4.51527V6.01303C57.3177 5.94495 56.84 5.87687 56.2941 5.87687C54.0423 5.87687 52.9505 6.55766 52.9505 8.80429C52.9505 10.9148 53.9741 11.6636 56.2941 11.6636C56.9083 11.6636 57.3859 11.5956 57.9318 11.5275V12.9571H58.0001Z"
-        fill="#CD0921"
+        fill="CurrentColor"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M8.52959 9.61951C8.52959 12.1385 6.55072 13.2277 3.61655 13.2277C1.70592 13.2277 0.341184 12.8873 0.136473 12.8193V11.0492C0.81884 11.1853 2.25181 11.5257 3.48007 11.5257C4.70833 11.5257 6.27778 11.2534 6.27778 9.89183C6.27778 9.00679 5.59541 8.6664 4.36715 8.326C3.88949 8.18984 3.41184 8.05368 2.93418 7.91752C1.2965 7.44096 0 6.76016 0 4.85393C0 2.13075 2.18357 1.44995 4.70833 1.44995C6.20954 1.44995 7.4378 1.72227 7.64251 1.79035V3.42426C7.36956 3.35618 6.20954 3.08386 4.91304 3.08386C3.68478 3.08386 2.25181 3.22002 2.25181 4.58162C2.25181 5.60281 3.07065 5.87513 4.23068 6.14745C4.77657 6.35169 5.32246 6.41977 5.86836 6.62401C7.30133 7.03248 8.52959 7.71328 8.52959 9.61951Z"
-        fill="#CD0921"
+        fill="CurrentColor"
       />
     </svg>
   )

packages/design-system/lib/components/Icons/Logos/logo.module.css

@@ -0,0 +1,3 @@
+.scandicLogo {
+  color: var(--Surface-Brand-Primary-2-Default);
+}