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

35
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) {
const intl = await getIntl()
const nights =
stay.nights > 1
? intl.formatMessage({ id: "nights" })
@@ -19,15 +20,13 @@ export default async function StaySection({ hotel, stay }: StaySectionProps) {
return (
<>
<section className={styles.card}>
<div>
<Image
src={hotel.image}
alt=""
height={400}
width={200}
className={styles.image}
/>
</div>
<Image
src={hotel.image}
alt=""
height={400}
width={200}
className={styles.image}
/>
<div className={styles.info}>
<div className={styles.hotel}>
<ScandicLogoIcon color="red" />
@@ -39,16 +38,14 @@ export default async function StaySection({ hotel, stay }: StaySectionProps) {
<span>{hotel.phone}</span>
</Caption>
</div>
<div className={styles.width}>
<Body className={styles.stay}>
<span>{`${stay.nights} ${nights}`}</span>
<span className={styles.dates}>
<span>{stay.start}</span>
<ArrowRightIcon height={15} width={15} />
<span>{stay.end}</span>
</span>
</Body>
</div>
<Body className={styles.stay}>
<span>{`${stay.nights} ${nights}`}</span>
<span className={styles.dates}>
<span>{stay.start}</span>
<ArrowRightIcon height={15} width={15} />
<span>{stay.end}</span>
</span>
</Body>
</div>
</section>
<section className={styles.table}>

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

@@ -2,6 +2,7 @@
display: flex;
width: 100%;
background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Small);
overflow: hidden;
}
@@ -71,7 +72,7 @@
}
.hotel,
.width {
.stay {
width: 100%;
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 { getIntl } from "@/i18n"
@@ -7,27 +8,28 @@ import { SummarySectionProps } from "@/types/components/hotelReservation/booking
export default async function SummarySection({ summary }: SummarySectionProps) {
const intl = await getIntl()
return (
<section className={styles.section}>
<Title as="h4" textAlign="center">
{intl.formatMessage({ id: "Summary" })}
</Title>
<div className={styles.summary}>
<Caption className={styles.summary}>
<span>{`Type of room: ${summary.roomType}`}</span>
<span>1648 SEK</span>
</div>
<div className={styles.summary}>
</Caption>
<Caption className={styles.summary}>
<span>{`Type of bed: ${summary.bedType}`}</span>
<span>0 SEK</span>
</div>
<div className={styles.summary}>
</Caption>
<Caption className={styles.summary}>
<span>{`Breakfast: ${summary.breakfast}`}</span>
<span>198 SEK</span>
</div>
<div className={styles.summary}>
</Caption>
<Caption className={styles.summary}>
<span>{`Flexibility: ${summary.flexibility}`}</span>
<span>200 SEK</span>
</div>
</Caption>
</section>
)
}

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

@@ -6,7 +6,5 @@
display: flex;
justify-content: space-between;
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);
}