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

fix: make all h4 and subtitles capitalized

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
View File

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

4
components/Forms/Edit/Profile/index.tsx
View File

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

4
components/HotelReservation/SelectHotel/HotelCard/index.tsx
View File

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

2
components/Loyalty/Sidebar/JoinLoyalty/index.tsx
View File

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

11
components/MyPages/Blocks/Benefits/NextLevel/index.tsx
View File

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

5
components/MyPages/Blocks/Benefits/NextLevel/next.module.css
View File

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

4
components/MyPages/Sidebar/index.tsx
View File

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

4
components/TempDesignSystem/Text/Subtitle/subtitle.module.css
View File

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

3
components/TempDesignSystem/Text/Subtitle/variants.ts
View File

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