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

feat(SW-344): UI-fixes on hotel card dialog

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-12 15:11:31 +01:00
parent 87b999676b
commit 79e3aca089
4 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
View File

@@ -18,6 +18,12 @@
position: relative; position: relative;
} }
.name {
height: 48px;
display: flex;
align-items: center;
}
.closeIcon { .closeIcon {
position: absolute; position: absolute;
top: 7px; top: 7px;
@@ -52,7 +58,7 @@
.facilities { .facilities {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--Spacing-x1); gap: 0 var(--Spacing-x1);
} }
.facilitiesItem { .facilitiesItem {
@@ -67,7 +73,6 @@
background: var(--Base-Surface-Secondary-light-Normal); background: var(--Base-Surface-Secondary-light-Normal);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-half);
} }
.perNight { .perNight {

12
components/HotelReservation/HotelCardDialog/index.tsx
View File

@@ -52,20 +52,24 @@ export default function HotelCardDialog({
<div className={styles.imageContainer}> <div className={styles.imageContainer}>
<Image src={firstImage} alt={altText} fill /> <Image src={firstImage} alt={altText} fill />
<div className={styles.tripAdvisor}> <div className={styles.tripAdvisor}>
<Chip intent="primary" className={styles.tripAdvisor}> <Chip intent="secondary" className={styles.tripAdvisor}>
<TripAdvisorIcon color="white" /> <TripAdvisorIcon color="burgundy" />
{ratings} {ratings}
</Chip> </Chip>
</div> </div>
</div> </div>
<div className={styles.content}> <div className={styles.content}>
<Body textTransform="bold">{name}</Body> <div className={styles.name}>
<Body textTransform="bold">{name}</Body>
</div>
<div className={styles.facilities}> <div className={styles.facilities}>
{amenities.map((facility) => { {amenities.map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id) const IconComponent = mapFacilityToIcon(facility.id)
return ( return (
<div className={styles.facilitiesItem} key={facility.id}> <div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && <IconComponent color="grey80" />} {IconComponent && (
<IconComponent width={16} height={16} color="grey80" />
)}
<Caption color="uiTextMediumContrast"> <Caption color="uiTextMediumContrast">
{facility.name} {facility.name}
</Caption> </Caption>

5
components/TempDesignSystem/Chip/chip.module.css
View File

@@ -12,3 +12,8 @@ div.chip {
background-color: var(--Scandic-Red-90); background-color: var(--Scandic-Red-90);
color: var(--Primary-Dark-On-Surface-Accent); color: var(--Primary-Dark-On-Surface-Accent);
} }
.secondary {
background-color: var(--Base-Surface-Primary-light-Normal);
color: var(--Primary-Light-On-Surface-Text);
}

1
components/TempDesignSystem/Chip/variants.ts
View File

@@ -6,6 +6,7 @@ export const chipVariants = cva(styles.chip, {
variants: { variants: {
intent: { intent: {
primary: styles.primary, primary: styles.primary,
secondary: styles.secondary,
}, },
variant: { variant: {
default: styles.default, default: styles.default,