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

Merged in feat/SW-1888-tripadvisor-link-color (pull request #1594)

Browse Source 
Feat(SW-1888): Update text colors

* feat(SW-188): Update text colors


Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson
This commit is contained in:
Matilda Landström
2025-03-21 12:23:57 +00:00
parent 310296b55f
commit 369cc964f0
2 changed files with 29 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
View File

@@ -2,9 +2,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { ChevronRightSmallIcon, TripAdvisorIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import { getIntl } from "@/i18n"
import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -43,14 +40,18 @@ export default async function IntroSection({
<section className={styles.introSection}>
<div className={styles.mainContent}>
<div className={styles.titleContainer}>
<BiroScript tilted="medium" color="red">
{intl.formatMessage({ id: "Welcome to" })}
</BiroScript>
<Typography variant="Title/lg" className={styles.title}>
<h1>{hotelName}</h1>
<Typography variant="Title/Decorative/lg">
<span className={styles.script}>
{intl.formatMessage({ id: "Welcome to" })}
</span>
</Typography>
<Typography variant="Title/lg">
<h1 className={styles.title}>{hotelName}</h1>
</Typography>
</div>
<Body color="uiTextMediumContrast">{formattedLocationText}</Body>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.bodyText}>{formattedLocationText}</p>
</Typography>
{formattedTripAdvisorText && (
<span className={styles.tripAdvisorText}>
<TripAdvisorIcon />
@@ -59,7 +60,9 @@ export default async function IntroSection({
)}
</div>
<div className={styles.subtitleContent}>
<Preamble>{hotelDescription}</Preamble>
<Typography variant="Body/Lead text">
<p>{hotelDescription}</p>
</Typography>
<Link
className={styles.introLink}
color="burgundy"

31
apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
View File

@@ -19,32 +19,33 @@
display: flex;
gap: var(--Space-x05);
align-items: center;
color: var(--Text-Interactive-Secondary);
color: var(--Text-Secondary);
}
.tripAdvisorText svg,
.tripAdvisorText svg * {
fill: var(--Text-Interactive-Secondary);
fill: var(--Icon-Default);
}
.title {
color: var(--Text-Heading);
}
.bodyText {
color: var(--Text-Secondary);
}
.script {
transform: rotate(-4deg);
color: var(--Text-Accent-Primary);
}
.titleContainer {
display: grid;
gap: var(--Spacing-x2);
}
.introLink {
text-decoration-color: var(--Scandic-Peach-80);
width: fit-content;
}
@media screen and (min-width: 768px) {
.titleContainer {
display: grid;
gap: var(--Spacing-x-one-and-half);
}
}
@media screen and (min-width: 1367px) {
.titleContainer {
gap: var(--Spacing-x0);
}
}