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/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -81,7 +81,7 @@ export default async function SelectHotelPage({
            keepSearchParams
          >
            {intl.formatMessage({ id: "Show map" })}
-            <ChevronRightIcon color="burgundy" />
+            <ChevronRightIcon color="burgundy" height={20} width={20} />
          </Link>
        </div>
        <MobileMapButtonContainer city={searchParams.city} />
--- a/app/globals.css
+++ b/app/globals.css
@@ -106,14 +106,14 @@
  --max-width-navigation: 89.5rem;

  --main-menu-mobile-height: 75px;
-  --main-menu-desktop-height: 118px;
+  --main-menu-desktop-height: 129px;
  --booking-widget-mobile-height: 75px;
  --booking-widget-desktop-height: 77px;
  --hotel-page-map-desktop-width: 23.75rem;

  /* Z-INDEX */
-  --header-z-index: 10;
-  --menu-overlay-z-index: 10;
+  --header-z-index: 11;
+  --menu-overlay-z-index: 11;
  --dialog-z-index: 9;
  --sidepeek-z-index: 100;
  --lightbox-z-index: 150;
--- a/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Pagination/index.tsx
+++ b/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Pagination/index.tsx
@@ -41,7 +41,11 @@ export default function Pagination({
          handlePageChange(currentPage - 1)
        }}
      >
-        <ChevronRightIcon className={styles.chevronLeft} />
+        <ChevronRightIcon
+          className={styles.chevronLeft}
+          height={20}
+          width={20}
+        />
      </PaginationButton>
      {[...Array(pageCount)].map((_, idx) => (
        <PaginationButton
@@ -61,7 +65,7 @@ export default function Pagination({
          handlePageChange(currentPage + 1)
        }}
      >
-        <ChevronRightIcon />
+        <ChevronRightIcon height={20} width={20} />
      </PaginationButton>
    </div>
  )
--- a/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx
+++ b/components/Blocks/DynamicContent/Stays/ShowMoreButton/index.tsx
@@ -24,7 +24,7 @@ export default function ShowMoreButton({
        theme="base"
        intent="text"
      >
-        <ChevronDownIcon />
+        <ChevronDownIcon width={20} height={20} />
        {intl.formatMessage({ id: "Show more" })}
      </Button>
    </div>
--- a/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
+++ b/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
@@ -11,7 +11,12 @@ export default function BreadcrumbsSkeleton() {
          <span className={styles.homeLink} color="peach80">
            <HouseIcon color="peach80" />
          </span>
-          <ChevronRightIcon aria-hidden="true" color="peach80" />
+          <ChevronRightIcon
+            aria-hidden="true"
+            color="peach80"
+            height={20}
+            width={20}
+          />
        </li>

        <li className={styles.listItem}>
--- 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 {
--- a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
@@ -100,7 +100,7 @@ export default function SectionAccordion({
              wrapping
            >
              {intl.formatMessage({ id: "Modify" })}{" "}
-              <ChevronDownIcon color="burgundy" />
+              <ChevronDownIcon color="burgundy" width={20} height={20} />
            </Button>
          )}
        </header>
--- a/components/HotelReservation/ReadMore/index.tsx
+++ b/components/HotelReservation/ReadMore/index.tsx
@@ -23,7 +23,7 @@ export default function ReadMore({ label, hotelId }: ReadMoreProps) {
      className={styles.detailsButton}
    >
      {label}
-      <ChevronRightIcon color="burgundy" />
+      <ChevronRightIcon color="burgundy" height={20} width={20} />
    </Button>
  )
 }
--- a/components/Icons/ChevronDown.tsx
+++ b/components/Icons/ChevronDown.tsx
@@ -11,16 +11,16 @@ export default function ChevronDownIcon({
  return (
    <svg
      className={classNames}
-      fill="none"
-      height="20"
-      viewBox="0 0 20 20"
-      width="20"
      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
      {...props}
    >
      <path
-        d="M10.422 11.9374L16.2449 6.1145C16.4254 5.93395 16.6459 5.84193 16.9063 5.83846C17.1668 5.83499 17.3873 5.92353 17.5678 6.10409C17.7484 6.28464 17.8386 6.50513 17.8386 6.76554C17.8386 7.02596 17.7484 7.24645 17.5678 7.427L11.4011 13.6041C11.2553 13.7499 11.1025 13.8523 10.9428 13.9114C10.7831 13.9704 10.6095 13.9999 10.422 13.9999C10.2345 13.9999 10.0609 13.9704 9.90114 13.9114C9.74142 13.8523 9.58864 13.7499 9.44281 13.6041L3.27614 7.43742C3.09558 7.25686 3.00357 7.03464 3.0001 6.77075C2.99663 6.50686 3.08517 6.28464 3.26572 6.10409C3.44628 5.92353 3.66676 5.83325 3.92718 5.83325C4.1876 5.83325 4.40808 5.92353 4.58864 6.10409L10.422 11.9374Z"
-        fill="#4D001B"
+        d="M11.9936 14.436L19.5847 7.43997C19.8278 7.21597 20.1164 7.10597 20.4506 7.10997C20.7848 7.11397 21.0735 7.22797 21.3165 7.45197C21.5596 7.67597 21.6811 7.94197 21.6811 8.24997C21.6811 8.55797 21.5596 8.82397 21.3165 9.04797L13.3738 16.356C13.1742 16.54 12.9571 16.674 12.7228 16.758C12.4884 16.842 12.2453 16.884 11.9936 16.884C11.7419 16.884 11.4988 16.842 11.2644 16.758C11.0301 16.674 10.813 16.54 10.6134 16.356L2.67069 9.03597C2.42763 8.81197 2.30827 8.54797 2.31261 8.24397C2.31695 7.93997 2.44065 7.67597 2.68371 7.45197C2.92676 7.22797 3.21539 7.11597 3.54959 7.11597C3.88379 7.11597 4.17242 7.22797 4.41548 7.45197L11.9936 14.436Z"
+        fill="#26201E"
      />
    </svg>
  )
--- a/components/Icons/ChevronDownSmall.tsx
+++ b/components/Icons/ChevronDownSmall.tsx
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ChevronDownSmallIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M11.6876 15.1482C11.5558 15.1482 11.4313 15.1243 11.3142 15.0766C11.1972 15.0289 11.0909 14.9574 10.9955 14.862L6.2818 10.1483C6.09393 9.96039 6 9.73203 6 9.46317C6 9.19432 6.0954 8.96449 6.2862 8.77369C6.477 8.58289 6.70683 8.48749 6.97569 8.48749C7.24454 8.48749 7.47351 8.58203 7.6626 8.77111L11.685 12.7935L15.7074 8.77111C15.8965 8.58203 16.1255 8.48749 16.3943 8.48749C16.6632 8.48749 16.893 8.58289 17.0838 8.77369C17.2746 8.96449 17.37 9.19432 17.37 9.46317C17.37 9.73203 17.2761 9.96039 17.0882 10.1483L12.3745 14.862C12.2791 14.9574 12.1737 15.0289 12.0584 15.0766C11.943 15.1243 11.8194 15.1482 11.6876 15.1482Z"
+        fill="#26201E"
+      />
+    </svg>
+  )
+}
--- a/components/Icons/ChevronLeft.tsx
+++ b/components/Icons/ChevronLeft.tsx
@@ -12,15 +12,15 @@ export default function ChevronLeftIcon({
    <svg
      className={classNames}
      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
      fill="none"
      {...props}
    >
      <path
-        d="M7.75 10.0001L13.5729 15.823C13.7535 16.0036 13.8455 16.2258 13.849 16.4897C13.8524 16.7536 13.7639 16.9758 13.5833 17.1563C13.4028 17.3369 13.1806 17.4272 12.9167 17.4272C12.6528 17.4272 12.4306 17.3369 12.25 17.1563L6.08333 10.9793C5.9375 10.8334 5.83507 10.6807 5.77604 10.5209C5.71701 10.3612 5.6875 10.1876 5.6875 10.0001C5.6875 9.8126 5.71701 9.63899 5.77604 9.47927C5.83507 9.31954 5.9375 9.16677 6.08333 9.02093L12.25 2.85426C12.4306 2.67371 12.651 2.5817 12.9115 2.57822C13.1719 2.57475 13.3924 2.66329 13.5729 2.84385C13.7535 3.0244 13.8438 3.24663 13.8438 3.51051C13.8438 3.7744 13.7535 3.99663 13.5729 4.17718L7.75 10.0001Z"
-        fill="#CD0921"
+        d="M9.45002 12L16.7375 19.2875C16.9709 19.5209 17.0854 19.7959 17.0813 20.1125C17.0771 20.4292 16.9584 20.7042 16.725 20.9375C16.4917 21.1709 16.2167 21.2875 15.9 21.2875C15.5834 21.2875 15.3084 21.1709 15.075 20.9375L7.45002 13.325C7.25836 13.1334 7.11877 12.925 7.03127 12.7C6.94377 12.475 6.90002 12.2417 6.90002 12C6.90002 11.7584 6.94377 11.525 7.03127 11.3C7.11877 11.075 7.25836 10.8667 7.45002 10.675L15.075 3.05004C15.3084 2.8167 15.5854 2.70212 15.9063 2.70629C16.2271 2.71045 16.5042 2.8292 16.7375 3.06254C16.9709 3.29587 17.0875 3.57087 17.0875 3.88754C17.0875 4.2042 16.9709 4.4792 16.7375 4.71254L9.45002 12Z"
+        fill="#26201E"
      />
    </svg>
  )
--- a/components/Icons/ChevronLeftSmall.tsx
+++ b/components/Icons/ChevronLeftSmall.tsx
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ChevronLeftSmallIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M10.75 12L14.625 15.875C14.8 16.05 14.8875 16.2646 14.8875 16.5187C14.8875 16.7729 14.8 16.9916 14.625 17.175C14.45 17.3583 14.2333 17.4521 13.975 17.4562C13.7166 17.4604 13.4958 17.3708 13.3125 17.1875L8.78745 12.6625C8.69578 12.5708 8.62703 12.4687 8.5812 12.3562C8.53537 12.2437 8.51245 12.125 8.51245 12C8.51245 11.875 8.53537 11.7562 8.5812 11.6437C8.62703 11.5312 8.69578 11.4291 8.78745 11.3375L13.3125 6.81247C13.4958 6.62913 13.7166 6.53955 13.975 6.54372C14.2333 6.54788 14.45 6.64163 14.625 6.82497C14.8 7.0083 14.8875 7.22705 14.8875 7.48122C14.8875 7.73538 14.8 7.94997 14.625 8.12497L10.75 12Z"
+        fill="#26201E"
+      />
+    </svg>
+  )
+}
--- a/components/Icons/ChevronRight.tsx
+++ b/components/Icons/ChevronRight.tsx
@@ -12,15 +12,15 @@ export default function ChevronRightIcon({
    <svg
      className={classNames}
      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
      fill="none"
      {...props}
    >
      <path
-        d="M12.1042 9.99967L6.28125 4.17676C6.10069 3.9962 6.00868 3.77572 6.00521 3.5153C6.00174 3.25488 6.09028 3.0344 6.27083 2.85384C6.45139 2.67329 6.67188 2.58301 6.93229 2.58301C7.19271 2.58301 7.41319 2.67329 7.59375 2.85384L13.7708 9.02051C13.9167 9.16634 14.0191 9.31912 14.0781 9.47884C14.1372 9.63856 14.1667 9.81217 14.1667 9.99967C14.1667 10.1872 14.1372 10.3608 14.0781 10.5205C14.0191 10.6802 13.9167 10.833 13.7708 10.9788L7.60417 17.1455C7.42361 17.3261 7.20139 17.4181 6.9375 17.4215C6.67361 17.425 6.45139 17.3365 6.27083 17.1559C6.09028 16.9754 6 16.7549 6 16.4945C6 16.234 6.09028 16.0136 6.27083 15.833L12.1042 9.99967Z"
-        fill="#CD0921"
+        d="M14.5375 12L7.24999 4.71251C7.01665 4.47918 6.90207 4.2021 6.90624 3.88126C6.9104 3.56043 7.02915 3.28335 7.26249 3.05001C7.49582 2.81668 7.7729 2.70001 8.09374 2.70001C8.41457 2.70001 8.69165 2.81668 8.92499 3.05001L16.5375 10.675C16.7292 10.8667 16.8687 11.075 16.9562 11.3C17.0437 11.525 17.0875 11.7583 17.0875 12C17.0875 12.2417 17.0437 12.475 16.9562 12.7C16.8687 12.925 16.7292 13.1333 16.5375 13.325L8.91249 20.95C8.67915 21.1833 8.40415 21.2979 8.08749 21.2938C7.77082 21.2896 7.49582 21.1708 7.26249 20.9375C7.02915 20.7042 6.91249 20.4271 6.91249 20.1063C6.91249 19.7854 7.02915 19.5083 7.26249 19.275L14.5375 12Z"
+        fill="#26201E"
      />
    </svg>
  )
--- a/components/Icons/ChevronUp.tsx
+++ b/components/Icons/ChevronUp.tsx
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ChevronUpIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M12 9.55786L4.40885 16.5539C4.1658 16.7779 3.87717 16.8879 3.54297 16.8839C3.20877 16.8799 2.92014 16.7659 2.67708 16.5419C2.43403 16.3179 2.3125 16.0519 2.3125 15.7439C2.3125 15.4359 2.43403 15.1699 2.67708 14.9459L10.6198 7.63786C10.8194 7.45386 11.0365 7.31986 11.2708 7.23586C11.5052 7.15186 11.7483 7.10986 12 7.10986C12.2517 7.10986 12.4948 7.15186 12.7292 7.23586C12.9635 7.31986 13.1806 7.45386 13.3802 7.63786L21.3229 14.9579C21.566 15.1819 21.6853 15.4459 21.681 15.7499C21.6766 16.0539 21.553 16.3179 21.3099 16.5419C21.0668 16.7659 20.7782 16.8779 20.444 16.8779C20.1098 16.8779 19.8212 16.7659 19.5781 16.5419L12 9.55786Z"
+        fill="#26201E"
+      />
+    </svg>
+  )
+}
--- a/components/Icons/ChevronUpSmall.tsx
+++ b/components/Icons/ChevronUpSmall.tsx
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ChevronUpSmallIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M11.685 10.8421L7.6626 14.8645C7.47351 15.0536 7.24454 15.1482 6.97569 15.1482C6.70683 15.1482 6.477 15.0528 6.2862 14.862C6.0954 14.6712 6 14.4413 6 14.1725C6 13.9036 6.09393 13.6753 6.2818 13.4874L10.9955 8.77369C11.0909 8.67829 11.1963 8.60674 11.3116 8.55904C11.427 8.51134 11.5506 8.48749 11.6824 8.48749C11.8142 8.48749 11.9387 8.51134 12.0558 8.55904C12.1728 8.60674 12.2791 8.67829 12.3745 8.77369L17.0882 13.4874C17.2761 13.6753 17.37 13.9036 17.37 14.1725C17.37 14.4413 17.2746 14.6712 17.0838 14.862C16.893 15.0528 16.6632 15.1482 16.3943 15.1482C16.1255 15.1482 15.8965 15.0536 15.7074 14.8645L11.685 10.8421Z"
+        fill="#26201E"
+      />
+    </svg>
+  )
+}
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -19,9 +19,13 @@ import {
  CheckCircleIcon,
  CheckIcon,
  ChevronDownIcon,
+  ChevronDownSmallIcon,
  ChevronLeftIcon,
+  ChevronLeftSmallIcon,
  ChevronRightIcon,
  ChevronRightSmallIcon,
+  ChevronUpIcon,
+  ChevronUpSmallIcon,
  CloseIcon,
  CloseLargeIcon,
  CoffeeAltIcon,
@@ -131,12 +135,20 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
      return CheckCircleIcon
    case IconName.ChevronDown:
      return ChevronDownIcon
+    case IconName.ChevronDownSmall:
+      return ChevronDownSmallIcon
    case IconName.ChevronLeft:
      return ChevronLeftIcon
+    case IconName.ChevronLeftSmall:
+      return ChevronLeftSmallIcon
    case IconName.ChevronRight:
      return ChevronRightIcon
    case IconName.ChevronRightSmall:
      return ChevronRightSmallIcon
+    case IconName.ChevronUp:
+      return ChevronUpIcon
+    case IconName.ChevronUpSmall:
+      return ChevronUpSmallIcon
    case IconName.Close:
      return CloseIcon
    case IconName.CloseLarge:
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -19,9 +19,13 @@ export { default as ChairIcon } from "./Chair"
 export { default as CheckIcon } from "./Check"
 export { default as CheckCircleIcon } from "./CheckCircle"
 export { default as ChevronDownIcon } from "./ChevronDown"
+export { default as ChevronDownSmallIcon } from "./ChevronDownSmall"
 export { default as ChevronLeftIcon } from "./ChevronLeft"
+export { default as ChevronLeftSmallIcon } from "./ChevronLeftSmall"
 export { default as ChevronRightIcon } from "./ChevronRight"
 export { default as ChevronRightSmallIcon } from "./ChevronRightSmall"
+export { default as ChevronUpIcon } from "./ChevronUp"
+export { default as ChevronUpSmallIcon } from "./ChevronUpSmall"
 export { default as CityIcon } from "./City"
 export { default as CloseIcon } from "./Close"
 export { default as CloseLargeIcon } from "./CloseLarge"
--- a/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx
+++ b/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx
@@ -34,7 +34,7 @@ export default function LanguageSwitcherContainer({
            className={styles.backButton}
            onClick={() => toggleDropdown(position)}
          >
-            <ChevronLeftIcon color="red" />
+            <ChevronLeftIcon color="red" height={20} width={20} />
            <Subtitle type="one" asChild>
              <span>
                {intl.formatMessage({
--- a/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
+++ b/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
@@ -34,7 +34,7 @@
 .link.active,
 .link:hover {
  background-color: var(--Base-Surface-Primary-light-Hover-alt);
-  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
 }

@media screen and (min-width: 768px) {
--- a/components/LanguageSwitcher/index.tsx
+++ b/components/LanguageSwitcher/index.tsx
@@ -6,12 +6,12 @@ import { useIntl } from "react-intl"
 import { languages } from "@/constants/languages"
 import useDropdownStore from "@/stores/main-menu"

-import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { ChevronDownSmallIcon, GlobeIcon } from "@/components/Icons"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"

+import Caption from "../TempDesignSystem/Text/Caption"
 import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
 import LanguageSwitcherContent from "./LanguageSwitcherContent"
 import { languageSwitcherVariants } from "./variants"
@@ -41,7 +41,6 @@ export default function LanguageSwitcher({
  const isHeader = !isFooter

  const position = isFooter ? "footer" : "header"
-  const color = isFooter ? "pale" : "burgundy"

  const dropdownType = {
    footer: DropdownTypeEnum.FooterLanguageSwitcher,
@@ -74,7 +73,7 @@ export default function LanguageSwitcher({
    () => toggleDropdown(dropdownType)
  )

-  const classNames = languageSwitcherVariants({ color, position })
+  const classNames = languageSwitcherVariants({ position })

  return (
    <div className={classNames} ref={languageSwitcherRef}>
@@ -88,15 +87,14 @@ export default function LanguageSwitcher({
        })}
        onClick={handleClick}
      >
-        <GlobeIcon width={20} height={20} color={color} />
-        <Caption type="regular" color={color}>
-          {languages[currentLanguage]}
+        <GlobeIcon width={20} height={20} />
+        <Caption className={styles.buttonText} type="regular" asChild>
+          <span>{languages[currentLanguage]}</span>
        </Caption>
-        <ChevronDownIcon
+        <ChevronDownSmallIcon
          className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
          width={20}
          height={20}
-          color={color}
        />
      </button>

--- a/components/LanguageSwitcher/languageSwitcher.module.css
+++ b/components/LanguageSwitcher/languageSwitcher.module.css
@@ -1,25 +1,38 @@
 .button {
+  --language-switcher-color: var(--Base-Text-Medium-contrast);
+  --language-switcher-hover-color: var(--Base-Text-High-contrast);
+
  background-color: transparent;
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
  border-width: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: repeat(2, max-content) 1fr;
-  gap: var(--Spacing-x1);
  align-items: center;
  width: 100%;
+  color: var(--language-switcher-color);
 }

-.burgundy .button {
-  color: var(--Base-Text-High-contrast);
+.button * {
+  fill: var(--language-switcher-color);
+}
+.button:hover {
+  color: var(--language-switcher-hover-color);
+}
+.button:hover * {
+  fill: var(--language-switcher-hover-color);
 }

-.pale .button {
-  color: var(--Primary-Dark-On-Surface-Text);
+.buttonText {
+  color: inherit !important;
+  margin-left: var(--Spacing-x1);
+  margin-right: var(--Spacing-x-quarter);
 }

+.footer .button {
+  --language-switcher-color: var(--Primary-Dark-On-Surface-Text);
+  --language-switcher-hover-color: var(--Primary-Dark-On-Surface-Text);
+}
 .chevron {
  justify-self: end;
  transition: transform 0.3s;
@@ -36,19 +49,19 @@
  z-index: var(--menu-overlay-z-index);
 }

-.top .dropdown {
+.header .dropdown {
  right: -100vw;
  top: var(--main-menu-mobile-height);
  bottom: 0;
  transition: right 0.3s;
 }

-.top .dropdown.isExpanded {
+.header .dropdown.isExpanded {
  display: block;
  right: 0;
 }

-.bottom .dropdown {
+.footer .dropdown {
  transition: transform 0.3s;
  width: 100%;
  height: 100vh;
@@ -57,7 +70,7 @@
  transform: translateY(100%);
 }

-.bottom .dropdown.isExpanded {
+.footer .dropdown.isExpanded {
  transform: translateY(0);
 }

@@ -70,39 +83,37 @@
    position: absolute;
    background-color: var(--Base-Surface-Primary-light-Normal);
    border-radius: var(--Corner-radius-Large);
-    box-shadow: 0px 0px 14px 6px #0000001a;
+    box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
    display: none;
    min-width: 12.5rem;
    z-index: 1;
  }
-  .top .dropdown {
+  .header .dropdown {
    top: 2.25rem;
    bottom: auto;
  }

-  .top .dropdown::before {
+  .header .dropdown::before {
    top: -1.25rem;
    transform: rotate(180deg);
  }

-  .bottom .dropdown {
+  .footer .dropdown {
    transition: none;
    height: auto;
    left: -100%;
    bottom: 2.25rem;
  }

-  .bottom .dropdown.isExpanded {
+  .footer .dropdown.isExpanded {
    display: block;
  }

-  .bottom .dropdown::before {
+  .footer .dropdown::before {
    top: 100%;
  }

  .button {
    grid-template-columns: repeat(3, max-content);
-    font-size: var(--typography-Body-Bold-fontSize);
-    font-family: var(--typography-Body-Bold-fontFamily);
  }
 }
--- a/components/LanguageSwitcher/variants.ts
+++ b/components/LanguageSwitcher/variants.ts
@@ -4,17 +4,12 @@ import styles from "./languageSwitcher.module.css"

 export const languageSwitcherVariants = cva(styles.languageSwitcher, {
  variants: {
-    color: {
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-    },
    position: {
-      header: styles.top,
-      footer: styles.bottom,
+      header: styles.header,
+      footer: styles.footer,
    },
    defaultVariants: {
-      color: "burgundy",
-      position: "top",
+      position: "header",
    },
  },
 })
--- a/components/LoginButton/index.tsx
+++ b/components/LoginButton/index.tsx
@@ -18,13 +18,13 @@ export default function LoginButton({
  trackingId,
  children,
  color = "black",
-  variant = "default",
+  variant = "navigation",
 }: PropsWithChildren<{
  className: string
  trackingId: string
  position: TrackingPosition
  color?: LinkProps["color"]
-  variant?: "default" | "signupVerification"
+  variant?: "navigation" | "signupVerification"
 }>) {
  const lang = useLang()
  const pathName = useLazyPathname({ includeSearchParams: true })
--- a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
+++ b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
@@ -50,7 +50,12 @@ export default function AccordionItem({
        <summary className={styles.summary}>
          {IconComp && <IconComp className={styles.icon} color="burgundy" />}
          <span className={styles.title}>{title}</span>
-          <ChevronDownIcon className={styles.chevron} color="burgundy" />
+          <ChevronDownIcon
+            className={styles.chevron}
+            color="burgundy"
+            width={20}
+            height={20}
+          />
        </summary>
        <div ref={contentRef} className={styles.content}>
          {children}
--- a/components/TempDesignSystem/Alert/Sidepeek/index.tsx
+++ b/components/TempDesignSystem/Alert/Sidepeek/index.tsx
@@ -30,7 +30,7 @@ export default function AlertSidepeek({
        wrapping
      >
        {ctaText}
-        <ChevronRightIcon />
+        <ChevronRightIcon height={20} width={20} />
      </Button>
      {sidePeekIsOpen ? (
        <SidePeek
--- a/components/TempDesignSystem/Form/SelectChevron/index.tsx
+++ b/components/TempDesignSystem/Form/SelectChevron/index.tsx
@@ -5,7 +5,7 @@ import styles from "./chevron.module.css"
 export default function SelectChevron() {
  return (
    <span aria-hidden="true" className={styles.chevron}>
-      <ChevronDownIcon color="grey80" />
+      <ChevronDownIcon color="grey80" width={20} height={20} />
    </span>
  )
 }
--- a/components/TempDesignSystem/Link/index.tsx
+++ b/components/TempDesignSystem/Link/index.tsx
@@ -23,6 +23,7 @@ export default function Link({
  scroll = true,
  prefetch,
  variant,
+  weight,
  trackingId,
  onClick,
  /**
@@ -45,6 +46,7 @@ export default function Link({
    textDecoration,
    color,
    size,
+    weight,
    variant,
  })

--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -154,20 +154,25 @@
  color: var(--Base-Text-Medium-contrast);
 }

-.red {
-  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
-}
-
 .peach80:hover,
 .peach80:active {
  color: var(--Base-Text-High-contrast);
 }

+.peach80 *,
+.peach80 * {
+  fill: var(--Base-Text-Medium-contrast);
+}
+
 .peach80:hover *,
 .peach80:active * {
  fill: var(--Base-Text-High-contrast);
 }

+.red {
+  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
+}
+
 .white {
  color: var(--Base-Button-Primary-On-Fill-Normal);
 }
@@ -213,6 +218,14 @@
  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
  line-height: var(--typography-Caption-Bold-lineHeight);
 }
+.bold {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: 500
+    /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight) */;
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
+}

 .menu {
  display: flex;
@@ -223,11 +236,6 @@
  padding: var(--Spacing-x1);
  gap: var(--Spacing-x-one-and-half);
  color: var(--Base-Text-High-contrast);
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
  border-radius: var(--Corner-radius-Medium);
 }

@@ -236,6 +244,12 @@
  background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }

+.navigation {
+  color: var(--Base-Text-High-contrast);
+  text-decoration: none;
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
 .signupVerification {
  background-color: var(--Base-Button-Primary-Fill-Normal);
  color: var(--Base-Button-Inverted-Fill-Normal);
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -26,12 +26,16 @@ export const linkVariants = cva(styles.link, {
      none: styles.noDecoration,
      underline: styles.underline,
    },
+    weight: {
+      bold: styles.bold,
+    },
    variant: {
      breadcrumb: styles.breadcrumb,
      default: styles.default,
      icon: styles.icon,
      underscored: styles.underscored,
      myPageMobileDropdown: styles.myPageMobileDropdown,
+      navigation: styles.navigation,
      menu: styles.menu,
      shortcut: styles.shortcut,
      sidebar: styles.sidebar,
--- a/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
+++ b/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
@@ -31,7 +31,7 @@ export default function TeaserCardSidepeek({
        wrapping
      >
        {button.call_to_action_text}
-        <ChevronRightIcon />
+        <ChevronRightIcon height={20} width={20} />
      </Button>
      <SidePeek
        title={heading}
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -73,11 +73,11 @@
 }

 .textMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
+  color: var(--Base-Text-Medium-contrast);
 }

 .textHighContrast {
-  color: var(--UI-Text-High-contrast);
+  color: var(--Base-Text-High-contrast);
 }

 .baseTextMediumContrast {
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -22,9 +22,13 @@ export enum IconName {
  Check = "Check",
  CheckCircle = "CheckCircle",
  ChevronDown = "ChevronDown",
+  ChevronDownSmall = "ChevronDownSmall",
  ChevronLeft = "ChevronLeft",
+  ChevronLeftSmall = "ChevronLeftSmall",
  ChevronRight = "ChevronRight",
  ChevronRightSmall = "ChevronRightSmall",
+  ChevronUp = "ChevronUp",
+  ChevronUpSmall = "ChevronUpSmall",
  Close = "Close",
  CloseLarge = "CloseLarge",
  CoffeeAlt = "CoffeeAlt",