diff --git a/apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css b/apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css index fac2dbce0..30db1981d 100644 --- a/apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css +++ b/apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css @@ -1,5 +1,6 @@ .complete, .partial { + border: none; align-items: center; box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16); cursor: pointer; @@ -8,6 +9,12 @@ padding: var(--Spacing-x2); z-index: 1; background-color: var(--Base-Surface-Primary-light-Normal); + width: 100%; + /* In some cases the lingering pressend event will trigger the */ + /* webkit tap styling (but not triggering the buttons press event) */ + /* To avoid this "flash" the styling is set to transparent) */ + /* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */ + -webkit-tap-highlight-color: transparent; } .complete { @@ -15,12 +22,31 @@ } .partial { - grid-template-columns: minmax(auto, 150px) min-content minmax( - auto, - 150px - ) auto; + grid-template-columns: + minmax(auto, 150px) min-content minmax(auto, 150px) + auto; } +.block { + display: block; +} + +.block > * { + display: block; + text-align: start; +} + +.blockLabel { + color: var(--Scandic-Red-Default); +} + +.locationAndDate { + color: var(--Scandic-Grey-100); +} + +.placeholder { + color: var(--Text-Interactive-Placeholder); +} .icon { align-items: center; background-color: var(--Base-Button-Primary-Fill-Normal); diff --git a/apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx b/apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx index d7ce61e26..5b06c2753 100644 --- a/apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx +++ b/apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx @@ -1,16 +1,16 @@ "use client" +import { Button } from "react-aria-components" import { useWatch } from "react-hook-form" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" import { dt } from "@/lib/dt" import SkeletonShimmer from "@/components/SkeletonShimmer" import Divider from "@/components/TempDesignSystem/Divider" -import Body from "@/components/TempDesignSystem/Text/Body" -import Caption from "@/components/TempDesignSystem/Text/Caption" import useLang from "@/hooks/useLang" import isValidJson from "@/utils/isValidJson" @@ -85,68 +85,78 @@ export default function MobileToggleButton({ totalDetails.push(totalRoomsMsg) return ( -
{!locationAndDateIsSet && ( <> -
- - {intl.formatMessage({ id: "Where to?" })} - - - {parsedLocation - ? parsedLocation.name - : intl.formatMessage({ id: "Destination" })} - -
+ + + + {intl.formatMessage({ id: "Where to?" })} + + + + + {parsedLocation + ? parsedLocation.name + : intl.formatMessage({ id: "Destination" })} + + + + {/* Divider can't be a div */} -
- - {totalNightsMsg} - - - {intl.formatMessage( - { id: "{selectedFromDate} - {selectedToDate}" }, - { - selectedFromDate, - selectedToDate, - } - )} - -
-
+ + + {totalNightsMsg} + + + + {intl.formatMessage( + { id: "{selectedFromDate} - {selectedToDate}" }, + { + selectedFromDate, + selectedToDate, + } + )} + + + + -
+ )} {locationAndDateIsSet && ( <> -
- {parsedLocation?.name} - - {intl.formatMessage( - { - id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}", - }, - { - selectedFromDate, - selectedToDate, - totalNights: totalNightsMsg, - details: totalDetails.join(", "), - } - )} - -
-
+ + + {parsedLocation?.name} + + + + {intl.formatMessage( + { + id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}", + }, + { + selectedFromDate, + selectedToDate, + totalNights: totalNightsMsg, + details: totalDetails.join(", "), + } + )} + + + + -
+ )} -
+ ) } @@ -155,25 +165,29 @@ export function MobileToggleButtonSkeleton() { return (
-
- - {intl.formatMessage({ id: "Where to?" })} - - -
+ + + + {intl.formatMessage({ id: "Where to?" })} + + + + -
- - {intl.formatMessage( - { id: "{totalNights, plural, one {# night} other {# nights}}" }, - { totalNights: 0 } - )} - - -
-
+ + + + {intl.formatMessage( + { id: "{totalNights, plural, one {# night} other {# nights}}" }, + { totalNights: 0 } + )} + + + + + -
+
) } diff --git a/apps/scandic-web/components/ImageGallery/imageGallery.module.css b/apps/scandic-web/components/ImageGallery/imageGallery.module.css index 1397562fc..c28976493 100644 --- a/apps/scandic-web/components/ImageGallery/imageGallery.module.css +++ b/apps/scandic-web/components/ImageGallery/imageGallery.module.css @@ -12,6 +12,9 @@ gap: var(--Spacing-x-quarter); } +.imageCountNumber { + color: var(--Text-Inverted); +} .triggerArea { display: flex; cursor: pointer; diff --git a/apps/scandic-web/components/ImageGallery/index.tsx b/apps/scandic-web/components/ImageGallery/index.tsx index ac3872e1f..76f4a4d73 100644 --- a/apps/scandic-web/components/ImageGallery/index.tsx +++ b/apps/scandic-web/components/ImageGallery/index.tsx @@ -1,15 +1,15 @@ "use client" import { memo, useState } from "react" +import { Button } from "react-aria-components" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" import Image from "@/components/Image" import Lightbox from "@/components/Lightbox" -import Caption from "../TempDesignSystem/Text/Caption" - import styles from "./imageGallery.module.css" import type { ImageGalleryProps } from "@/types/components/imageGallery" @@ -35,10 +35,9 @@ function ImageGallery({ return ( <> -
setLightboxIsOpen(true)} + onPress={() => setLightboxIsOpen(true)} aria-label={intl.formatMessage({ id: "Open image gallery" })} > setImageError(true)} {...imageProps} /> -
+ - - {images.length} - -
-
+ + {images.length} + + +