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

fix: design review comments

Browse Source
This commit is contained in:
Christel Westerberg
2024-07-10 11:01:42 +02:00
parent 19bfdf67f3
commit 6b5606fc8b
7 changed files with 61 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Forms/Edit/Profile/form.module.css
View File

@@ -6,5 +6,5 @@
.btns { .btns {
display: flex; display: flex;
gap: var(--Spacing-x-half); gap: var(--Spacing-x2);
} }

11
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -47,9 +47,6 @@ export default function LoyaltyLevels() {
function LevelCard({ formatMessage, lang, level }: LevelCardProps) { function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "Points" })} ` const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "Points" })} `
const qualifications = level.requiredNights
? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
: pointsString
let Level = null let Level = null
switch (level.level) { switch (level.level) {
@@ -93,7 +90,13 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
<Level color="red" /> <Level color="red" />
</header> </header>
<Title textAlign="center" level="h5"> <Title textAlign="center" level="h5">
{qualifications} {level.requiredPoints}{" "}
{level.requiredNights ? (
<Title textAlign="center" level="h5" color="red">
{formatMessage({ id: "or" })} {level.requiredNights}{" "}
{formatMessage({ id: "nights" })}
</Title>
) : null}
</Title> </Title>
<div className={styles.textContainer}> <div className={styles.textContainer}>
{level.benefits.map((benefit) => ( {level.benefits.map((benefit) => (

4
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx
View File

@@ -1,5 +1,7 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@/components/TempDesignSystem/Text/Body"
import Row from "./Row" import Row from "./Row"
import styles from "./desktop.module.css" import styles from "./desktop.module.css"
@@ -24,7 +26,9 @@ export default function DesktopTable({ lang, transactions }: TableProps) {
<tr> <tr>
{tableHeadings.map((heading) => ( {tableHeadings.map((heading) => (
<th key={heading} className={styles.th}> <th key={heading} className={styles.th}>
<Body textTransform="bold">
{formatMessage({ id: heading })} {formatMessage({ id: heading })}
</Body>
</th> </th>
))} ))}
</tr> </tr>

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

@@ -5,7 +5,7 @@ import { serverClient } from "@/lib/trpc/server"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import styles from "./sidebar.module.css" import styles from "./sidebar.module.css"
@@ -21,9 +21,9 @@ 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}>
<Title textTransform="regular" level="h5"> <Subtitle textTransform="regular" type="two">
{navigation.title} {navigation.title}
</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" />

8
components/TempDesignSystem/Form/Label/label.module.css
View File

@@ -3,7 +3,7 @@
font-family: "fira sans"; font-family: "fira sans";
font-weight: 400; font-weight: 400;
letter-spacing: 0.03px; letter-spacing: 0.03px;
line-height: 19px; line-height: 120%;
text-align: left; text-align: left;
} }
@@ -17,13 +17,17 @@ span.regular {
order: 1; order: 1;
} }
input:focus ~ .label, input:active ~ .label,
input:not(:placeholder-shown) ~ .label { input:not(:placeholder-shown) ~ .label {
display: block; display: block;
font-size: 12px; font-size: 12px;
transition: font-size 100ms ease; transition: font-size 100ms ease;
} }
input:focus ~ .label {
font-size: 12px;
}
input:placeholder-shown ~ .label { input:placeholder-shown ~ .label {
grid-row: 1/-1; grid-row: 1/-1;
} }

40
components/TempDesignSystem/Link/link.module.css
View File

@@ -101,22 +101,52 @@
color: var(--Base-Text-High-contrast); color: var(--Base-Text-High-contrast);
} }
.burgundy:hover,
.burgundy:active {
color: var(--Base-Button-Text-On-Fill-Hover);
}
.burgundy:hover *,
.burgundy:active * {
fill: var(--Base-Button-Text-On-Fill-Hover);
}
.pale { .pale {
color: var(--Scandic-Brand-Pale-Peach); color: var(--Scandic-Brand-Pale-Peach);
} }
.peach80 { .peach80 {
color: var(--Scandic-Peach-80); color: var(--Primary-Light-On-Surface-Accent);
}
.peach80:hover,
.peach80:active {
color: var(--Primary-Light-On-Surface-Hover);
}
.peach80:hover *,
.peach80:active * {
fill: var(--Primary-Light-On-Surface-Hover);
} }
.white { .white {
color: var(--Base-Button-Primary-On-Fill-Normal); color: var(--Base-Button-Primary-On-Fill-Normal);
} }
.white:hover,
.white:active {
color: var(--Base-Button-Primary-On-Fill-Hover);
}
.white:hover *,
.white:active * {
fill: var(--Base-Button-Primary-On-Fill-Hover);
}
.regular { .regular {
font-family: var(--typography-Body-Regular-fontFamily); font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize); font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight); font-weight: 400;
letter-spacing: var(--typography-Body-Regular-letterSpacing); letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight); line-height: var(--typography-Body-Regular-lineHeight);
} }
@@ -124,7 +154,7 @@
.activeRegular { .activeRegular {
font-family: var(--typography-Body-Bold-fontFamily); font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize); font-size: var(--typography-Body-Bold-fontSize);
font-weight: var(--typography-Body-Bold-fontWeight); font-weight: 500;
letter-spacing: var(--typography-Body-Bold-letterSpacing); letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight); line-height: var(--typography-Body-Bold-lineHeight);
} }
@@ -132,7 +162,7 @@
.small { .small {
font-family: var(--typography-Caption-Regular-fontFamily); font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize); font-size: var(--typography-Caption-Regular-fontSize);
font-weight: var(--typography-Caption-Regular-fontWeight); font-weight: 400;
letter-spacing: var(--typography-Caption-Regular-letterSpacing); letter-spacing: var(--typography-Caption-Regular-letterSpacing);
line-height: var(--typography-Caption-Regular-lineHeight); line-height: var(--typography-Caption-Regular-lineHeight);
} }
@@ -140,7 +170,7 @@
.activeSmall { .activeSmall {
font-family: var(--typography-Caption-Bold-fontFamily); font-family: var(--typography-Caption-Bold-fontFamily);
font-size: var(--typography-Caption-Bold-fontSize); font-size: var(--typography-Caption-Bold-fontSize);
font-weight: var(--typography-Caption-Bold-fontWeight); font-weight: 500;
letter-spacing: var(--typography-Caption-Bold-letterSpacing); letter-spacing: var(--typography-Caption-Bold-letterSpacing);
line-height: var(--typography-Caption-Bold-lineHeight); line-height: var(--typography-Caption-Bold-lineHeight);
} }

10
components/TempDesignSystem/Select/select.module.css
View File

@@ -55,15 +55,13 @@
} }
.listBoxItem { .listBoxItem {
padding: var(--Spacing-x2); padding: var(--Spacing-x1);
margin: var(--Spacing-x0) var(--Spacing-x2);
} }
.listBoxItem[data-focused="true"], .listBoxItem[data-focused="true"],
.listBoxItem[data-selected="true"] { .listBoxItem[data-selected="true"] {
background: var(--UI-Input-Controls-Surface-Hover, var(--Scandic-Blue-00)); background: var(--UI-Input-Controls-Surface-Hover);
border-radius: var(--Corner-radius-Medium,);
outline: none; outline: none;
} }
.listBoxItem[data-selected="true"] {
font-weight: 500;
}