scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-243): implement mobile design

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-19 14:37:17 +02:00
parent 8dae837ef2
commit bdafef492f
9 changed files with 257 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css Normal file
View File

@@ -0,0 +1,19 @@
.section {
display: flex;
justify-content: space-between;
padding: var(--Spacing-x2);
border-radius: var(--Corner-radius-Small);
background-color: var(--Base-Surface-Primary-dark-Normal);
width: 100%;
max-width: 365px;
}
.breakfast,
.checkIn,
.checkOut {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
}

29
components/HotelReservation/BookingConfirmation/ConfirmationTimes/index.tsx Normal file
View File

@@ -0,0 +1,29 @@
import React from "react"
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import styles from "./confirmationTimes.module.css"
export default async function ConfirmationTimes() {
const intl = await getIntl()
return (
<section className={styles.section}>
<div className={styles.breakfast}>
<Body color="burgundy">{intl.formatMessage({ id: "Breakfast" })}</Body>
<span>Mon-Fri 06:30-10:00</span>
<span>Mon-Fri 06:30-10:00</span>
</div>
<div className={styles.checkIn}>
<Body color="burgundy">{intl.formatMessage({ id: "Check in" })}</Body>
<span>From</span>
<span>15:00</span>
</div>
<div className={styles.checkOut}>
<Body color="burgundy">{intl.formatMessage({ id: "Check out" })}</Body>
<span>At latest</span>
<span>12:00</span>
</div>
</section>
)
}