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
This commit is contained in:
28
components/HotelReservation/MyStay/Header/header.module.css
Normal file
28
components/HotelReservation/MyStay/Header/header.module.css
Normal file
@@ -0,0 +1,28 @@
|
||||
header .title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--Spacing-x6);
|
||||
margin-top: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.title .hotelName {
|
||||
font-family: var(--typography-Title-3-fontFamily);
|
||||
font-size: var(--typography-Title-3-fontSize);
|
||||
font-weight: var(--typography-Title-3-fontWeight);
|
||||
letter-spacing: var(--typography-Title-3-letterSpacing);
|
||||
line-height: var(--typography-Title-3-lineHeight);
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.title .hotelName {
|
||||
font-family: var(--typography-Title-1-fontFamily);
|
||||
font-size: var(--typography-Title-1-fontSize);
|
||||
font-weight: var(--typography-Title-1-fontWeight);
|
||||
letter-spacing: var(--typography-Title-1-letterSpacing);
|
||||
line-height: var(--typography-Title-1-lineHeight);
|
||||
}
|
||||
}
|
||||
22
components/HotelReservation/MyStay/Header/index.tsx
Normal file
22
components/HotelReservation/MyStay/Header/index.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user