diff --git a/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx index 831da13cd..076c9a1a7 100644 --- a/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx +++ b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx @@ -1,11 +1,10 @@ import { useIntl } from "react-intl" +import { Typography } from "@scandic-hotels/design-system/Typography" + import { BED_TYPE_ICONS, type BedTypes } from "@/constants/booking" import ImageGallery from "@/components/ImageGallery" -import Body from "@/components/TempDesignSystem/Text/Body" -import Caption from "@/components/TempDesignSystem/Text/Caption" -import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" import { FacilityIcon } from "../facilityIcon" @@ -30,64 +29,69 @@ export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
{totalOccupancy && ( - - {intl.formatMessage( - { - defaultMessage: - "Max. {max, plural, one {{range} guest} other {{range} guests}}", - }, - { - max: totalOccupancy.max, - range: totalOccupancy.range, - } - )} - + +

+ {intl.formatMessage( + { + defaultMessage: + "Max. {max, plural, one {{range} guest} other {{range} guests}}", + }, + { + max: totalOccupancy.max, + range: totalOccupancy.range, + } + )} +

+ )} {roomSize && ( - - {roomSize.min === roomSize.max - ? intl.formatMessage( - { - defaultMessage: "{roomSize} m²", - }, - { - roomSize: roomSize.min, - } - ) - : intl.formatMessage( - { - defaultMessage: "{roomSizeMin}–{roomSizeMax} m²", - }, - { - roomSizeMin: roomSize.min, - roomSizeMax: roomSize.max, - } - )} - + +

+ {roomSize.min === roomSize.max + ? intl.formatMessage( + { + defaultMessage: "{roomSize} m²", + }, + { + roomSize: roomSize.min, + } + ) + : intl.formatMessage( + { + defaultMessage: "{roomSizeMin}–{roomSizeMax} m²", + }, + { + roomSizeMin: roomSize.min, + roomSizeMax: roomSize.max, + } + )} +

+ )}
- {roomDescription}
- - {intl.formatMessage({ - defaultMessage: "Room amenities", - })} - - +
- - {intl.formatMessage({ - defaultMessage: "Bed options", - })} - - - {intl.formatMessage({ - defaultMessage: "Subject to availability", - })} - + +

+ {intl.formatMessage({ + defaultMessage: "Bed options", + })} +

+ + +

+ {intl.formatMessage({ + defaultMessage: "Subject to availability", + })} +

+
+
+ +

+ {intl.formatMessage({ + defaultMessage: "About the hotel", + })} +

+ + +

{roomDescription}

+ +
) } diff --git a/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css index e7c90049a..723427dd2 100644 --- a/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css +++ b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css @@ -1,9 +1,3 @@ -.button { - margin-left: auto; - padding: 0 0 0 var(--Spacing-x-half); - text-decoration: none; -} - .wrapper { display: flex; flex-direction: column; @@ -14,6 +8,10 @@ ); /* Creates space between the wrapper and buttonContainer */ } +.mainContent { + color: var(--Text-Secondary); +} + .mainContent, .listContainer { display: flex; @@ -36,6 +34,7 @@ .facilityList { column-count: 2; column-gap: var(--Spacing-x2); + color: var(--Text-Secondary); } .facilityList li { @@ -44,6 +43,10 @@ margin-bottom: var(--Spacing-x-half); } +.bedOptions { + color: var(--Text-Secondary); +} + .bedOptions li { display: flex; gap: var(--Spacing-x1); @@ -53,17 +56,3 @@ .facilityList li svg { flex-shrink: 0; } - -.noIcon { - margin-left: var(--Spacing-x4); -} - -.buttonContainer { - background-color: var(--Background-Primary); - border-top: 1px solid var(--Base-Border-Subtle); - padding: var(--Spacing-x4) var(--Spacing-x2); - width: 100%; - position: absolute; - left: 0; - bottom: 0; -}