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

2024-11-12 15:11:31 +01:00
parent 87b999676b
commit 79e3aca089
4 changed files with 21 additions and 6 deletions
--- a/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
+++ b/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
@@ -18,6 +18,12 @@
  position: relative;
 }

+.name {
+  height: 48px;
+  display: flex;
+  align-items: center;
+}
+
 .closeIcon {
  position: absolute;
  top: 7px;
@@ -52,7 +58,7 @@
 .facilities {
  display: flex;
  flex-wrap: wrap;
-  gap: var(--Spacing-x1);
+  gap: 0 var(--Spacing-x1);
 }

 .facilitiesItem {
@@ -67,7 +73,6 @@
  background: var(--Base-Surface-Secondary-light-Normal);
  display: flex;
  flex-direction: column;
-  gap: var(--Spacing-x-half);
 }

 .perNight {
--- a/components/HotelReservation/HotelCardDialog/index.tsx
+++ b/components/HotelReservation/HotelCardDialog/index.tsx
@@ -52,20 +52,24 @@ export default function HotelCardDialog({
        <div className={styles.imageContainer}>
          <Image src={firstImage} alt={altText} fill />
          <div className={styles.tripAdvisor}>
-            <Chip intent="primary" className={styles.tripAdvisor}>
-              <TripAdvisorIcon color="white" />
+            <Chip intent="secondary" className={styles.tripAdvisor}>
+              <TripAdvisorIcon color="burgundy" />
              {ratings}
            </Chip>
          </div>
        </div>
        <div className={styles.content}>
-          <Body textTransform="bold">{name}</Body>
+          <div className={styles.name}>
+            <Body textTransform="bold">{name}</Body>
+          </div>
          <div className={styles.facilities}>
            {amenities.map((facility) => {
              const IconComponent = mapFacilityToIcon(facility.id)
              return (
                <div className={styles.facilitiesItem} key={facility.id}>
-                  {IconComponent && <IconComponent color="grey80" />}
+                  {IconComponent && (
+                    <IconComponent width={16} height={16} color="grey80" />
+                  )}
                  <Caption color="uiTextMediumContrast">
                    {facility.name}
                  </Caption>
--- a/components/TempDesignSystem/Chip/chip.module.css
+++ b/components/TempDesignSystem/Chip/chip.module.css
@@ -12,3 +12,8 @@ div.chip {
  background-color: var(--Scandic-Red-90);
  color: var(--Primary-Dark-On-Surface-Accent);
 }
+
+.secondary {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  color: var(--Primary-Light-On-Surface-Text);
+}
--- a/components/TempDesignSystem/Chip/variants.ts
+++ b/components/TempDesignSystem/Chip/variants.ts
@@ -6,6 +6,7 @@ export const chipVariants = cva(styles.chip, {
  variants: {
    intent: {
      primary: styles.primary,
+      secondary: styles.secondary,
    },
    variant: {
      default: styles.default,