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

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>