Merged in fix/SW-2345-ui-map-close-icon-filter (pull request #2599)

fix(SW-2345): ui fixes for map etc

* fix(SW-2345): ui fixes for map etc


Approved-by: Anton Gunnarsson

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -14,8 +14,9 @@ import {
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { debounce } from "@scandic-hotels/common/utils/debounce"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 import { useHotelsMapStore } from "@/stores/hotels-map"
@@ -137,17 +138,26 @@ export default function SelectHotelContent({
     : selectHotel(lang)
   const closeButton = (
     <Button
-      intent="inverted"
-      size="small"
-      theme="base"
+      variant="Primary"
+      color="Inverted"
+      wrapping
+      size="Small"
       className={styles.closeButton}
-      asChild
     >
-      <Link href={closeMapUrl} keepSearchParams prefetch>
+      <Link
+        href={closeMapUrl}
+        keepSearchParams
+        prefetch
+        className={styles.link}
+      >
         <MaterialIcon icon="close" size={20} color="CurrentColor" />
-        {intl.formatMessage({
-          defaultMessage: "Close the map",
-        })}
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>
+            {intl.formatMessage({
+              defaultMessage: "Close the map",
+            })}
+          </p>
+        </Typography>
       </Link>
     </Button>
   )
@@ -170,16 +180,20 @@ export default function SelectHotelContent({
       <div className={styles.listingContainer} ref={listingContainerRef}>
         <div className={styles.filterContainer}>
           <Button
-            intent="text"
+            variant="Text"
             type="button"
-            variant="icon"
-            size="small"
+            size="Small"
             className={styles.filterContainerCloseButton}
-            asChild
           >
-            <Link href={closeMapUrl} keepSearchParams>
-              <MaterialIcon icon="arrow_back" color="CurrentColor" size={20} />
-              {intl.formatMessage({ defaultMessage: "Back" })}
+            <Link href={closeMapUrl} keepSearchParams className={styles.link}>
+              <MaterialIcon
+                icon="arrow_back_ios"
+                color="CurrentColor"
+                size={20}
+              />
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <p>{intl.formatMessage({ defaultMessage: "Back" })}</p>
+              </Typography>
             </Link>
           </Button>
           <FilterAndSortModal

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css

@@ -21,14 +21,17 @@
 
 .container .listingContainer .filterContainer > button {
   border: none;
+  text-decoration: none;
 }
 
 .skeletonContainer {
   display: none;
 }
 
-.filterContainerCloseButton {
-  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
+.link {
+  display: flex;
+  gap: var(--Space-x05);
+  align-items: baseline;
 }
 
 .bookingCodeFilter {