From 2348fbafd40d57e08f167167f260060806dd197a Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Thu, 7 Nov 2024 12:41:31 +0000 Subject: [PATCH] fix/SW-451-design-comments (pull request #845) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../HotelInfoCard/hotelInfoCard.module.css | 22 +++++++---------- .../SelectRate/HotelInfoCard/index.tsx | 24 ++++++++----------- 2 files changed, 19 insertions(+), 27 deletions(-) diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css b/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css index d6fba4bc2..e3e5642db 100644 --- a/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css +++ b/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css @@ -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; diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx index b75e2b4ae..cd1d11f98 100644 --- a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx +++ b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx @@ -49,19 +49,17 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
- + <Title as="h2" textTransform="uppercase"> {hotelAttributes.name} - - {`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${hotelAttributes.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`} - - - {hotelAttributes.hotelContent.texts.descriptions.medium} - +
+ + {`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${hotelAttributes.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`} + + + {hotelAttributes.hotelContent.texts.descriptions.medium} + +
@@ -79,9 +77,7 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) { color="grey80" /> )} - - {facility.name} - + {facility.name}
) })}