From b2ca2c261293ad746af6d44364c6c2195320cf26 Mon Sep 17 00:00:00 2001
From: Matilda Haneling <matilda.haneling@scandichotels.com>
Date: Mon, 12 Jan 2026 11:44:48 +0000
Subject: [PATCH] Merged in fix/book-692-change-city-page-bg-color (pull
 request #3390)

fix(BOOK-692): changed background color on text section on destination city page

* fix(BOOK-692): changed background color on text section on destination city page

* removed duplicate padding-top

* fix(BOOK-692): fixed mobile padding

* removed margin

* fix(BOOK-692): added to destination country page and added conditional check


Approved-by: Erik Tiekstra
---
 .../destinationCityPage.module.css            | 20 ++++++++++++----
 .../DestinationCityPage/index.tsx             | 14 ++++++++---
 .../destinationCountryPage.module.css         | 23 +++++++++++++++----
 .../DestinationCountryPage/index.tsx          | 14 ++++++++---
 .../SeoFilters/seoFilters.module.css          |  4 ++++
 5 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css
index 1f6e7b885..97156c3b4 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css
@@ -20,11 +20,22 @@
   grid-area: mainContent;
   display: grid;
   gap: var(--Space-x6);
-  padding-top: var(--Space-x4);
-  padding-bottom: var(--Space-x7);
-  max-width: var(--max-width-page);
   width: 100%;
   margin: 0 auto;
+  padding-top: var(--Space-x4);
+}
+.textSection {
+  display: grid;
+  width: 100%;
+  background-color: var(--Background-Primary);
+  padding: var(--Space-x7) var(--max-width-single-spacing);
+  gap: var(--Space-x6);
+}
+.listingContent {
+  padding: 0 var(--max-width-single-spacing);
+}
+.listingContent:last-child {
+  margin-bottom: var(--Space-x4);
 }
 
 .sidebar {
@@ -57,6 +68,7 @@
 
   .mainContent {
     gap: var(--Space-x9);
-    padding: 0 var(--max-width-single-spacing) var(--Space-x7);
+    max-width: var(--max-width-page);
+    padding-top: 0;
   }
 }
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
index a78a70d57..bb2492f12 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
@@ -125,9 +125,17 @@ export default async function DestinationCityPage({
                 ) : null}
               </div>
               <main className={styles.mainContent}>
-                <HotelListing />
-                <Blocks blocks={blocks || []} />
-                <SeoFilters seoFilters={seo_filters} />
+                <div className={styles.listingContent}>
+                  <HotelListing />
+                </div>
+                {blocks?.length ||
+                seo_filters.facilityFilters?.length ||
+                seo_filters.surroundingsFilters?.length ? (
+                  <div className={styles.textSection}>
+                    <Blocks blocks={blocks || []} />
+                    <SeoFilters seoFilters={seo_filters} />
+                  </div>
+                ) : null}
               </main>
               <aside className={styles.sidebar}>
                 <SidebarContentWrapper
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/destinationCountryPage.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/destinationCountryPage.module.css
index 1f6e7b885..517692c95 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/destinationCountryPage.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/destinationCountryPage.module.css
@@ -20,11 +20,25 @@
   grid-area: mainContent;
   display: grid;
   gap: var(--Space-x6);
-  padding-top: var(--Space-x4);
-  padding-bottom: var(--Space-x7);
-  max-width: var(--max-width-page);
   width: 100%;
   margin: 0 auto;
+  padding-top: var(--Space-x4);
+}
+
+.listingContent {
+  padding: 0 var(--max-width-single-spacing);
+}
+
+.listingContent:last-child {
+  margin-bottom: var(--Space-x4);
+}
+
+.textSection {
+  display: grid;
+  width: 100%;
+  background-color: var(--Background-Primary);
+  padding: var(--Space-x7) var(--max-width-single-spacing);
+  gap: var(--Space-x6);
 }
 
 .sidebar {
@@ -57,6 +71,7 @@
 
   .mainContent {
     gap: var(--Space-x9);
-    padding: 0 var(--max-width-single-spacing) var(--Space-x7);
+    max-width: var(--max-width-page);
+    padding-top: 0;
   }
 }
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
index 6a8864e0d..454fbe7a4 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
@@ -140,9 +140,17 @@ export default async function DestinationCountryPage({
                 ) : null}
               </div>
               <main className={styles.mainContent}>
-                <CityListing />
-                <Blocks blocks={blocks || []} />
-                <SeoFilters seoFilters={seo_filters} />
+                <div className={styles.listingContent}>
+                  <CityListing />
+                </div>
+                {blocks?.length ||
+                seo_filters.facilityFilters?.length ||
+                seo_filters.surroundingsFilters?.length ? (
+                  <div className={styles.textSection}>
+                    <Blocks blocks={blocks || []} />
+                    <SeoFilters seoFilters={seo_filters} />
+                  </div>
+                ) : null}
               </main>
               <aside className={styles.sidebar}>
                 <SidebarContentWrapper
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/seoFilters.module.css b/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/seoFilters.module.css
index 2a4a9fd65..bfed64dd5 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/seoFilters.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/seoFilters.module.css
@@ -3,6 +3,10 @@
   gap: var(--Space-x4);
 }
 
+.accordion {
+  background-color: white;
+}
+
 .heading {
   color: var(--Text-Heading);
 }