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
2025-08-06 11:26:12 +00:00
parent d391076125
commit 4b3d59f75b
6 changed files with 101 additions and 71 deletions
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/filterAndSortModal.module.css
+++ b/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;
-}
-
-.close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  justify-self: flex-end;
-  padding: 0;
+  text-align: center;
 }

 .divider {
@@ -143,8 +138,8 @@

  .header {
    display: grid;
-    grid-template-columns: auto 1fr;
-    padding: var(--Spacing-x2) var(--Spacing-x3);
+    grid-template-columns: 1fr auto;
+    padding: var(--Space-x1);
    align-items: center;
    border-bottom: 1px solid var(--Base-Border-Subtle);
    position: sticky;
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx
+++ b/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 Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 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">
-          <MaterialIcon icon="filter_alt" color="Icon/Intense" />
-          {intl.formatMessage({
-            defaultMessage: "Filter and sort",
-          })}
+        <Button variant="Secondary" size="Small" color="Primary">
+          <MaterialIcon icon="filter_alt" color="CurrentColor" />
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <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
-                      onClick={close}
-                      type="button"
-                      className={styles.close}
-                    >
-                      <MaterialIcon icon="close" />
-                    </button>
-                    <Subtitle
-                      type="two"
-                      textAlign="center"
+                    <Typography
+                      variant="Title/Subtitle/md"
                      className={styles.title}
                    >
-                      {intl.formatMessage({
-                        defaultMessage: "Filter and sort",
+                      <p>
+                        {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"
-                      size="medium"
-                      theme="base"
+                      variant="Tertiary"
+                      color="Primary"
+                      size="Large"
                      onClick={() => handleApplyFiltersAndSorting(close)}
                    >
-                      {intl.formatMessage(
-                        {
-                          defaultMessage: "See results ({ count })",
-                        },
-                        {
-                          count: filteredCount
-                            ? filteredCount
-                            : unfilteredResultCount,
-                        }
-                      )}
+                      <Typography variant="Body/Paragraph/mdBold">
+                        <p>
+                          {intl.formatMessage(
+                            {
+                              defaultMessage: "See results ({ count })",
+                            },
+                            {
+                              count: filteredCount
+                                ? filteredCount
+                                : unfilteredResultCount,
+                            }
+                          )}
+                        </p>
+                      </Typography>
                    </Button>
                    <Button
                      onClick={() => {
                        setSelectedFilters([])
                        setFilteredCount(unfilteredResultCount)
                      }}
-                      intent="text"
-                      size="medium"
-                      theme="base"
+                      variant="Text"
+                      color="Primary"
+                      size="Medium"
                    >
-                      {intl.formatMessage({
-                        defaultMessage: "Clear all filters",
-                      })}
+                      <Typography variant="Body/Paragraph/mdBold">
+                        <p>
+                          {intl.formatMessage({
+                            defaultMessage: "Clear all filters",
+                          })}
+                        </p>
+                      </Typography>
                    </Button>
                  </footer>
                </>
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx
+++ b/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",
          })}
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
+++ b/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
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
+++ b/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 {
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css
@@ -15,7 +15,7 @@
 }

 .body {
-  opacity: 0.8;
+  color: var(--Text-Default);
 }

 .hideWrapper {