Merged in feat/SW-1276-implement-design (pull request #1348)

Feat/SW-1276 implement design

* feat(SW-1276) UI implementation Desktop part 1 for MyStay

* feat(SW-1276) UI implementation Desktop part 2 for MyStay

* feat(SW-1276) UI implementation Mobile part 1 for MyStay

* refactor: move files from MyStay/MyStay to MyStay

* feat(SW-1276) Sidepeek implementation

* feat(SW-1276): Refactoring

* feat(SW-1276) UI implementation Mobile part 2 for MyStay

* feat(SW-1276): translations

* feat(SW-1276) fixed skeleton

* feat(SW-1276): Added missing translations

* feat(SW-1276): Removed console log

* feat(SW-1276) fixed translations

* feat(SW-1276): Added translations

* feat(SW-1276) fix dynamic ID:s

* feat(SW-1276) removed createElement

* feat(SW-1276): Fixed build errors

* feat(SW-1276): Updated label

* feat(SW-1276): Rewrite SummaryCard


Approved-by: Niclas Edenvin

components/HotelReservation/MyStay/Header/index.tsx

@@ -0,0 +1,22 @@
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./header.module.css"
+
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+export async function Header({ hotel }: Pick<BookingConfirmation, "hotel">) {
+  const intl = await getIntl()
+  return (
+    <header>
+      <Title as="h2" color="white" className={styles.title} textAlign="center">
+        <BiroScript type="two" tilted="medium">
+          {intl.formatMessage({ id: "My stay at" })}{" "}
+        </BiroScript>
+        <span className={styles.hotelName}>{hotel.name}</span>
+        {hotel.cityName}
+      </Title>
+    </header>
+  )
+}