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

Merged in feat/SW-337-hotel-page-ui (pull request #828)

Browse Source 
Feat(SW-337): HotelPage UI fixes

Approved-by: Christian Andolf
Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson
This commit is contained in:
Matilda Landström
2024-11-05 09:52:39 +00:00
parent d8d77479b1
commit c7b61196cb
8 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Blocks/CardsGrid.tsx
View File

@@ -43,7 +43,7 @@ export default function CardsGrid({
return ( return (
<Card <Card
theme={ theme={
cards_grid.theme ?? card.backgroundImage ? "image" : "one" cards_grid.theme ?? (card.backgroundImage ? "image" : "one")
} }
key={card.system.uid} key={card.system.uid}
scriptedTopTitle={card.scripted_top_title} scriptedTopTitle={card.scripted_top_title}

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

@@ -18,6 +18,7 @@
.amenityItem { .amenityItem {
display: inline-flex; display: inline-flex;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
align-items: center;
} }
.icon { .icon {

11
components/ContentType/HotelPage/AmenitiesList/index.tsx
View File

@@ -1,7 +1,7 @@
import { amenities } from "@/constants/routes/hotelPageParams" import { amenities } from "@/constants/routes/hotelPageParams"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { ChevronRightIcon } from "@/components/Icons" import { ChevronRightSmallIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -29,7 +29,12 @@ export default async function AmenitiesList({
return ( return (
<div className={styles.amenityItem} key={facility.id}> <div className={styles.amenityItem} key={facility.id}>
{IconComponent && ( {IconComponent && (
<IconComponent className={styles.icon} color="grey80" /> <IconComponent
className={styles.icon}
color="grey80"
width={20}
height={20}
/>
)} )}
<Body color="textMediumContrast">{facility.name}</Body> <Body color="textMediumContrast">{facility.name}</Body>
</div> </div>
@@ -44,7 +49,7 @@ export default async function AmenitiesList({
className={styles.showAllAmenities} className={styles.showAllAmenities}
> >
{intl.formatMessage({ id: "Show all amenities" })} {intl.formatMessage({ id: "Show all amenities" })}
<ChevronRightIcon color="burgundy" /> <ChevronRightSmallIcon color="burgundy" />
</Link> </Link>
</section> </section>
) )

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

@@ -1,7 +1,6 @@
import { about } from "@/constants/routes/hotelPageParams" import { about } from "@/constants/routes/hotelPageParams"
import { ChevronRightIcon } from "@/components/Icons" import { ChevronRightSmallIcon } from "@/components/Icons"
import ArrowRight from "@/components/Icons/ArrowRight"
import TripAdvisorIcon from "@/components/Icons/TripAdvisor" import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -48,7 +47,7 @@ export default async function IntroSection({
<div className={styles.mainContent}> <div className={styles.mainContent}>
<div className={styles.titleContainer}> <div className={styles.titleContainer}>
<BiroScript tilted="medium" color="red"> <BiroScript tilted="medium" color="red">
{intl.formatMessage({ id: "Welcome to" })}: {intl.formatMessage({ id: "Welcome to" })}
</BiroScript> </BiroScript>
<Title level="h2">{hotelName}</Title> <Title level="h2">{hotelName}</Title>
</div> </div>
@@ -77,7 +76,7 @@ export default async function IntroSection({
scroll={false} scroll={false}
> >
{intl.formatMessage({ id: "Read more about the hotel" })} {intl.formatMessage({ id: "Read more about the hotel" })}
<ChevronRightIcon color="burgundy" /> <ChevronRightSmallIcon color="burgundy" />
</Link> </Link>
</div> </div>
</section> </section>

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

@@ -2,7 +2,7 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { ImageIcon } from "@/components/Icons" import { GalleryIcon } from "@/components/Icons"
import Image from "@/components/Image" import Image from "@/components/Image"
import RoomSidePeek from "@/components/SidePeeks/RoomSidePeek" import RoomSidePeek from "@/components/SidePeeks/RoomSidePeek"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
@@ -44,7 +44,7 @@ export function RoomCard({ room }: RoomCardProps) {
{/* </span> */} {/* </span> */}
{/* )} */} {/* )} */}
<span className={styles.imageCount}> <span className={styles.imageCount}>
<ImageIcon color="white" /> <GalleryIcon color="white" />
{images.length} {images.length}
</span> </span>
{/*NOTE: images from the test API are hosted on test3.scandichotels.com, {/*NOTE: images from the test API are hosted on test3.scandichotels.com,

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

@@ -26,10 +26,11 @@
display: flex; display: flex;
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
align-items: center; align-items: center;
background-color: var(--Main-Grey-90); background-color: var(--UI-Grey-90);
opacity: 90%;
color: var(--UI-Input-Controls-Fill-Normal); color: var(--UI-Input-Controls-Fill-Normal);
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-Small);
} }
.content { .content {

13
components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
View File

@@ -18,16 +18,13 @@
font-weight: var(--typography-Body-Bold-fontWeight); font-weight: var(--typography-Body-Bold-fontWeight);
transition: background-color 0.3s; transition: background-color 0.3s;
} }
.summary:hover, .summary:hover {
.accordionItem details[open] .summary { background-color: var(--Base-Surface-Primary-light-Hover-alt);
background-color: var(--Base-Surface-Primary-light-Hover-alt, #f2ece6);
} }
.accordionItem.light .summary:hover, .accordionItem.light .summary:hover {
.accordionItem.light details[open] .summary { background-color: var(--Base-Surface-Primary-light-Hover);
background-color: var(--Base-Surface-Primary-light-Hover, #f9f6f4);
} }
.accordionItem.subtle .summary:hover, .accordionItem.subtle .summary:hover {
.accordionItem.subtle details[open] .summary {
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
} }

7
components/TempDesignSystem/Accordion/accordion.module.css
View File

@@ -16,3 +16,10 @@
.accordion li:last-child { .accordion li:last-child {
border: none; border: none;
} }
.accordion details > summary {
list-style: none;
}
.accordion details > summary::-webkit-details-marker {
display: none;
}