scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(SW-337): UI fixes for hotel page

Browse Source
This commit is contained in:
Chuma McPhoy
2024-09-03 19:29:54 +02:00
parent d46a7ecbf7
commit 9a24865170
7 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
View File

@@ -26,5 +26,6 @@
@media screen and (min-width: 1367px) {
.amenitiesContainer {
margin-top: var(--Spacing-x5);
width: 300px;
}
}

5
components/ContentType/HotelPage/IntroSection/index.tsx
View File

@@ -70,13 +70,12 @@ export default async function IntroSection({
<Preamble>{hotelDescription}</Preamble>
<Link
className={styles.introLink}
color="peach80"
textDecoration="underline"
color="burgundy"
variant="icon"
href={`?s=${about[lang]}`}
>
{intl.formatMessage({ id: "Read more about the hotel" })}
<ArrowRight color="peach80" />
<ArrowRight color="burgundy" />
</Link>
</div>
</section>

7
components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
View File

@@ -62,7 +62,12 @@ export function RoomCard({
</Title>
<Body color="grey">{subtitle}</Body>
</div>
<Button variant="icon" intent="tertiary" onClick={handleRoomCtaClick}>
<Button
theme="base"
variant="icon"
intent="text"
onClick={handleRoomCtaClick}
>
{intl.formatMessage({ id: "See room details" })}
<ChevronRightIcon className={styles.chevron} />
</Button>

4
components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css
View File

@@ -26,8 +26,8 @@
display: flex;
gap: var(--Spacing-x-half);
align-items: center;
background-color: var(--Scandic-Opacity-Almost-Black-60);
color: var(--Scandic-Opacity-White-100);
background-color: var(--Main-Grey-90);
color: var(--UI-Opacity-White-100);
padding: var(--Spacing-x-half) var(--Spacing-x1);
border-radius: var(--Corner-radius-Medium);
}

5
components/ContentType/HotelPage/Rooms/index.tsx
View File

@@ -52,7 +52,7 @@ export function Rooms({ rooms }: RoomsProps) {
<SectionContainer id="rooms-section">
<div ref={scrollRef}></div>
<SectionHeader
textTransform="uppercase"
textTransform="capitalize"
title={intl.formatMessage({ id: "Rooms" })}
preamble={null}
/>
@@ -80,7 +80,8 @@ export function Rooms({ rooms }: RoomsProps) {
<div className={styles.ctaContainer}>
<Button
onClick={handleToggleShowMore}
intent="tertiary"
theme="base"
intent="text"
variant="icon"
className={`${styles.showMoreButton} ${allRoomsVisible ? styles.showLess : ""}`}
>

9
components/Lightbox/Gallery.tsx
View File

@@ -1,4 +1,5 @@
"use client"
import { DialogTitle } from "@radix-ui/react-dialog"
import { AnimatePresence, motion } from "framer-motion"
import { ChevronRightIcon } from "@/components/Icons"
@@ -55,9 +56,11 @@ export default function Gallery({
{/* Desktop Gallery */}
<div className={styles.desktopGallery}>
<div className={styles.galleryHeader}>
<div className={styles.imageCaption}>
<Caption color="textMediumContrast">{mainImage.title}</Caption>
</div>
<DialogTitle asChild>
<div className={styles.imageCaption}>
<Caption color="textMediumContrast">{mainImage.title}</Caption>
</div>
</DialogTitle>
</div>
<div className={styles.mainImageWrapper}>
<AnimatePresence initial={false} mode="wait">

1
components/Lightbox/Lightbox.module.css
View File

@@ -188,6 +188,7 @@
height: 100%;
flex-direction: column;
position: relative;
overflow: hidden;
}
.desktopGalleryCloseButton {