From a056b36443e42bf97d64947f0fab017c7929dd69 Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Wed, 8 Jan 2025 12:05:15 +0000
Subject: [PATCH] Merged in fix/SW-1330-filter-tooltip-mobile (pull request
 #1146)

fix(SW-1330): add space and fix touchable tooltip for ipad

* fix(SW-1330): add space and fix touchable tooltip for ipad


Approved-by: Pontus Dreij
Approved-by: Niclas Edenvin
---
 .../SelectRate/RoomFilter/index.tsx           | 49 +++++--------------
 .../RoomFilter/roomFilter.module.css          |  7 +++
 2 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/components/HotelReservation/SelectRate/RoomFilter/index.tsx b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
index ac952d518..70752b69b 100644
--- a/components/HotelReservation/SelectRate/RoomFilter/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
@@ -65,9 +65,6 @@ export default function RoomFilter({
   const tooltipText = intl.formatMessage({
     id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
   })
-
-  const showTooltip = isAboveMobile && petFriendly
-
   const submitFilter = useCallback(() => {
     const data = getValues()
     onFilter(data)
@@ -94,19 +91,14 @@ export default function RoomFilter({
       </div>
       <div className={styles.infoMobile}>
         <div className={styles.filterInfo}>
-          {!isAboveMobile ? (
-            <Tooltip
-              text={tooltipText}
-              position="bottom"
-              arrow="left"
-              isTouchable
-            >
-              <InfoCircleIcon
-                color="uiTextHighContrast"
-                height={20}
-                width={20}
-              />
-
+          <Tooltip
+            text={tooltipText}
+            position="bottom"
+            arrow="left"
+            isTouchable
+          >
+            <InfoCircleIcon color="uiTextHighContrast" height={20} width={20} />
+            <div className={styles.filter}>
               <Caption
                 type="label"
                 color="baseTextMediumContrast"
@@ -114,30 +106,14 @@ export default function RoomFilter({
               >
                 {intl.formatMessage({ id: "Filter" })}
               </Caption>
-              <Caption type="label" color="baseTextMediumContrast">
+              <Caption type="regular" color="baseTextMediumContrast">
                 {Object.entries(selectedFilters)
                   .filter(([_, value]) => value)
                   .map(([key]) => intl.formatMessage({ id: key }))
                   .join(", ")}
               </Caption>
-            </Tooltip>
-          ) : (
-            <>
-              <Caption
-                type="label"
-                color="baseTextMediumContrast"
-                textTransform="uppercase"
-              >
-                {intl.formatMessage({ id: "Filter" })}
-              </Caption>
-              <Caption type="label" color="baseTextMediumContrast">
-                {Object.entries(selectedFilters)
-                  .filter(([_, value]) => value)
-                  .map(([key]) => intl.formatMessage({ id: key }))
-                  .join(", ")}
-              </Caption>
-            </>
-          )}
+            </div>
+          </Tooltip>
         </div>
         <Caption color="uiTextHighContrast">
           {intl.formatMessage(
@@ -170,12 +146,13 @@ export default function RoomFilter({
                 />
               )
 
-              return showTooltip ? (
+              return isPetRoom && isAboveMobile ? (
                 <Tooltip
                   key={option.code}
                   text={tooltipText}
                   position="bottom"
                   arrow="right"
+                  isTouchable
                 >
                   {checkboxChip}
                 </Tooltip>
diff --git a/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css b/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
index f94858248..188bca200 100644
--- a/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
+++ b/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
@@ -12,6 +12,13 @@
   align-items: center;
 }
 
+.filter {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  margin-left: var(--Spacing-x-half);
+  align-items: baseline;
+}
+
 .filterInfo {
   display: flex;
   flex-direction: row;