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

feat(SW-243): css refactoring

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-21 09:57:04 +02:00
parent 95c8fd1950
commit 13d113169c
5 changed files with 33 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
View File

@@ -7,7 +7,7 @@ import styles from "./page.module.css"
import { BookingConfirmation } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation" import { BookingConfirmation } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
export default function BookingConfirmationPage() { export default function BookingConfirmationPage() {
const confirmationData: BookingConfirmation = { const tempConfirmationData: BookingConfirmation = {
email: "lisa.andersson@outlook.com", email: "lisa.andersson@outlook.com",
hotel: { hotel: {
name: "Helsinki Hub", name: "Helsinki Hub",
@@ -36,12 +36,12 @@ export default function BookingConfirmationPage() {
return ( return (
<main className={styles.main}> <main className={styles.main}>
<section className={styles.section}> <section className={styles.section}>
<IntroSection email={confirmationData.email} /> <IntroSection email={tempConfirmationData.email} />
<StaySection <StaySection
hotel={confirmationData.hotel} hotel={tempConfirmationData.hotel}
stay={confirmationData.stay} stay={tempConfirmationData.stay}
/> />
<SummarySection summary={confirmationData.summary} /> <SummarySection summary={tempConfirmationData.summary} />
</section> </section>
</main> </main>
) )

5
components/HotelReservation/BookingConfirmation/StaySection/index.tsx
View File

@@ -11,6 +11,7 @@ import { StaySectionProps } from "@/types/components/hotelReservation/bookingCon
export default async function StaySection({ hotel, stay }: StaySectionProps) { export default async function StaySection({ hotel, stay }: StaySectionProps) {
const intl = await getIntl() const intl = await getIntl()
const nights = const nights =
stay.nights > 1 stay.nights > 1
? intl.formatMessage({ id: "nights" }) ? intl.formatMessage({ id: "nights" })
@@ -19,7 +20,6 @@ export default async function StaySection({ hotel, stay }: StaySectionProps) {
return ( return (
<> <>
<section className={styles.card}> <section className={styles.card}>
<div>
<Image <Image
src={hotel.image} src={hotel.image}
alt="" alt=""
@@ -27,7 +27,6 @@ export default async function StaySection({ hotel, stay }: StaySectionProps) {
width={200} width={200}
className={styles.image} className={styles.image}
/> />
</div>
<div className={styles.info}> <div className={styles.info}>
<div className={styles.hotel}> <div className={styles.hotel}>
<ScandicLogoIcon color="red" /> <ScandicLogoIcon color="red" />
@@ -39,7 +38,6 @@ export default async function StaySection({ hotel, stay }: StaySectionProps) {
<span>{hotel.phone}</span> <span>{hotel.phone}</span>
</Caption> </Caption>
</div> </div>
<div className={styles.width}>
<Body className={styles.stay}> <Body className={styles.stay}>
<span>{`${stay.nights} ${nights}`}</span> <span>{`${stay.nights} ${nights}`}</span>
<span className={styles.dates}> <span className={styles.dates}>
@@ -49,7 +47,6 @@ export default async function StaySection({ hotel, stay }: StaySectionProps) {
</span> </span>
</Body> </Body>
</div> </div>
</div>
</section> </section>
<section className={styles.table}> <section className={styles.table}>
<div className={styles.breakfast}> <div className={styles.breakfast}>

3
components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
View File

@@ -2,6 +2,7 @@
display: flex; display: flex;
width: 100%; width: 100%;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Small); border-radius: var(--Corner-radius-Small);
overflow: hidden; overflow: hidden;
} }
@@ -71,7 +72,7 @@
} }
.hotel, .hotel,
.width { .stay {
width: 100%; width: 100%;
max-width: 230px; max-width: 230px;
} }

18
components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
View File

@@ -1,3 +1,4 @@
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
@@ -7,27 +8,28 @@ import { SummarySectionProps } from "@/types/components/hotelReservation/booking
export default async function SummarySection({ summary }: SummarySectionProps) { export default async function SummarySection({ summary }: SummarySectionProps) {
const intl = await getIntl() const intl = await getIntl()
return ( return (
<section className={styles.section}> <section className={styles.section}>
<Title as="h4" textAlign="center"> <Title as="h4" textAlign="center">
{intl.formatMessage({ id: "Summary" })} {intl.formatMessage({ id: "Summary" })}
</Title> </Title>
<div className={styles.summary}> <Caption className={styles.summary}>
<span>{`Type of room: ${summary.roomType}`}</span> <span>{`Type of room: ${summary.roomType}`}</span>
<span>1648 SEK</span> <span>1648 SEK</span>
</div> </Caption>
<div className={styles.summary}> <Caption className={styles.summary}>
<span>{`Type of bed: ${summary.bedType}`}</span> <span>{`Type of bed: ${summary.bedType}`}</span>
<span>0 SEK</span> <span>0 SEK</span>
</div> </Caption>
<div className={styles.summary}> <Caption className={styles.summary}>
<span>{`Breakfast: ${summary.breakfast}`}</span> <span>{`Breakfast: ${summary.breakfast}`}</span>
<span>198 SEK</span> <span>198 SEK</span>
</div> </Caption>
<div className={styles.summary}> <Caption className={styles.summary}>
<span>{`Flexibility: ${summary.flexibility}`}</span> <span>{`Flexibility: ${summary.flexibility}`}</span>
<span>200 SEK</span> <span>200 SEK</span>
</div> </Caption>
</section> </section>
) )
} }

2
components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
View File

@@ -6,7 +6,5 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: var(--Spacing-x2) var(--Spacing-x0); padding: var(--Spacing-x2) var(--Spacing-x0);
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
border-bottom: 1px solid var(--Base-Border-Subtle); border-bottom: 1px solid var(--Base-Border-Subtle);
} }