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) { @media screen and (min-width: 1367px) {
.amenitiesContainer { .amenitiesContainer {
margin-top: var(--Spacing-x5); 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> <Preamble>{hotelDescription}</Preamble>
<Link <Link
className={styles.introLink} className={styles.introLink}
color="peach80" color="burgundy"
textDecoration="underline"
variant="icon" variant="icon"
href={`?s=${about[lang]}`} href={`?s=${about[lang]}`}
> >
{intl.formatMessage({ id: "Read more about the hotel" })} {intl.formatMessage({ id: "Read more about the hotel" })}
<ArrowRight color="peach80" /> <ArrowRight color="burgundy" />
</Link> </Link>
</div> </div>
</section> </section>

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

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

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

@@ -26,8 +26,8 @@
display: flex; display: flex;
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
align-items: center; align-items: center;
background-color: var(--Scandic-Opacity-Almost-Black-60); background-color: var(--Main-Grey-90);
color: var(--Scandic-Opacity-White-100); color: var(--UI-Opacity-White-100);
padding: var(--Spacing-x-half) var(--Spacing-x1); padding: var(--Spacing-x-half) var(--Spacing-x1);
border-radius: var(--Corner-radius-Medium); 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"> <SectionContainer id="rooms-section">
<div ref={scrollRef}></div> <div ref={scrollRef}></div>
<SectionHeader <SectionHeader
textTransform="uppercase" textTransform="capitalize"
title={intl.formatMessage({ id: "Rooms" })} title={intl.formatMessage({ id: "Rooms" })}
preamble={null} preamble={null}
/> />
@@ -80,7 +80,8 @@ export function Rooms({ rooms }: RoomsProps) {
<div className={styles.ctaContainer}> <div className={styles.ctaContainer}>
<Button <Button
onClick={handleToggleShowMore} onClick={handleToggleShowMore}
intent="tertiary" theme="base"
intent="text"
variant="icon" variant="icon"
className={`${styles.showMoreButton} ${allRoomsVisible ? styles.showLess : ""}`} className={`${styles.showMoreButton} ${allRoomsVisible ? styles.showLess : ""}`}
> >

9
components/Lightbox/Gallery.tsx
View File

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

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

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