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 (
-    <Suspense fallback={<CampaignOverviewPageSkeleton />}>
-      <CampaignOverviewPage />
-    </Suspense>
+    <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 (
-    <Suspense fallback={<CampaignPageSkeleton />}>
-      <CampaignPage />
-    </Suspense>
+    <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 (
-    <Suspense fallback={<DestinationCityPageSkeleton />}>
-      <DestinationCityPage
-        isMapView={searchParams.view === "map"}
-        filterFromUrl={searchParams.filterFromUrl}
-      />
-    </Suspense>
+    <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,21 +3,25 @@ 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 (
-    <Suspense fallback={<DestinationCountryPageSkeleton />}>
-      <DestinationCountryPage
-        // isMapView={searchParams.view === "map"} // Disabled until further notice
-        filterFromUrl={searchParams.filterFromUrl}
-        isMapView={false}
-      />
-    </Suspense>
+    <div className={styles.page}>
+      <Suspense fallback={<DestinationCountryPageSkeleton />}>
+        <DestinationCountryPage
+          // isMapView={searchParams.view === "map"} // Disabled until further notice
+          filterFromUrl={searchParams.filterFromUrl}
+          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>) {
-  return <DestinationOverviewPage />
+export default function DestinationOverviewPagePage() {
+  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>
+    <section className={styles.layout}>
+      {preview}
+      {breadcrumbs}
+      {children}
+    </section>
   )
 }

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