From 136610a51a30f9e54a0d4b0ac99b3d91b64f2cd8 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 11 Sep 2025 08:41:17 +0000
Subject: [PATCH] fix(BOOK-151): Added correct background color to all hotels
 section on destination overview page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Matilda Landström
---
 .../HotelsSection/hotelsSection.module.css    | 12 ++++++++---
 .../HotelsSection/index.tsx                   | 14 +++++++------
 .../destinationOverviewPage.module.css        | 21 +++++++------------
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/hotelsSection.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/hotelsSection.module.css
index e12c4ff92..4b767ef2d 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/hotelsSection.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/hotelsSection.module.css
@@ -1,11 +1,17 @@
 .container {
+  width: var(--max-width-content);
+  margin: 0 auto;
   display: grid;
-  gap: var(--Spacing-x4);
-  padding: var(--Spacing-x5) 0 var(--Spacing-x7);
+  gap: var(--Space-x4);
+  padding: var(--Space-x5) 0 var(--Space-x7);
+}
+
+.heading {
+  color: var(--Text-Heading);
 }
 
 @media screen and (min-width: 768px) {
   .container {
-    gap: var(--Spacing-x7);
+    gap: var(--Space-x7);
   }
 }
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/index.tsx
index 8a9ce28a0..43c523d90 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/index.tsx
@@ -1,4 +1,4 @@
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getDestinationsList } from "@/lib/trpc/memoizedRequests"
 
@@ -18,11 +18,13 @@ export default async function HotelsSection() {
 
   return (
     <section className={styles.container}>
-      <Title level="h4" as="h2" textAlign="center">
-        {intl.formatMessage({
-          defaultMessage: "Explore all our hotels",
-        })}
-      </Title>
+      <Typography variant="Title/md">
+        <h4 className={styles.heading}>
+          {intl.formatMessage({
+            defaultMessage: "Explore all our hotels",
+          })}
+        </h4>
+      </Typography>
       <DestinationsList destinations={destinations} />
     </section>
   )
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/destinationOverviewPage.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/destinationOverviewPage.module.css
index 0394afa53..bf1eaa6e0 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/destinationOverviewPage.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/destinationOverviewPage.module.css
@@ -15,37 +15,30 @@
 }
 
 .main {
-  display: grid;
-  gap: var(--Spacing-x9);
-  padding: var(--Spacing-x7) 0 var(--Spacing-x9);
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  padding: var(--Space-x7) 0 var(--Space-x9);
 }
 
 .blocks {
   display: grid;
-  gap: var(--Spacing-x9);
-  width: 100%;
-  max-width: var(--max-width-content);
+  gap: var(--Space-x9);
+  width: var(--max-width-content);
   margin: 0 auto;
 }
 
 .hotelsAccordions {
-  width: 100%;
-  max-width: var(--max-width-content);
-  margin: 0 auto;
+  background-color: var(--Background-Primary);
 }
 
 .headerContainer {
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: var(--Space-x4);
   padding: var(--Space-x4) var(--Space-x2);
-  background: var(--Surface-Secondary-Default);
-
-  align-items: center;
+  background-color: var(--Base-Surface-Subtle-Normal);
 
   .heading {
-    color: var(--Text-Interactive-Default);
+    color: var(--Text-Heading);
     text-align: center;
   }