fix(BOOK-151): Added correct background color to all hotels section on destination overview page

Approved-by: Matilda Landström

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);
+  gap: var(--Space-x4);
-  padding: var(--Spacing-x5) 0 var(--Spacing-x7);
+  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);
   }
 }

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">
+      <Typography variant="Title/md">
-        {intl.formatMessage({
+        <h4 className={styles.heading}>
-          defaultMessage: "Explore all our hotels",
+          {intl.formatMessage({
-        })}
+            defaultMessage: "Explore all our hotels",
-      </Title>
+          })}
+        </h4>
+      </Typography>
       <DestinationsList destinations={destinations} />
     </section>
   )

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/destinationOverviewPage.module.css

@@ -15,37 +15,30 @@
 }
 
 .main {
-  display: grid;
+  padding: var(--Space-x7) 0 var(--Space-x9);
-  gap: var(--Spacing-x9);
-  padding: var(--Spacing-x7) 0 var(--Spacing-x9);
-  background-color: var(--Base-Surface-Primary-light-Normal);
 }
 
 .blocks {
   display: grid;
-  gap: var(--Spacing-x9);
+  gap: var(--Space-x9);
-  width: 100%;
+  width: var(--max-width-content);
-  max-width: var(--max-width-content);
   margin: 0 auto;
 }
 
 .hotelsAccordions {
-  width: 100%;
+  background-color: var(--Background-Primary);
-  max-width: var(--max-width-content);
-  margin: 0 auto;
 }
 
 .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);
+  background-color: var(--Base-Surface-Subtle-Normal);
-
-  align-items: center;
 
   .heading {
-    color: var(--Text-Interactive-Default);
+    color: var(--Text-Heading);
     text-align: center;
   }