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

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

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 />
+                <div className={styles.listingContent}>
-                <Blocks blocks={blocks || []} />
+                  <HotelListing />
-                <SeoFilters seoFilters={seo_filters} />
+                </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

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

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 />
+                <div className={styles.listingContent}>
-                <Blocks blocks={blocks || []} />
+                  <CityListing />
-                <SeoFilters seoFilters={seo_filters} />
+                </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

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