Merged in feat/SW-1549-map-improvements (pull request #1783)

Feat/SW-1549 map improvements

* fix: imported new icon

* refactor: rename component and set map handling to 'greedy'

* fix: show cards for 3s after hover

* refactor: update styles and added HotelPin component

* fix: change from close to back icon

* refactor: update to only use 1 state value for active pin and card

* fix: add click handler when dialog is opened

* fix: performance fixes for the dialog carousel

* fix: added border

* fix: clear timeout on mouseenter

* fix: changed to absolute import

* fix: moved hover state into the store

* fix: renamed store actions


Approved-by: Michael Zetterberg

apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx

@@ -62,28 +62,20 @@ export default function ListingHotelCardDialog({
           setImageError={setImageError}
           position="top"
         />
-        <div className={styles.detailsContainer}>
+        <div>
           <div className={styles.name}>
             <Subtitle type="two">{name}</Subtitle>
           </div>
           <div className={styles.facilities}>
-            {amenities.map((facility) => {
-              const Icon = (
+            {amenities.map((facility) => (
+              <div className={styles.facilitiesItem} key={facility.id}>
                 <FacilityToIcon
                   id={facility.id}
                   size={20}
                   color="Icon/Default"
                 />
-              )
-              return (
-                <div className={styles.facilitiesItem} key={facility.id}>
-                  {Icon && Icon}
-                  <Caption color="uiTextMediumContrast">
-                    {facility.name}
-                  </Caption>
-                </div>
-              )
-            })}
+              </div>
+            ))}
           </div>
         </div>
       </div>
@@ -115,7 +107,7 @@ export default function ListingHotelCardDialog({
                 </>
               )}
               {memberPrice && (
-                <Subtitle type="two" color="red" className={styles.memberPrice}>
+                <Subtitle type="two" color="red">
                   {intl.formatMessage(
                     {
                       defaultMessage: "{price} {currency}",