fix(SW-812): styling fixes for the header and related components

2024-11-08 12:12:12 +01:00
parent d8751b3fea
commit fe6582ccbb
47 changed files with 315 additions and 134 deletions
--- a/components/Header/MainMenu/Avatar/avatar.module.css
+++ b/components/Header/MainMenu/Avatar/avatar.module.css
@@ -6,11 +6,9 @@
  border-radius: var(--Corner-radius-Rounded);
  width: 2rem;
  height: 2rem;
-  background-color: var(--Main-Grey-40);
+  background-color: var(--UI-Grey-40);
 }

 .initials {
-  font-size: 0.75rem;
-  color: var(--Base-Text-Inverted);
  background-color: var(--Base-Icon-Low-contrast);
 }
--- a/components/Header/MainMenu/Avatar/index.tsx
+++ b/components/Header/MainMenu/Avatar/index.tsx
@@ -1,5 +1,6 @@
 import { PersonIcon } from "@/components/Icons"
 import Image from "@/components/Image"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"

 import styles from "./avatar.module.css"

@@ -13,7 +14,11 @@ export default function Avatar({ image, initials }: AvatarProps) {
    element = <Image src={image.src} alt={image.alt} width={28} height={28} />
  } else if (initials) {
    classNames.push(styles.initials)
-    element = <span>{initials}</span>
+    element = (
+      <Footnote type="label" color="white" textTransform="uppercase" asChild>
+        <span>{initials}</span>
+      </Footnote>
+    )
  }
  return <span className={classNames.join(" ")}>{element}</span>
 }
--- a/components/Header/MainMenu/MainMenuButton/menuButton.module.css
+++ b/components/Header/MainMenu/MainMenuButton/menuButton.module.css
@@ -1,14 +1,14 @@
 .menuButton {
  display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Spacing-x-half);
  align-items: center;
  width: 100%;
  background-color: transparent;
  color: var(--Base-Text-High-contrast);
  border-width: 0;
-  padding: 0;
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
  cursor: pointer;
  font-family: var(--typography-Body-Bold-fontFamily);
-  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
  font-size: var(--typography-Body-Bold-fontSize);
 }
--- a/components/Header/MainMenu/MyPagesMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenu/index.tsx
@@ -5,8 +5,8 @@ import { useIntl } from "react-intl"

 import useDropdownStore from "@/stores/main-menu"

-import { ChevronDownIcon } from "@/components/Icons"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { ChevronDownSmallIcon } from "@/components/Icons"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import { getInitials } from "@/utils/user"
@@ -47,12 +47,12 @@ export default function MyPagesMenu({
        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
      >
        <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        <Subtitle type="two" asChild>
+        <Body textTransform="bold" color="textHighContrast" asChild>
          <span>
            {intl.formatMessage({ id: "Hi" })} {user.firstName}!
          </span>
-        </Subtitle>
-        <ChevronDownIcon
+        </Body>
+        <ChevronDownSmallIcon
          className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
          color="red"
        />
--- a/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
+++ b/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
@@ -5,7 +5,6 @@
@media screen and (min-width: 768px) {
  .myPagesMenu {
    display: block;
-    position: relative;
  }

  .chevron {
@@ -18,7 +17,7 @@

  .dropdown {
    position: absolute;
-    top: 2.875rem; /* 2.875rem is the height of the main menu + bottom padding */
+    top: calc(3.5rem - 2px); /* 3.5rem is the height of the main menu + bottom padding. */
    right: 0;
    background-color: var(--Base-Surface-Primary-light-Normal);
    border-radius: var(--Corner-radius-Large);
--- a/components/Header/MainMenu/MyPagesMenuContent/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenuContent/index.tsx
@@ -63,7 +63,8 @@ export default function MyPagesMenuContent({
                    href={link.originalUrl || link.url}
                    onClick={toggleOpenStateFn}
                    variant="menu"
-                    className={`${styles.link} ${menuItem.display_sign_out_link ? styles.smallLink : ""}`}
+                    weight={menuItem.display_sign_out_link ? undefined : "bold"}
+                    className={styles.link}
                  >
                    {link.linkText}
                    <ArrowRightIcon className={styles.arrow} color="burgundy" />
@@ -76,7 +77,7 @@ export default function MyPagesMenuContent({
                    href={logout[lang]}
                    prefetch={false}
                    variant="menu"
-                    className={`${styles.link} ${styles.smallLink}`}
+                    className={styles.link}
                  >
                    {intl.formatMessage({ id: "Log out" })}
                  </Link>
--- a/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
+++ b/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
@@ -32,14 +32,6 @@
  list-style: none;
 }

-.link.smallLink {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: var(--typography-Body-Regular-fontWeight);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
-}
-
 .link:not(:hover) .arrow {
  opacity: 0;
 }
--- a/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
@@ -54,7 +54,7 @@ export default async function MyPagesMenuWrapper() {
          trackingId="loginStartNewTopMenu"
        >
          <Avatar />
-          <span className={styles.userName}>
+          <span className={styles.loginText}>
            {intl.formatMessage({ id: "Log in/Join" })}
          </span>
        </LoginButton>
--- a/components/Header/MainMenu/MyPagesMenuWrapper/myPagesMenuWrapper.module.css
+++ b/components/Header/MainMenu/MyPagesMenuWrapper/myPagesMenuWrapper.module.css
@@ -4,12 +4,8 @@
  gap: var(--Spacing-x1);
 }

-.userName {
-  display: none;
-}
-
-@media screen and (min-width: 768px) {
-  .userName {
-    display: inline;
+@media screen and (max-width: 767px) {
+  .loginText {
+    display: none;
  }
 }
--- a/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
@@ -41,7 +41,7 @@ export default function MegaMenu({
            className={styles.backButton}
            onClick={() => toggleMegaMenu(false)}
          >
-            <ChevronLeftIcon color="red" />
+            <ChevronLeftIcon color="red" height={20} width={20} />
            <Subtitle type="one" color="burgundy" asChild>
              <span>{title}</span>
            </Subtitle>
@@ -55,6 +55,7 @@ export default function MegaMenu({
              href={seeAllLink.link.url}
              color="burgundy"
              variant="icon"
+              weight="bold"
              onClick={handleNavigate}
            >
              {seeAllLink.title}
@@ -65,7 +66,12 @@ export default function MegaMenu({
        <ul className={styles.submenus}>
          {submenu.map((item) => (
            <li key={item.title} className={styles.submenusItem}>
-              <Caption textTransform="uppercase" asChild>
+              <Caption
+                type="label"
+                color="uiTextPlaceholder"
+                textTransform="uppercase"
+                asChild
+              >
                <span className={styles.submenuTitle}>{item.title}</span>
              </Caption>
              <ul className={styles.submenu}>
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
@@ -4,7 +4,7 @@ import { useRef } from "react"

 import useDropdownStore from "@/stores/main-menu"

-import { ChevronDownIcon, ChevronRightIcon } from "@/components/Icons"
+import { ChevronDownSmallIcon, ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
@@ -41,9 +41,14 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
      >
        {title}
        {isMobile ? (
-          <ChevronRightIcon className={`${styles.chevron}`} color="red" />
+          <ChevronRightIcon
+            className={`${styles.chevron}`}
+            color="red"
+            height={20}
+            width={20}
+          />
        ) : (
-          <ChevronDownIcon
+          <ChevronDownSmallIcon
            className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
            color="red"
          />
@@ -67,7 +72,8 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
  ) : (
    <Link
      className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
-      color="burgundy"
+      variant="navigation"
+      weight="bold"
      href={link!.url}
    >
      {title}
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
@@ -1,3 +1,7 @@
+.navigationMenuItem {
+  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
+}
+
 .navigationMenuItem.mobile {
  display: flex;
  justify-content: space-between;
@@ -38,8 +42,7 @@
  .dropdown {
    display: none;
    position: absolute;
-    top: var(--main-menu-desktop-height);
-    /* top: var(--Spacing-x5); */
+    top: calc(3.5rem - 2px); /* 3.5rem is the height of the main menu + bottom padding. */
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--Corner-radius-Large);
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css
+++ b/components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css
@@ -3,7 +3,7 @@
  margin: 0;
  justify-content: space-between;
  align-items: center;
-  gap: var(--Spacing-x4);
+  gap: var(--Spacing-x3);
  display: none;
 }

--- a/components/Header/MainMenu/mainMenu.module.css
+++ b/components/Header/MainMenu/mainMenu.module.css
@@ -5,6 +5,7 @@
 }

 .nav {
+  position: relative;
  max-width: var(--max-width-navigation);
  margin: 0 auto;
  display: grid;
--- a/components/Header/TopMenu/index.tsx
+++ b/components/Header/TopMenu/index.tsx
@@ -2,6 +2,8 @@ import { getHeader, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"

 import { GiftIcon, SearchIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
+import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"

 import HeaderLink from "../HeaderLink"
@@ -23,20 +25,27 @@ export default async function TopMenu() {
    <div className={styles.topMenu}>
      <div className={styles.content}>
        {header.data.topLink.link ? (
-          <HeaderLink
-            className={styles.topLink}
-            href={header.data.topLink.link.url}
-          >
-            <GiftIcon width={20} height={20} color="burgundy" />
-            {header.data.topLink.title}
-          </HeaderLink>
+          <Caption type="regular" color="textMediumContrast" asChild>
+            <Link
+              href={header.data.topLink.link.url}
+              color="peach80"
+              variant="icon"
+            >
+              <GiftIcon width={20} height={20} />
+              {header.data.topLink.title}
+            </Link>
+          </Caption>
        ) : null}
        <div className={styles.options}>
          <LanguageSwitcher type="desktopHeader" urls={languages.urls} />
-          <HeaderLink href="#">
-            <SearchIcon width={20} height={20} color="burgundy" />
-            {intl.formatMessage({ id: "Find booking" })}
-          </HeaderLink>
+
+          <Caption type="regular" color="textMediumContrast" asChild>
+            <Link href="#" color="peach80" variant="icon">
+              <SearchIcon width={20} height={20} />
+              {intl.formatMessage({ id: "Find booking" })}
+            </Link>
+          </Caption>
+          <HeaderLink href="#"></HeaderLink>
        </div>
      </div>
    </div>
--- a/components/Header/TopMenu/topMenu.module.css
+++ b/components/Header/TopMenu/topMenu.module.css
@@ -2,7 +2,6 @@
  display: none;
  background-color: var(--Base-Surface-Subtle-Normal);
  padding: var(--Spacing-x2);
-  border-bottom: 1px solid var(--Base-Border-Subtle);
 }

 .content {