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/Filters/FilterAndSortModal/filterAndSortModal.module.css

@@ -96,6 +96,8 @@
 }
 
 .header {
+  display: flex;
+  justify-content: flex-end;
   text-align: right;
   padding: var(--Spacing-x-one-and-half);
   flex: 0 0 auto;
@@ -103,14 +105,7 @@
 
 .title {
   display: none;
-}
+  text-align: center;
-
-.close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  justify-self: flex-end;
-  padding: 0;
 }
 
 .divider {
@@ -143,8 +138,8 @@
 
   .header {
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
-    padding: var(--Spacing-x2) var(--Spacing-x3);
+    padding: var(--Space-x1);
     align-items: center;
     border-bottom: 1px solid var(--Base-Border-Subtle);
     position: sticky;

apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx

@@ -13,12 +13,12 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import Footnote from "@scandic-hotels/design-system/Footnote"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 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 Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
@@ -134,13 +134,19 @@ export default function FilterAndSortModal({
   return (
     <>
       <DialogTrigger>
-        <Button intent="secondary" size="small" theme="base" variant="icon">
+        <Button variant="Secondary" size="Small" color="Primary">
-          <MaterialIcon icon="filter_alt" color="Icon/Intense" />
+          <MaterialIcon icon="filter_alt" color="CurrentColor" />
-          {intl.formatMessage({
+          <Typography variant="Body/Supporting text (caption)/smBold">
-            defaultMessage: "Filter and sort",
+            <p>
-          })}
+              {intl.formatMessage({
+                defaultMessage: "Filter and sort",
+              })}
+            </p>
+          </Typography>
           {activeFilters.length > 0 && (
-            <Footnote className={styles.badge}>{activeFilters.length}</Footnote>
+            <Typography variant="Label/xsRegular" className={styles.badge}>
+              <p>{activeFilters.length}</p>
+            </Typography>
           )}
         </Button>
         <ModalOverlay className={styles.overlay} isDismissable>
@@ -149,22 +155,26 @@ export default function FilterAndSortModal({
               {({ close }) => (
                 <>
                   <header className={styles.header}>
-                    <button
+                    <Typography
-                      onClick={close}
+                      variant="Title/Subtitle/md"
-                      type="button"
-                      className={styles.close}
-                    >
-                      <MaterialIcon icon="close" />
-                    </button>
-                    <Subtitle
-                      type="two"
-                      textAlign="center"
                       className={styles.title}
                     >
-                      {intl.formatMessage({
+                      <p>
-                        defaultMessage: "Filter and sort",
+                        {intl.formatMessage({
+                          defaultMessage: "Filter and sort",
+                        })}
+                      </p>
+                    </Typography>
+                    <IconButton
+                      theme="Black"
+                      style="Muted"
+                      onPress={close}
+                      aria-label={intl.formatMessage({
+                        defaultMessage: "Close",
                       })}
-                    </Subtitle>
+                    >
+                      <MaterialIcon icon="close" />
+                    </IconButton>
                   </header>
                   <div className={styles.sorter}>
                     <DeprecatedSelect
@@ -200,34 +210,42 @@ export default function FilterAndSortModal({
                   </div>
                   <footer className={styles.footer}>
                     <Button
-                      intent="primary"
+                      variant="Tertiary"
-                      size="medium"
+                      color="Primary"
-                      theme="base"
+                      size="Large"
                       onClick={() => handleApplyFiltersAndSorting(close)}
                     >
-                      {intl.formatMessage(
+                      <Typography variant="Body/Paragraph/mdBold">
-                        {
+                        <p>
-                          defaultMessage: "See results ({ count })",
+                          {intl.formatMessage(
-                        },
+                            {
-                        {
+                              defaultMessage: "See results ({ count })",
-                          count: filteredCount
+                            },
-                            ? filteredCount
+                            {
-                            : unfilteredResultCount,
+                              count: filteredCount
-                        }
+                                ? filteredCount
-                      )}
+                                : unfilteredResultCount,
+                            }
+                          )}
+                        </p>
+                      </Typography>
                     </Button>
                     <Button
                       onClick={() => {
                         setSelectedFilters([])
                         setFilteredCount(unfilteredResultCount)
                       }}
-                      intent="text"
+                      variant="Text"
-                      size="medium"
+                      color="Primary"
-                      theme="base"
+                      size="Medium"
                     >
-                      {intl.formatMessage({
+                      <Typography variant="Body/Paragraph/mdBold">
-                        defaultMessage: "Clear all filters",
+                        <p>
-                      })}
+                          {intl.formatMessage({
+                            defaultMessage: "Clear all filters",
+                          })}
+                        </p>
+                      </Typography>
                     </Button>
                   </footer>
                 </>

apps/scandic-web/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx

@@ -44,7 +44,7 @@ export default function MobileMapButtonContainer({
           keepSearchParams
           weight="bold"
         >
-          <MaterialIcon icon="map" color="Icon/Intense" />
+          <MaterialIcon icon="map" color="CurrentColor" />
           {intl.formatMessage({
             defaultMessage: "See on map",
           })}

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"
+      variant="Primary"
-      size="small"
+      color="Inverted"
-      theme="base"
+      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({
+        <Typography variant="Body/Supporting text (caption)/smBold">
-          defaultMessage: "Close the map",
+          <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>
+            <Link href={closeMapUrl} keepSearchParams className={styles.link}>
-              <MaterialIcon icon="arrow_back" color="CurrentColor" size={20} />
+              <MaterialIcon
-              {intl.formatMessage({ defaultMessage: "Back" })}
+                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 {
+.link {
-  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
+  display: flex;
+  gap: var(--Space-x05);
+  align-items: baseline;
 }
 
 .bookingCodeFilter {

packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css

@@ -15,7 +15,7 @@
 }
 
 .body {
-  opacity: 0.8;
+  color: var(--Text-Default);
 }
 
 .hideWrapper {