From 44e648e7585145bcd59944f1b44a0b8218adfe65 Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Wed, 28 May 2025 12:19:11 +0000
Subject: [PATCH] Merged in fix/SW-2292-new-hotel-header (pull request #2253)

fix(SW-2292): new design for hotel header on enter details

* fix(SW-2292): new design for hotel header on enter details


Approved-by: Michael Zetterberg
---
 .../EnterDetails/Header/ToggleSidePeek.tsx    |  2 +-
 .../EnterDetails/Header/header.module.css     | 19 +++++-----
 .../EnterDetails/Header/index.tsx             | 35 +++++++------------
 3 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx
index d6330b703..ba48deaa4 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx
@@ -18,7 +18,7 @@ export default function ToggleSidePeek({ hotelId }: ToggleSidePeekProps) {
     <Button
       onPress={() => openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })}
       size="Small"
-      variant="Text"
+      variant="Secondary"
       color="Inverted"
       wrapping
       typography="Body/Paragraph/mdBold"
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css
index ae46f3407..b7dd82550 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css
@@ -28,10 +28,10 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
   max-width: var(--max-width-page);
-  gap: var(--Space-x05);
-  padding: var(--Space-x3) 0;
+  gap: var(--Space-x2);
+  padding: var(--Space-x3) 0 var(--Space-x4);
   margin: 0 auto;
 }
 
@@ -59,22 +59,21 @@
 }
 
 .address {
-  display: none;
-  flex-wrap: wrap;
-  column-gap: var(--Space-x15);
-  font-style: normal;
+  text-align: center;
+  color: var(--Text-Inverted);
 }
 
 @media (min-width: 768px) {
-  .address {
-    display: flex;
-  }
   .container {
     padding: var(--Space-x3) 0;
+    gap: var(--Space-x3);
   }
   .mobileTitle {
     display: none;
   }
+  .titleContainer {
+    gap: var(--Space-x1);
+  }
   .title {
     display: -webkit-box;
   }
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx
index 1f2f572f7..8af4de580 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx
@@ -1,8 +1,7 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import Image from "@/components/Image"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
-import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import ToggleSidePeek from "./ToggleSidePeek"
 
@@ -13,7 +12,6 @@ import type { HotelHeaderProps } from "@/types/components/hotelReservation/enter
 export default async function HotelHeader({
   hotelData: { hotel },
 }: HotelHeaderProps) {
-  const intl = await getIntl()
   const image = hotel.hotelContent?.images
 
   const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`
@@ -30,7 +28,13 @@ export default async function HotelHeader({
       <div className={styles.wrapper}>
         <div className={styles.container}>
           <div className={styles.titleContainer}>
-            <Title as="h1" level="h1" color="white" className={styles.title}>
+            <Title
+              as="h1"
+              level="h1"
+              color="white"
+              textAlign="center"
+              className={styles.title}
+            >
               {hotel.name}
             </Title>
             <Title
@@ -38,26 +42,13 @@ export default async function HotelHeader({
               level="h1"
               color="white"
               className={styles.mobileTitle}
+              textAlign="center"
             >
               {hotel.name}
             </Title>
-            <div className={styles.address}>
-              <Caption color="white">{addressStr}</Caption>
-              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-              <Caption color="white">∙</Caption>
-              <Caption color="white">
-                {intl.formatMessage(
-                  {
-                    defaultMessage: "{number} km to city center",
-                  },
-                  {
-                    number: getSingleDecimal(
-                      hotel.location.distanceToCentre / 1000
-                    ),
-                  }
-                )}
-              </Caption>
-            </div>
+            <Typography variant="Title/Overline/sm">
+              <div className={styles.address}>{addressStr}</div>
+            </Typography>
           </div>
           <ToggleSidePeek hotelId={hotel.operaId} />
         </div>