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

fix/SW-451-design-comments (pull request #845)

Browse Source 
fix(SW-451): fix design comments

* fix(SW-451): fix design comments

* fix(SW-451): fix color styling

* fix(SW-451): fix title styling

* fix(SW-451): add fix correct gap


Approved-by: Pontus Dreij
Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström
This commit is contained in:
Bianca Widstam
2024-11-07 12:41:31 +00:00
parent e4e303ddb9
commit 2348fbafd4
2 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
View File

@@ -30,9 +30,9 @@
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
position: absolute; position: absolute;
left: var(--Spacing-x2); left: 8px;
top: var(--Spacing-x2); top: 8px;
padding: 0 var(--Spacing-x1); padding: var(--Spacing-x-quarter) var(--Spacing-x1);
border-radius: var(--Corner-radius-Small); border-radius: var(--Corner-radius-Small);
} }
@@ -42,16 +42,16 @@
} }
.hotelInformation { .hotelInformation {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
width: min(607px, 100%); width: min(607px, 100%);
} }
.title { .hotelAddressDescription {
margin-bottom: var(--Spacing-x1); display: flex;
} flex-direction: column;
gap: var(--Spacing-x2);
.body {
margin-top: var(--Spacing-x2);
} }
.facilities { .facilities {
@@ -73,10 +73,6 @@
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
} }
.facilityName {
color: var(--UI-Text-Medium-contrast);
}
.hotelAlert { .hotelAlert {
max-width: var(--max-width-navigation); max-width: var(--max-width-navigation);
margin: 0 auto; margin: 0 auto;

24
components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
View File

@@ -49,19 +49,17 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
</div> </div>
<div className={styles.hotelContent}> <div className={styles.hotelContent}>
<div className={styles.hotelInformation}> <div className={styles.hotelInformation}>
<Title <Title as="h2" textTransform="uppercase">
level="h3"
textTransform="uppercase"
className={styles.title}
>
{hotelAttributes.name} {hotelAttributes.name}
</Title> </Title>
<Caption color="uiTextMediumContrast"> <div className={styles.hotelAddressDescription}>
{`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${hotelAttributes.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`} <Caption color="uiTextMediumContrast">
</Caption> {`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${hotelAttributes.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
<Body color="uiTextHighContrast" className={styles.body}> </Caption>
{hotelAttributes.hotelContent.texts.descriptions.medium} <Body color="uiTextHighContrast">
</Body> {hotelAttributes.hotelContent.texts.descriptions.medium}
</Body>
</div>
</div> </div>
<Divider color="subtle" variant="vertical" /> <Divider color="subtle" variant="vertical" />
<div className={styles.facilities}> <div className={styles.facilities}>
@@ -79,9 +77,7 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
color="grey80" color="grey80"
/> />
)} )}
<Caption className={styles.facilityName}> <Body color="uiTextHighContrast">{facility.name}</Body>
{facility.name}
</Caption>
</div> </div>
) )
})} })}