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 (
<Card
theme={
cards_grid.theme ?? card.backgroundImage ? "image" : "one"
cards_grid.theme ?? (card.backgroundImage ? "image" : "one")
}
key={card.system.uid}
scriptedTopTitle={card.scripted_top_title}

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

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

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

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

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

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

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

@@ -2,7 +2,7 @@
import { useIntl } from "react-intl"
import { ImageIcon } from "@/components/Icons"
import { GalleryIcon } from "@/components/Icons"
import Image from "@/components/Image"
import RoomSidePeek from "@/components/SidePeeks/RoomSidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -44,7 +44,7 @@ export function RoomCard({ room }: RoomCardProps) {
{/* </span> */}
{/* )} */}
<span className={styles.imageCount}>
<ImageIcon color="white" />
<GalleryIcon color="white" />
{images.length}
</span>
{/*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;
gap: var(--Spacing-x-half);
align-items: center;
background-color: var(--Main-Grey-90);
background-color: var(--UI-Grey-90);
opacity: 90%;
color: var(--UI-Input-Controls-Fill-Normal);
padding: var(--Spacing-x-half) var(--Spacing-x1);
border-radius: var(--Corner-radius-Medium);
border-radius: var(--Corner-radius-Small);
}
.content {

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

@@ -18,16 +18,13 @@
font-weight: var(--typography-Body-Bold-fontWeight);
transition: background-color 0.3s;
}
.summary:hover,
.accordionItem details[open] .summary {
background-color: var(--Base-Surface-Primary-light-Hover-alt, #f2ece6);
.summary:hover {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
}
.accordionItem.light .summary:hover,
.accordionItem.light details[open] .summary {
background-color: var(--Base-Surface-Primary-light-Hover, #f9f6f4);
.accordionItem.light .summary:hover {
background-color: var(--Base-Surface-Primary-light-Hover);
}
.accordionItem.subtle .summary:hover,
.accordionItem.subtle details[open] .summary {
.accordionItem.subtle .summary:hover {
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 {
border: none;
}
.accordion details > summary {
list-style: none;
}
.accordion details > summary::-webkit-details-marker {
display: none;
}