diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css index 778330081..e796bcd64 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css @@ -1,18 +1,18 @@ .hotelListWrapper { display: grid; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .header { display: flex; justify-content: space-between; align-items: center; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .hotelList { display: grid; - gap: var(--Spacing-x3); + gap: var(--Space-x3); list-style: none; } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/index.tsx index 0ccdaa7b8..327dc233c 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/index.tsx @@ -4,10 +4,11 @@ import { useMap, useMapsLibrary } from "@vis.gl/react-google-maps" import { useEffect, useMemo, useState } from "react" import { useIntl } from "react-intl" +import { Typography } from "@scandic-hotels/design-system/Typography" + import { useDestinationDataStore } from "@/stores/destination-data" import DestinationFilterAndSort from "@/components/DestinationFilterAndSort" -import Body from "@/components/TempDesignSystem/Text/Body" import { debounce } from "@/utils/debounce" import HotelListContent from "./Content" @@ -60,14 +61,16 @@ export default function HotelList() { return (
- - {intl.formatMessage( - { - defaultMessage: "{count} hotels", - }, - { count: visibleHotels.length } - )} - + +

+ {intl.formatMessage( + { + defaultMessage: "{count} hotels", + }, + { count: visibleHotels.length } + )} +

+
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css index dad10e896..9b92c7999 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css @@ -1,9 +1,10 @@ .hotelListItem { display: grid; - background-color: var(--Base-Surface-Primary-light-Normal); - border: 1px solid var(--Base-Border-Subtle); + background-color: var(--Surface-Primary-Default); + border: 1px solid var(--Border-Default); border-radius: var(--Corner-radius-md); overflow: hidden; + scroll-margin-top: var(--Space-x2); } .activeCard { @@ -13,8 +14,8 @@ .content { display: flex; flex-direction: column; - gap: var(--Spacing-x2); - padding: var(--Spacing-x2) var(--Spacing-x3); + gap: var(--Space-x2); + padding: var(--Space-x2) var(--Space-x3); align-content: flex-start; justify-items: flex-start; } @@ -30,25 +31,22 @@ left: 16px; display: flex; align-items: center; - gap: var(--Spacing-x-half); - background-color: var(--Base-Surface-Primary-light-Normal); - padding: var(--Spacing-x-quarter) var(--Spacing-x1); + gap: var(--Space-x05); + background-color: var(--Surface-Primary-Default); + padding: var(--Space-x025) var(--Space-x1); border-radius: var(--Corner-radius-sm); color: var(--Text-Interactive-Default); } -.hotelName { - color: var(--Text-Default); -} - .intro { display: grid; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .captions { display: flex; - gap: var(--Spacing-x1); + column-gap: var(--Space-x1); + flex-wrap: wrap; color: var(--Text-Tertiary); } @@ -66,14 +64,14 @@ .amenityList { display: flex; - gap: var(--Spacing-x-one-and-half); + gap: var(--Space-x025) var(--Space-x1); flex-wrap: wrap; color: var(--Text-Secondary); } .amenityItem { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); align-items: center; } @@ -98,8 +96,8 @@ } .content { - padding: var(--Spacing-x-one-and-half); - gap: var(--Spacing-x1); + padding: var(--Space-x15); + gap: var(--Space-x1); } .logo, diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx index 494be159e..7ca008c04 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx @@ -38,7 +38,7 @@ export default function HotelListItem(data: DestinationPagesHotelData) { if (element) { element.scrollIntoView({ behavior: "smooth", - block: "nearest", + block: "start", inline: "start", }) } @@ -89,10 +89,10 @@ export default function HotelListItem(data: DestinationPagesHotelData) {
-

{hotel.name}

+

{hotel.name}

 -
+

- -

+ + + + {intl.formatMessage( { defaultMessage: "{number} km to city center", @@ -113,8 +119,8 @@ export default function HotelListItem(data: DestinationPagesHotelData) { ), } )} -

-
+ +

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/map.module.css b/apps/scandic-web/components/ContentType/DestinationPage/Map/map.module.css index dd85031f6..c524afe27 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/map.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/map.module.css @@ -1,51 +1,57 @@ .mapWrapper { position: fixed; display: flex; + flex-direction: column; height: 100dvh; width: 100dvw; - background-color: var(--Base-Surface-Primary-light-Normal); + background-color: var(--Background-Primary); z-index: 1; } .sidebar { - width: 100%; - max-width: 500px; - background-color: var(--Base-Surface-Primary-Normal); - overflow-y: auto; - padding: var(--Spacing-x4); display: flex; flex-direction: column; - gap: var(--Spacing-x4); + gap: var(--Space-x4); } .closeButton { pointer-events: initial; box-shadow: var(--button-box-shadow); - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .mobileNavigation { - display: none; + display: flex; + padding: var(--Space-x2); + justify-content: space-between; + background-color: var(--Surface-Primary-OnSurface-Default); } @media screen and (max-width: 949px) { - .mapWrapper { - flex-direction: column; - } - - .mobileNavigation { - display: flex; - padding: var(--Spacing-x2); - justify-content: space-between; - background-color: var(--Surface-Primary-OnSurface-Default); - } - .sidebar { position: absolute; - max-width: none; - padding: 0 0 var(--Spacing-x2) 0; + width: 100%; + padding-bottom: var(--Space-x2); overflow: hidden; bottom: 0; z-index: 3; } } + +@media screen and (min-width: 950px) { + .mapWrapper { + flex-direction: row; + } + + .sidebar { + width: 420px; + flex-shrink: 0; + overflow-y: auto; + padding: var(--Space-x5); + background-color: var(--Background-Primary); + } + + .mobileNavigation { + display: none; + } +} diff --git a/apps/scandic-web/components/ImageGallery/imageGallery.module.css b/apps/scandic-web/components/ImageGallery/imageGallery.module.css index c22482b1a..bf81d022c 100644 --- a/apps/scandic-web/components/ImageGallery/imageGallery.module.css +++ b/apps/scandic-web/components/ImageGallery/imageGallery.module.css @@ -7,16 +7,15 @@ .imageCount { position: absolute; - bottom: 16px; - right: 16px; - max-height: 32px; - width: 48px; - background-color: rgba(0, 0, 0, 0.6); - padding: var(--Spacing-x-quarter) var(--Spacing-x-half); + bottom: var(--Space-x2); + right: var(--Space-x2); + background-color: var(--Overlay-90); + padding: var(--Space-x025) var(--Space-x05); border-radius: var(--Corner-radius-sm); display: flex; align-items: center; - gap: var(--Spacing-x-quarter); + justify-content: center; + gap: var(--Space-x025); color: var(--Text-Inverted); } @@ -40,7 +39,6 @@ .imagePlaceholder { height: 100%; min-height: 190px; - aspect-ratio: 16/9; width: 100%; background-color: #fff; background-image: diff --git a/apps/scandic-web/components/ImageGallery/index.tsx b/apps/scandic-web/components/ImageGallery/index.tsx index 02e93fede..3643abdf6 100644 --- a/apps/scandic-web/components/ImageGallery/index.tsx +++ b/apps/scandic-web/components/ImageGallery/index.tsx @@ -1,7 +1,7 @@ "use client" import { memo, useState } from "react" -import { Button } from "react-aria-components" +import { Button as ButtonRAC } from "react-aria-components" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" @@ -45,11 +45,11 @@ function ImageGallery({ /> - + {images.length} -