fix: design review comments

2024-07-10 11:01:42 +02:00
parent 19bfdf67f3
commit 6b5606fc8b
7 changed files with 61 additions and 22 deletions
--- a/components/Forms/Edit/Profile/form.module.css
+++ b/components/Forms/Edit/Profile/form.module.css
@@ -6,5 +6,5 @@

 .btns {
  display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Spacing-x2);
 }
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -47,9 +47,6 @@ export default function LoyaltyLevels() {

 function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
  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
  switch (level.level) {
@@ -93,7 +90,13 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
        <Level color="red" />
      </header>
      <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>
      <div className={styles.textContainer}>
        {level.benefits.map((benefit) => (
--- a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx
@@ -1,5 +1,7 @@
 import { useIntl } from "react-intl"

+import Body from "@/components/TempDesignSystem/Text/Body"
+
 import Row from "./Row"

 import styles from "./desktop.module.css"
@@ -24,7 +26,9 @@ export default function DesktopTable({ lang, transactions }: TableProps) {
            <tr>
              {tableHeadings.map((heading) => (
                <th key={heading} className={styles.th}>
-                  {formatMessage({ id: heading })}
+                  <Body textTransform="bold">
+                    {formatMessage({ id: heading })}
+                  </Body>
                </th>
              ))}
            </tr>
--- a/components/MyPages/Sidebar/index.tsx
+++ b/components/MyPages/Sidebar/index.tsx
@@ -5,7 +5,7 @@ import { serverClient } from "@/lib/trpc/server"

 import Divider from "@/components/TempDesignSystem/Divider"
 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 styles from "./sidebar.module.css"
@@ -21,9 +21,9 @@ export default async function Sidebar({ lang }: LangParams) {
  return (
    <aside className={styles.sidebar}>
      <nav className={styles.nav}>
-        <Title textTransform="regular" level="h5">
+        <Subtitle textTransform="regular" type="two">
          {navigation.title}
-        </Title>
+        </Subtitle>
        {navigation.menuItems.map((menuItem, idx) => (
          <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
            <Divider color="beige" />
--- a/components/TempDesignSystem/Form/Label/label.module.css
+++ b/components/TempDesignSystem/Form/Label/label.module.css
@@ -3,7 +3,7 @@
  font-family: "fira sans";
  font-weight: 400;
  letter-spacing: 0.03px;
-  line-height: 19px;
+  line-height: 120%;
  text-align: left;
 }

@@ -17,13 +17,17 @@ span.regular {
  order: 1;
 }

-input:focus ~ .label,
+input:active ~ .label,
 input:not(:placeholder-shown) ~ .label {
  display: block;
  font-size: 12px;
  transition: font-size 100ms ease;
 }

+input:focus ~ .label {
+  font-size: 12px;
+}
+
 input:placeholder-shown ~ .label {
  grid-row: 1/-1;
 }
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -101,22 +101,52 @@
  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 {
  color: var(--Scandic-Brand-Pale-Peach);
 }

 .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 {
  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 {
  font-family: var(--typography-Body-Regular-fontFamily);
  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: var(--typography-Body-Regular-fontWeight);
+  font-weight: 400;
  letter-spacing: var(--typography-Body-Regular-letterSpacing);
  line-height: var(--typography-Body-Regular-lineHeight);
 }
@@ -124,7 +154,7 @@
 .activeRegular {
  font-family: var(--typography-Body-Bold-fontFamily);
  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-weight: 500;
  letter-spacing: var(--typography-Body-Bold-letterSpacing);
  line-height: var(--typography-Body-Bold-lineHeight);
 }
@@ -132,7 +162,7 @@
 .small {
  font-family: var(--typography-Caption-Regular-fontFamily);
  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
+  font-weight: 400;
  letter-spacing: var(--typography-Caption-Regular-letterSpacing);
  line-height: var(--typography-Caption-Regular-lineHeight);
 }
@@ -140,7 +170,7 @@
 .activeSmall {
  font-family: var(--typography-Caption-Bold-fontFamily);
  font-size: var(--typography-Caption-Bold-fontSize);
-  font-weight: var(--typography-Caption-Bold-fontWeight);
+  font-weight: 500;
  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
  line-height: var(--typography-Caption-Bold-lineHeight);
 }
--- a/components/TempDesignSystem/Select/select.module.css
+++ b/components/TempDesignSystem/Select/select.module.css
@@ -55,15 +55,13 @@
 }

 .listBoxItem {
-  padding: var(--Spacing-x2);
+  padding: var(--Spacing-x1);
+  margin: var(--Spacing-x0) var(--Spacing-x2);
 }

 .listBoxItem[data-focused="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;
 }
-
-.listBoxItem[data-selected="true"] {
-  font-weight: 500;
-}