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

fix(BOOK-151): Added correct background color to all hotels section on destination overview page

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-09-11 08:41:17 +00:00
parent 7dee6d5083
commit 136610a51a
3 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/hotelsSection.module.css
View File

@@ -1,11 +1,17 @@
.container {
width: var(--max-width-content);
margin: 0 auto;
display: grid;
gap: var(--Spacing-x4);
padding: var(--Spacing-x5) 0 var(--Spacing-x7);
gap: var(--Space-x4);
padding: var(--Space-x5) 0 var(--Space-x7);
}
.heading {
color: var(--Text-Heading);
}
@media screen and (min-width: 768px) {
.container {
gap: var(--Spacing-x7);
gap: var(--Space-x7);
}
}

14
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/index.tsx
View File

@@ -1,4 +1,4 @@
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getDestinationsList } from "@/lib/trpc/memoizedRequests"
@@ -18,11 +18,13 @@ export default async function HotelsSection() {
return (
<section className={styles.container}>
<Title level="h4" as="h2" textAlign="center">
{intl.formatMessage({
defaultMessage: "Explore all our hotels",
})}
</Title>
<Typography variant="Title/md">
<h4 className={styles.heading}>
{intl.formatMessage({
defaultMessage: "Explore all our hotels",
})}
</h4>
</Typography>
<DestinationsList destinations={destinations} />
</section>
)

21
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/destinationOverviewPage.module.css
View File

@@ -15,37 +15,30 @@
}
.main {
display: grid;
gap: var(--Spacing-x9);
padding: var(--Spacing-x7) 0 var(--Spacing-x9);
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Space-x7) 0 var(--Space-x9);
}
.blocks {
display: grid;
gap: var(--Spacing-x9);
width: 100%;
max-width: var(--max-width-content);
gap: var(--Space-x9);
width: var(--max-width-content);
margin: 0 auto;
}
.hotelsAccordions {
width: 100%;
max-width: var(--max-width-content);
margin: 0 auto;
background-color: var(--Background-Primary);
}
.headerContainer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Space-x4);
padding: var(--Space-x4) var(--Space-x2);
background: var(--Surface-Secondary-Default);
align-items: center;
background-color: var(--Base-Surface-Subtle-Normal);
.heading {
color: var(--Text-Interactive-Default);
color: var(--Text-Heading);
text-align: center;
}