fix(SW-2143): Fixed layout issues on destination pages, also fixed background colors

Approved-by: Matilda Landström

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/campaign_overview_page/[uid]/page.module.css

@@ -0,0 +1,3 @@
+.page {
+  background-color: var(--Background-Primary);
+}

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

@@ -6,14 +6,18 @@ import { env } from "@/env/server"
 import CampaignOverviewPage from "@/components/ContentType/CampaignOverviewPage"
 import CampaignOverviewPageSkeleton from "@/components/ContentType/CampaignOverviewPage/CampaignOverviewPageSkeleton"
 
+import styles from "./page.module.css"
+
 export default async function CampaignOverviewPagePage() {
   if (!env.CAMPAIGN_PAGES_ENABLED) {
     notFound()
   }
 
   return (
+    <div className={styles.page}>
       <Suspense fallback={<CampaignOverviewPageSkeleton />}>
         <CampaignOverviewPage />
       </Suspense>
+    </div>
   )
 }

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/campaign_page/[uid]/page.module.css

@@ -0,0 +1,3 @@
+.page {
+  background-color: var(--Background-Primary);
+}

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

@@ -6,6 +6,8 @@ import { env } from "@/env/server"
 import CampaignPage from "@/components/ContentType/CampaignPage"
 import CampaignPageSkeleton from "@/components/ContentType/CampaignPage/CampaignPageSkeleton"
 
+import styles from "./page.module.css"
+
 export { generateMetadata } from "@/utils/metadata/generateMetadata"
 
 export default async function CampaignPagePage() {
@@ -14,8 +16,10 @@ export default async function CampaignPagePage() {
   }
 
   return (
+    <div className={styles.page}>
       <Suspense fallback={<CampaignPageSkeleton />}>
         <CampaignPage />
       </Suspense>
+    </div>
   )
 }

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/collection_page/[uid]/page.module.css

@@ -0,0 +1,3 @@
+.page {
+  background-color: var(--Background-Primary);
+}

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

@@ -1,7 +1,13 @@
 import CollectionPage from "@/components/ContentType/StaticPages/CollectionPage"
 
+import styles from "./page.module.css"
+
 export { generateMetadata } from "@/utils/metadata/generateMetadata"
 
 export default function CollectionPagePage() {
-  return <CollectionPage />
+  return (
+    <div className={styles.page}>
+      <CollectionPage />
+    </div>
+  )
 }

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/content_page/[uid]/page.module.css

@@ -0,0 +1,3 @@
+.page {
+  background-color: var(--Background-Primary);
+}

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

@@ -8,6 +8,8 @@ import ContentPage from "@/components/ContentType/StaticPages/ContentPage"
 import { getLang } from "@/i18n/serverContext"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
 
+import styles from "./page.module.css"
+
 export { generateMetadata } from "@/utils/metadata/generateMetadata"
 
 export default async function ContentPagePage() {
@@ -24,5 +26,9 @@ export default async function ContentPagePage() {
     }
   }
 
-  return <ContentPage />
+  return (
+    <div className={styles.page}>
+      <ContentPage />
+    </div>
+  )
 }

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_city_page/[uid]/page.module.css

@@ -0,0 +1,3 @@
+.page {
+  background-color: var(--Background-Secondary);
+}

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

@@ -3,6 +3,8 @@ import { Suspense } from "react"
 import DestinationCityPage from "@/components/ContentType/DestinationPage/DestinationCityPage"
 import DestinationCityPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCityPage/DestinationCityPageSkeleton"
 
+import styles from "./page.module.css"
+
 import type { PageArgs } from "@/types/params"
 
 export { generateMetadata } from "@/utils/metadata/generateMetadata"
@@ -12,11 +14,13 @@ export default async function DestinationCityPagePage(
 ) {
   const searchParams = await props.searchParams
   return (
+    <div className={styles.page}>
       <Suspense fallback={<DestinationCityPageSkeleton />}>
         <DestinationCityPage
           isMapView={searchParams.view === "map"}
           filterFromUrl={searchParams.filterFromUrl}
         />
       </Suspense>
+    </div>
   )
 }

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_country_page/[uid]/page.module.css

@@ -0,0 +1,3 @@
+.page {
+  background-color: var(--Background-Secondary);
+}

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

@@ -3,15 +3,18 @@ import { Suspense } from "react"
 import DestinationCountryPage from "@/components/ContentType/DestinationPage/DestinationCountryPage"
 import DestinationCountryPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCountryPage/DestinationCountryPageSkeleton"
 
-import type { LangParams, PageArgs } from "@/types/params"
+import styles from "./page.module.css"
+
+import type { PageArgs } from "@/types/params"
 
 export { generateMetadata } from "@/utils/metadata/generateMetadata"
 
 export default async function DestinationCountryPagePage(
-  props: PageArgs<LangParams, { view?: "map"; filterFromUrl?: string }>
+  props: PageArgs<{}, { view?: "map"; filterFromUrl?: string }>
 ) {
   const searchParams = await props.searchParams
   return (
+    <div className={styles.page}>
       <Suspense fallback={<DestinationCountryPageSkeleton />}>
         <DestinationCountryPage
           // isMapView={searchParams.view === "map"} // Disabled until further notice
@@ -19,5 +22,6 @@ export default async function DestinationCountryPagePage(
           isMapView={false}
         />
       </Suspense>
+    </div>
   )
 }

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_overview_page/[uid]/page.module.css

@@ -0,0 +1,3 @@
+.page {
+  background-color: var(--Background-Secondary);
+}

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

@@ -1,9 +1,13 @@
 import DestinationOverviewPage from "@/components/ContentType/DestinationPage/DestinationOverviewPage"
 
-import type { LangParams, PageArgs } from "@/types/params"
+import styles from "./page.module.css"
 
 export { generateMetadata } from "@/utils/metadata/generateMetadata"
 
-export default function DestinationOverviewPagePage({}: PageArgs<LangParams>) {
+export default function DestinationOverviewPagePage() {
-  return <DestinationOverviewPage />
+  return (
+    <div className={styles.page}>
+      <DestinationOverviewPage />
+    </div>
+  )
 }

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

@@ -0,0 +1,3 @@
+.page {
+  background-color: var(--Background-Primary);
+}

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

@@ -6,6 +6,8 @@ import HotelMapPage from "@/components/ContentType/HotelMapPage"
 import HotelPage from "@/components/ContentType/HotelPage"
 import HotelSubpage from "@/components/ContentType/HotelSubpage"
 
+import styles from "./page.module.css"
+
 import type { PageArgs } from "@/types/params"
 
 export { generateMetadata } from "@/utils/metadata/generateMetadata"
@@ -31,5 +33,9 @@ export default async function HotelPagePage(
   if (searchParams.view === "map") {
     return <HotelMapPage hotelId={hotelPageData.hotel_page_id} />
   }
-  return <HotelPage hotelId={hotelPageData.hotel_page_id} />
+  return (
+    <div className={styles.page}>
+      <HotelPage hotelId={hotelPageData.hotel_page_id} />
+    </div>
+  )
 }

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.module.css

@@ -4,7 +4,3 @@
   grid-template-rows: auto 1fr;
   position: relative;
 }
-
-.container {
-  background-color: var(--Background-Primary);
-}

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

@@ -13,12 +13,10 @@ export default function ContentTypeLayout({
   }
 >) {
   return (
-    <div className={styles.container}>
     <section className={styles.layout}>
       {preview}
       {breadcrumbs}
       {children}
     </section>
-    </div>
   )
 }

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loyalty_page/[uid]/page.module.css

@@ -0,0 +1,3 @@
+.page {
+  background-color: var(--Background-Primary);
+}

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

@@ -1,7 +1,13 @@
 import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
 
+import styles from "./page.module.css"
+
 export { generateMetadata } from "@/utils/metadata/generateMetadata"
 
 export default function LoyaltyPagePage() {
-  return <LoyaltyPage />
+  return (
+    <div className={styles.page}>
+      <LoyaltyPage />
+    </div>
+  )
 }

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/start_page/[uid]/page.module.css

@@ -0,0 +1,3 @@
+.page {
+  background-color: var(--Background-Secondary);
+}

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

@@ -2,6 +2,8 @@ import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/uti
 
 import StartPage from "@/components/ContentType/StartPage"
 
+import styles from "./page.module.css"
+
 import type { NextSearchParams, PageArgs } from "@/types/params"
 
 export { generateMetadata } from "@/utils/metadata/generateMetadata"
@@ -12,5 +14,9 @@ export default async function StartPagePage(
   const searchParams = await props.searchParams
   const booking = parseBookingWidgetSearchParams(searchParams)
 
-  return <StartPage booking={booking} />
+  return (
+    <div className={styles.page}>
+      <StartPage booking={booking} />
+    </div>
+  )
 }

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css

@@ -6,19 +6,22 @@
     "sidebar"
     "mainContent";
   width: 100%;
-  gap: var(--Spacing-x4);
+  margin: 0 auto;
   max-width: var(--max-width);
 }
 
 .header {
   grid-area: header;
+  background-color: var(--Surface-Secondary-Default);
+  padding-bottom: var(--Space-x3);
 }
 
 .mainContent {
   grid-area: mainContent;
   display: grid;
-  gap: var(--Spacing-x6);
+  gap: var(--Space-x6);
-  padding-bottom: var(--Spacing-x7);
+  padding-top: var(--Space-x4);
+  padding-bottom: var(--Space-x7);
   max-width: var(--max-width-page);
   width: 100%;
   margin: 0 auto;
@@ -28,37 +31,32 @@
   grid-area: sidebar;
   width: 100%;
   height: 100%;
-  background-color: var(--Base-Surface-Subtle-Normal);
+  background-color: var(--Surface-Secondary-Default);
 }
 
 .experienceList {
   list-style: none;
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   flex-wrap: wrap;
 }
 
-@media screen and (min-width: 768px) {
-  .pageContainer {
-    margin: 0 auto;
-    gap: var(--Spacing-x4);
-  }
-}
-
 @media screen and (min-width: 1367px) {
   .pageContainer {
     grid-template-areas:
       "header sidebar"
       "mainContent sidebar";
     grid-template-columns: 1fr var(--map-desktop-width);
+    row-gap: var(--Space-x4);
   }
 
   .header {
-    padding-left: var(--max-width-single-spacing);
+    padding: 0 var(--max-width-single-spacing) var(--Space-x4);
+    background-color: var(--Background-Primary);
   }
 
   .mainContent {
-    gap: var(--Spacing-x9);
+    gap: var(--Space-x9);
-    padding-left: var(--max-width-single-spacing);
+    padding: 0 var(--max-width-single-spacing) var(--Space-x7);
   }
 }

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/destinationCountryPage.module.css

@@ -6,19 +6,22 @@
     "sidebar"
     "mainContent";
   width: 100%;
-  gap: var(--Spacing-x4);
+  margin: 0 auto;
   max-width: var(--max-width);
 }
 
 .header {
   grid-area: header;
+  background-color: var(--Surface-Secondary-Default);
+  padding-bottom: var(--Space-x3);
 }
 
 .mainContent {
   grid-area: mainContent;
   display: grid;
-  gap: var(--Spacing-x6);
+  gap: var(--Space-x6);
-  padding-bottom: var(--Spacing-x7);
+  padding-top: var(--Space-x4);
+  padding-bottom: var(--Space-x7);
   max-width: var(--max-width-page);
   width: 100%;
   margin: 0 auto;
@@ -28,14 +31,14 @@
   grid-area: sidebar;
   width: 100%;
   height: 100%;
-  background-color: var(--Base-Surface-Subtle-Normal);
+  background-color: var(--Surface-Secondary-Default);
 }
 
-@media screen and (min-width: 768px) {
+.experienceList {
-  .pageContainer {
+  list-style: none;
-    margin: 0 auto;
+  display: flex;
-    gap: var(--Spacing-x4);
+  gap: var(--Space-x1);
-  }
+  flex-wrap: wrap;
 }
 
 @media screen and (min-width: 1367px) {
@@ -44,14 +47,16 @@
       "header sidebar"
       "mainContent sidebar";
     grid-template-columns: 1fr var(--map-desktop-width);
+    row-gap: var(--Space-x4);
   }
 
   .header {
-    padding-left: var(--max-width-single-spacing);
+    padding: 0 var(--max-width-single-spacing) var(--Space-x4);
+    background-color: var(--Background-Primary);
   }
 
   .mainContent {
-    gap: var(--Spacing-x9);
+    gap: var(--Space-x9);
-    padding-left: var(--max-width-single-spacing);
+    padding: 0 var(--max-width-single-spacing) var(--Space-x7);
   }
 }

apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css

@@ -1,8 +1,8 @@
 .sidebarContent {
   display: grid;
   align-content: start;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
-  padding: var(--Spacing-x4);
+  padding: 0 var(--max-width-single-spacing) var(--Space-x3);
 }
 
 .heading {
@@ -13,10 +13,12 @@
 
 .text {
   color: var(--Text-Default);
+  max-width: var(--max-width-text-block);
 }
 
 @media screen and (min-width: 1367px) {
   .sidebarContent {
     position: sticky;
+    padding: var(--Space-x4) var(--Space-x3);
   }
 }

apps/scandic-web/components/ContentType/DestinationPage/StaticMap/index.tsx

@@ -48,7 +48,7 @@ export default async function DestinationStaticMap({
         country={country}
         city={city}
         coordinates={coordinates}
-        width={320}
+        width={332}
         height={200}
         zoomLevel={getZoomLevel(location?.default_zoom, !!country)}
         altText={altText}

apps/scandic-web/components/ContentType/DestinationPage/StaticMap/staticMap.module.css

@@ -5,9 +5,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-}
-
-.mapWrapper {
   border-radius: var(--Corner-radius-md);
   overflow: hidden;
 }

apps/scandic-web/components/ContentType/StartPage/index.tsx

@@ -28,7 +28,7 @@ export default async function StartPage({
   const lang = await getLang()
 
   return (
-    <div className={styles.background}>
+    <>
       <header className={styles.header}>
         <div className={styles.headerContent}>
           {header.heading.length ? (
@@ -72,6 +72,6 @@ export default async function StartPage({
         })}
       </main>
       <TrackingSDK pageData={content.tracking} />
-    </div>
+    </>
   )
 }

apps/scandic-web/components/ContentType/StartPage/startPage.module.css

@@ -1,7 +1,3 @@
-.background {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-}
-
 .header {
   height: 560px;
   position: relative;
@@ -42,41 +38,10 @@
   max-width: 100%;
 }
 
-.fauxBookingWidget {
-  height: 84px;
-  width: 100%;
-}
-
-.floatingBookingWidgetContainer {
-  height: 0px;
-  width: 100vw;
-  display: flex;
-  justify-content: center;
-  background-color: green;
-}
-
-.floatingBookingWidget {
-  background: pink;
-  transform: translateY(-155px);
-  height: fit-content;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-
-  &[data-intersecting="true"] {
-    background: white;
-  }
-
-  & > * {
-    max-width: 100%;
-  }
-}
-
 .main {
   display: grid;
   gap: var(--Spacing-x6);
   padding: calc(var(--Spacing-x5) * 2) 0 calc(var(--Spacing-x5) * 4);
-  background-color: var(--Base-Surface-Primary-light-Normal);
 }
 
 .section:empty {