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

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

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