fix: make all h4 and subtitles capitalized

This commit is contained in:
Christel Westerberg
2024-07-15 15:07:23 +02:00
parent e8b9baf99e
commit 62310caa90
9 changed files with 26 additions and 15 deletions

View File

@@ -32,10 +32,10 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
<>
<Header>
<hgroup>
<Title as="h4" color="red" level="h1">
<Title as="h4" color="red" level="h1" textTransform="capitalize">
{formatMessage({ id: "Welcome" })}
</Title>
<Title as="h4" color="burgundy" level="h2">
<Title as="h4" color="burgundy" level="h2" textTransform="capitalize">
{user.name}
</Title>
</hgroup>

View File

@@ -64,10 +64,10 @@ export default function Form({ user }: EditFormProps) {
<>
<Header>
<hgroup>
<Title as="h4" color="red" level="h1">
<Title as="h4" color="red" level="h1" textTransform="capitalize">
{formatMessage({ id: "Welcome" })}
</Title>
<Title as="h4" color="burgundy" level="h2">
<Title as="h4" color="burgundy" level="h2" textTransform="capitalize">
{user.name}
</Title>
</hgroup>

View File

@@ -18,7 +18,9 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
<div className={styles.information}>
<header className={styles.title}>
<ScandicLogoIcon color="red" />
<Title as="h4">{hotel.name}</Title>
<Title as="h4" textTransform="capitalize">
{hotel.name}
</Title>
</header>
<div className={styles.description}>
<span>{`${hotel.address.streetAddress}, ${hotel.address.city}`}</span>

View File

@@ -30,7 +30,7 @@ export default async function JoinLoyaltyContact({
return (
<section>
<article className={styles.wrapper}>
<Title as="h4" level="h3">
<Title as="h4" level="h3" textTransform="capitalize">
{block.title}
</Title>
<ScandicFriends color="red" />

View File

@@ -9,7 +9,7 @@ import SectionLink from "@/components/Section/Link"
import Chip from "@/components/TempDesignSystem/Chip"
import Grids from "@/components/TempDesignSystem/Grids"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembershipLevelObject } from "@/utils/membershipLevel"
@@ -47,17 +47,18 @@ export default async function NextLevelBenefitsBlock({
<Lock height={16} />
{formatMessage({ id: "Level up to unlock" })}
</Chip>
<div>
<div className={styles.textContainer}>
<Body color="peach50" textAlign="center">
{formatMessage({ id: "As our" })} {nextLevel.name}
</Body>{" "}
<Subtitle
<Title
level="h4"
textTransform="capitalize"
color="pale"
textAlign="center"
textTransform="uppercase"
>
{benefit.title}
</Subtitle>
</Title>
</div>
</article>
))}

View File

@@ -8,3 +8,8 @@
justify-content: center;
padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7);
}
.textContainer {
display: grid;
gap: var(--Spacing-x1);
}

View File

@@ -21,9 +21,7 @@ export default async function Sidebar({ lang }: LangParams) {
return (
<aside className={styles.sidebar}>
<nav className={styles.nav}>
<Subtitle textTransform="regular" type="two">
{navigation.title}
</Subtitle>
<Subtitle type="two">{navigation.title}</Subtitle>
{navigation.menuItems.map((menuItem, idx) => (
<Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
<Divider color="beige" />

View File

@@ -35,6 +35,10 @@
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.center {
text-align: center;
}

View File

@@ -16,6 +16,7 @@ const config = {
textTransform: {
regular: styles.regular,
uppercase: styles.uppercase,
capitalize: styles.capitalize,
},
type: {
one: styles.one,
@@ -25,7 +26,7 @@ const config = {
defaultVariants: {
color: "burgundy",
textAlign: "left",
textTransform: "regular",
textTransform: "capitalize",
type: "one",
},
} as const