fix(BOOK-325): Added refetch options to user.name query and refactored header

Approved-by: Linus Flood Approved-by: Matilda Landström
2025-11-13 06:33:47 +00:00
parent 3a45e6cfe3
commit c4b564998c
27 changed files with 395 additions and 347 deletions
--- a/apps/scandic-web/components/Header/HeaderLink/headerLink.module.css
+++ b/apps/scandic-web/components/Header/HeaderLink/headerLink.module.css
@@ -3,16 +3,8 @@
  align-items: center;
  gap: var(--Space-x1);
  color: var(--Text-Interactive-Secondary);
-}

-.headerLink:hover {
-  color: var(--Text-Interactive-Default);
-}
-
-.headerLink .icon * {
-  fill: var(--Icon-Interactive-Default);
-}
-
-.headerLink:hover .icon * {
-  fill: var(--Icon-Interactive-Secondary);
+  &:hover {
+    color: var(--Text-Interactive-Default);
+  }
 }
--- a/apps/scandic-web/components/Header/HeaderLink/index.tsx
+++ b/apps/scandic-web/components/Header/HeaderLink/index.tsx
@@ -1,6 +1,6 @@
 "use client"

-import Link from "next/link"
+import NextLink from "next/link"

 import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -14,11 +14,11 @@ export default function HeaderLink({
  href,
  iconName,
  iconSize = 20,
-  onClick = () => undefined,
+  onClick,
 }: HeaderLinkProps) {
  return (
    <Typography variant="Body/Supporting text (caption)/smRegular">
-      <Link href={href} className={styles.headerLink} onClick={onClick}>
+      <NextLink href={href} className={styles.headerLink} onClick={onClick}>
        {iconName ? (
          <IconByIconName
            iconName={iconName}
@@ -28,7 +28,7 @@ export default function HeaderLink({
          />
        ) : null}
        {children}
-      </Link>
+      </NextLink>
    </Typography>
  )
 }
--- a/apps/scandic-web/components/Header/MainMenu/MainMenuButton/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MainMenuButton/index.tsx
@@ -1,16 +1,30 @@
+import { cx } from "class-variance-authority"
+import { Button as ButtonRAC } from "react-aria-components"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import styles from "./menuButton.module.css"

-import type { MainMenuButtonProps } from "@/types/components/header/mainMenuButton"
+import type { ComponentProps } from "react"
+
+interface MainMenuButtonProps extends ComponentProps<typeof ButtonRAC> {
+  isLoading?: boolean
+}

 export default function MainMenuButton({
-  className = "",
+  className,
+  isLoading,
  ...props
 }: MainMenuButtonProps) {
  return (
-    <button
-      type="button"
-      className={`${styles.menuButton} ${className}`}
-      {...props}
-    />
+    <Typography variant="Body/Paragraph/mdBold">
+      <ButtonRAC
+        type="button"
+        className={cx(styles.menuButton, className, {
+          [styles.loading]: isLoading,
+        })}
+        {...props}
+      />
+    </Typography>
  )
 }
--- a/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css
@@ -1,14 +1,21 @@
 .menuButton {
  display: flex;
-  gap: var(--Space-x05);
  align-items: center;
+  justify-content: center;
+  gap: var(--Space-x05);
+  cursor: pointer;
  width: 100%;
  background-color: transparent;
-  color: var(--Base-Text-High-contrast);
+  color: var(--Text-Interactive-Default);
  border-width: 0;
  padding: var(--Space-x05) 0;
-  cursor: pointer;
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
-  font-size: var(--typography-Body-Bold-fontSize);
+
+  &:focus-visible {
+    outline: 2px auto -webkit-focus-ring-color;
+    outline-offset: 1px;
+  }
+
+  &.loading {
+    cursor: progress;
+  }
 }
--- a/apps/scandic-web/components/Header/MainMenu/MenuLink/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MenuLink/index.tsx
@@ -0,0 +1,28 @@
+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./menuLink.module.css"
+
+import type { ComponentProps } from "react"
+
+export function MenuLink({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof NextLink>) {
+  return (
+    <Typography variant="Body/Paragraph/mdRegular">
+      <NextLink className={cx(styles.menuLink, className)} {...props}>
+        {children}
+        <MaterialIcon
+          icon="arrow_forward"
+          color="CurrentColor"
+          className={styles.arrowIcon}
+        />
+      </NextLink>
+    </Typography>
+  )
+}
--- a/apps/scandic-web/components/Header/MainMenu/MenuLink/menuLink.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/MenuLink/menuLink.module.css
@@ -0,0 +1,27 @@
+.menuLink {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--Space-x1);
+  gap: var(--Space-x15);
+  border-radius: var(--Corner-radius-md);
+  color: var(--Text-Interactive-Default);
+
+  &:hover {
+    background-color: var(--Surface-Primary-Hover);
+  }
+
+  &:focus-visible {
+    outline: 2px auto -webkit-focus-ring-color;
+    outline-offset: 1px;
+  }
+
+  &:not(:hover) .arrowIcon {
+    opacity: 0;
+  }
+}
+
+.arrowIcon {
+  flex-shrink: 0;
+}
--- a/apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx
@@ -1,7 +1,8 @@
 "use client"

+import { cx } from "class-variance-authority"
 import { useEffect } from "react"
-import { Dialog, Modal } from "react-aria-components"
+import { Button as ButtonRAC, Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"

@@ -75,16 +76,21 @@ export default function MobileMenu({

  const findMyBookingUrl = findMyBookingRoutes[lang]

+  function handleLinkClick() {
+    toggleDropdown(DropdownTypeEnum.HamburgerMenu)
+  }
+
  return (
    <>
-      <button
-        type="button"
-        className={`${styles.hamburger} ${isHamburgerExtended ? styles.isExpanded : ""}`}
+      <ButtonRAC
+        className={cx(styles.hamburger, {
+          [styles.isExpanded]: isHamburgerExtended,
+        })}
        aria-label={isHamburgerExtended ? closeMsg : openMsg}
-        onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
+        onPress={handleLinkClick}
      >
        <span className={styles.bar} />
-      </button>
+      </ButtonRAC>
      <Modal className={styles.modal} isOpen={isHamburgerMenuOpen}>
        <Dialog
          className={styles.dialog}
@@ -98,17 +104,23 @@ export default function MobileMenu({
            <HeaderLink
              href={findMyBookingUrl}
              iconName={IconName.Search}
-              onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
+              onClick={handleLinkClick}
            >
              {intl.formatMessage({
                id: "booking.findBooking",
                defaultMessage: "Find booking",
              })}
            </HeaderLink>
-            <TopLink isLoggedIn={isLoggedIn} topLink={topLink} iconSize={20} />
+            <TopLink
+              isLoggedIn={isLoggedIn}
+              topLink={topLink}
+              iconSize={20}
+              onClick={handleLinkClick}
+            />
            <HeaderLink
              href={customerService[lang]}
              iconName={IconName.Service}
+              onClick={handleLinkClick}
            >
              {intl.formatMessage({
                id: "common.customerService",
--- a/apps/scandic-web/components/Header/MainMenu/MobileMenu/mobileMenu.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/MobileMenu/mobileMenu.module.css
@@ -1,13 +1,3 @@
-@keyframes slide-in {
-  from {
-    right: -100vw;
-  }
-
-  to {
-    right: 0;
-  }
-}
-
 .hamburger {
  background-color: transparent;
  border: none;
@@ -20,7 +10,7 @@
 .bar,
 .bar::after,
 .bar::before {
-  background: var(--Base-Text-High-contrast);
+  background: var(--Icon-Interactive-Default);
  border-radius: 2.3px;
  display: block;
  height: 3px;
@@ -70,7 +60,7 @@
  right: auto;
  bottom: 0;
  width: 100%;
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-Primary-Default);
  transition: right 0.3s;
  z-index: var(--menu-overlay-z-index);
 }
@@ -90,7 +80,7 @@
 }

 .footer {
-  background-color: var(--Base-Surface-Subtle-Normal);
+  background-color: var(--Surface-Secondary-Default);
  padding: var(--Space-x4) var(--Space-x2);
  display: grid;
  gap: var(--Space-x2);
@@ -102,3 +92,13 @@
    display: none;
  }
 }
+
+@keyframes slide-in {
+  from {
+    right: -100vw;
+  }
+
+  to {
+    right: 0;
+  }
+}
--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx
@@ -1,10 +1,10 @@
 "use client"

+import { cx } from "class-variance-authority"
 import { useRef } from "react"
 import { useIntl } from "react-intl"

 import { Avatar } from "@scandic-hotels/design-system/Avatar"
-import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"

@@ -56,24 +56,24 @@ export default function MyPagesMenu({
  return (
    <div className={styles.myPagesMenu} ref={myPagesMenuRef}>
      <MainMenuButton
-        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
+        onPress={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
      >
        <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        <Body textTransform="bold" color="baseTextHighContrast" asChild>
-          <span data-hj-suppress>
-            {intl.formatMessage(
-              {
-                id: "myPages.hiFirstName",
-                defaultMessage: "Hi {firstName}!",
-              },
-              { firstName: user.firstName }
-            )}
-          </span>
-        </Body>
+        <span data-hj-suppress>
+          {intl.formatMessage(
+            {
+              id: "myPages.hiFirstName",
+              defaultMessage: "Hi {firstName}!",
+            },
+            { firstName: user.firstName }
+          )}
+        </span>
        <MaterialIcon
          icon="keyboard_arrow_down"
          size={20}
-          className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
+          className={cx(styles.chevron, {
+            [styles.isExpanded]: isMyPagesMenuOpen,
+          })}
          color="CurrentColor"
        />
      </MainMenuButton>
@@ -96,7 +96,7 @@ export default function MyPagesMenu({
 export function MyPagesMenuSkeleton() {
  return (
    <div className={styles.myPagesMenu}>
-      <MainMenuButton>
+      <MainMenuButton isLoading>
        <Avatar />
        <SkeletonShimmer width="10ch" />
        <MaterialIcon
--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
@@ -1,30 +1,26 @@
-.myPagesMenu {
-  display: none;
-}
+.chevron {
+  transition: transform 0.3s;

-@media screen and (min-width: 768px) {
-  .myPagesMenu {
-    display: block;
-  }
-
-  .chevron {
-    transition: transform 0.3s;
-  }
-
-  .chevron.isExpanded {
+  &.isExpanded {
    transform: rotate(180deg);
  }
+}

-  .dropdown {
-    position: absolute;
-    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-lg);
-    box-shadow: 0 0 0.875rem 0.375rem rgba(0, 0, 0, 0.1);
-    min-width: 20rem;
-    z-index: var(--menu-overlay-z-index);
+.dropdown {
+  position: absolute;
+  top: calc(
+    3.5rem - 2px
+  ); /* 3.5rem is the height of the main menu + bottom padding. */
+  right: 0;
+  background-color: var(--Surface-Primary-Default);
+  border-radius: var(--Corner-radius-lg);
+  box-shadow: 0 0 0.875rem 0.375rem rgba(0, 0, 0, 0.1);
+  min-width: 20rem;
+  z-index: var(--menu-overlay-z-index);
+}
+
+@media screen and (max-width: 767px) {
+  .myPagesMenu {
+    display: none;
  }
 }
--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx
@@ -1,18 +1,18 @@
 "use client"

+import { cx } from "class-variance-authority"
 import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"

 import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"

 import useLang from "@/hooks/useLang"

+import { MenuLink } from "../MenuLink"
+
 import styles from "./myPagesMenuContent.module.css"

 import type { MyPagesLinkKey } from "@scandic-hotels/trpc/routers/navigation/mypages/MyPagesLink"
@@ -34,10 +34,7 @@ export default function MyPagesMenuContent({
  const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []

  const membershipPoints = membership?.currentPoints
-  const introClassName =
-    membershipLevel && membershipPoints
-      ? `${styles.intro}`
-      : `${styles.intro} ${styles.noMembership}`
+  const showMembershipInfo = membershipLevel && membershipPoints !== undefined

  if (primaryLinks.length === 0 && secondaryLinks.length === 0) {
    return null
@@ -46,7 +43,11 @@ export default function MyPagesMenuContent({
  return (
    <FocusLock returnFocus={true}>
      <nav className={styles.myPagesMenuContent}>
-        <div className={introClassName}>
+        <div
+          className={cx(styles.intro, {
+            [styles.noMembership]: !showMembershipInfo,
+          })}
+        >
          <Typography variant="Title/Subtitle/md" className={styles.userName}>
            <p data-hj-suppress>
              {intl.formatMessage(
@@ -58,32 +59,32 @@ export default function MyPagesMenuContent({
              )}
            </p>
          </Typography>
-          {membershipLevel && membershipPoints ? (
-            <Caption className={styles.friendTypeWrapper}>
-              <span className={styles.friendType}>{membershipLevel.name}</span>
-              <span>
-                {intl.formatMessage(
-                  {
-                    id: "common.pointsAmountPoints",
-                    defaultMessage: "{pointsAmount, number} points",
-                  },
-                  { pointsAmount: membershipPoints }
-                )}
-              </span>
-            </Caption>
+          {showMembershipInfo ? (
+            <div className={styles.friendTypeWrapper}>
+              <Typography variant="Title/Overline/sm">
+                <span className={styles.friendType}>
+                  {membershipLevel.name}
+                </span>
+              </Typography>
+              <Typography variant="Body/Paragraph/mdRegular">
+                <span>
+                  {intl.formatMessage(
+                    {
+                      id: "common.pointsAmountPoints",
+                      defaultMessage: "{pointsAmount, number} points",
+                    },
+                    { pointsAmount: membershipPoints }
+                  )}
+                </span>
+              </Typography>
+            </div>
          ) : null}
+          <Divider className={styles.divider} />
        </div>

-        <ul className={styles.groups}>
-          <li>
-            <Divider className={styles.divider} />
-
-            <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
-
-            <Divider className={styles.divider} />
-            <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
-          </li>
-        </ul>
+        <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
+        <Divider className={styles.divider} />
+        <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
      </nav>
    </FocusLock>
  )
@@ -100,22 +101,11 @@ function PrimaryLinks({

  return (
    <ul className={styles.menuItems}>
-      {primaryLinks.map((link, i) => (
-        <li key={link.href + i}>
-          <Link
-            href={link.href}
-            onClick={toggleOpenStateFn}
-            variant="menu"
-            weight="bold"
-            className={styles.link}
-          >
-            {link.text}
-            <MaterialIcon
-              icon="arrow_forward"
-              className={styles.arrow}
-              color="CurrentColor"
-            />
-          </Link>
+      {primaryLinks.map(({ text, href }) => (
+        <li key={`${text}-${href}`}>
+          <MenuLink href={href} onClick={toggleOpenStateFn}>
+            {text}
+          </MenuLink>
        </li>
      ))}
    </ul>
@@ -135,35 +125,20 @@ function SecondaryLinks({

  return (
    <ul className={styles.menuItems}>
-      {secondaryLinks.map((link, i) => (
-        <li key={link.href + i}>
-          <Link
-            href={link.href}
-            onClick={toggleOpenStateFn}
-            variant="menu"
-            className={styles.link}
-          >
-            {link.text}
-            <MaterialIcon
-              icon="arrow_forward"
-              className={styles.arrow}
-              color="Icon/Interactive/Default"
-            />
-          </Link>
+      {secondaryLinks.map(({ text, href }) => (
+        <li key={`${text}-${href}`}>
+          <MenuLink href={href} onClick={toggleOpenStateFn}>
+            {text}
+          </MenuLink>
        </li>
      ))}
      <li>
-        <Link
-          href={logout[lang]}
-          prefetch={false}
-          variant="menu"
-          className={styles.link}
-        >
+        <MenuLink href={logout[lang]} prefetch={false}>
          {intl.formatMessage({
            id: "common.logOut",
            defaultMessage: "Log out",
          })}
-        </Link>
+        </MenuLink>
      </li>
    </ul>
  )
--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
@@ -6,44 +6,29 @@
  padding: 0 var(--Space-x1);
 }

-.myPagesMenuContent .friendTypeWrapper {
-  color: var(--UI-Text-Medium-contrast);
+.friendTypeWrapper {
+  color: var(--Text-Secondary);
 }

 .divider {
  margin: var(--Space-x2) 0;
 }

-.friendType {
-  font-family: var(--typography-Title-5-fontFamily);
-  letter-spacing: var(--typography-Title-5-letterSpacing);
-  font-size: var(--typography-Caption-Bold-fontSize);
-  text-transform: uppercase;
-}
-
 .friendType::after {
  content: " · ";
  display: inline;
  padding: 0 var(--Space-x05);
 }

-.groups,
 .menuItems {
  list-style: none;
 }

-.link:not(:hover) .arrow {
-  opacity: 0;
-}
-
-.arrow {
-  flex-shrink: 0;
-}
-
@media screen and (min-width: 768px) {
  .myPagesMenuContent {
    padding: var(--Space-x2) var(--Space-x4);
  }
+
  .intro.noMembership,
  .userName {
    display: none;
--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
@@ -28,7 +28,13 @@ export default function MyPagesMenuWrapper() {
  const { data: session } = useSession()
  const isUserLoggedIn = isValidSession(session)

-  const { data: user, isLoading: isLoadingUser } = trpc.user.name.useQuery()
+  const { data: user, isLoading: isLoadingUser } = trpc.user.name.useQuery(
+    undefined,
+    {
+      refetchOnWindowFocus: true,
+      refetchInterval: 300_000,
+    }
+  )
  const { data: membership, isLoading: isLoadingMembership } =
    trpc.user.safeMembershipLevel.useQuery()

--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
@@ -51,8 +51,7 @@ export default function MyPagesMobileMenu({
  return (
    <div className={styles.myPagesMobileMenu}>
      <MainMenuButton
-        className={styles.button}
-        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)}
+        onPress={() => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)}
        aria-label={intl.formatMessage({
          id: "header.openMyPagesMenu",
          defaultMessage: "Open my pages menu",
@@ -85,7 +84,7 @@ export default function MyPagesMobileMenu({
 export function MyPagesMobileMenuSkeleton() {
  return (
    <div className={styles.myPagesMobileMenu}>
-      <MainMenuButton className={styles.button}>
+      <MainMenuButton isLoading>
        <Avatar />
      </MainMenuButton>
    </div>
--- a/apps/scandic-web/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css
@@ -1,13 +1,3 @@
-@keyframes slide-in {
-  from {
-    right: -100vw;
-  }
-
-  to {
-    right: 0;
-  }
-}
-
 .modal {
  position: fixed;
  top: calc(var(--main-menu-mobile-height) + var(--alert-and-banner-height));
@@ -16,13 +6,14 @@
  width: 100%;
  background-color: var(--Base-Surface-Primary-light-Normal);
  z-index: var(--menu-overlay-z-index);
-}

-.modal[data-entering] {
-  animation: slide-in 0.3s;
-}
-.modal[data-exiting] {
-  animation: slide-in 0.3s reverse;
+  &[data-entering] {
+    animation: slide-in 0.3s;
+  }
+
+  &[data-exiting] {
+    animation: slide-in 0.3s reverse;
+  }
 }

 .dialog {
@@ -36,3 +27,13 @@
    display: none;
  }
 }
+
+@keyframes slide-in {
+  from {
+    right: -100vw;
+  }
+
+  to {
+    right: 0;
+  }
+}
--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
@@ -1,15 +1,19 @@
 "use client"

+import { cx } from "class-variance-authority"
+import { Button as ButtonRAC } from "react-aria-components"
 import FocusLock from "react-focus-lock"

+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"

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

 import Card from "@/components/TempDesignSystem/Card"

+import { MenuLink } from "../../MenuLink"
+
 import styles from "./megaMenu.module.css"

 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
@@ -35,14 +39,13 @@ export default function MegaMenu({

  return (
    <FocusLock disabled={!isOpen} returnFocus={true}>
-      <nav className={`${styles.megaMenu} ${isOpen ? styles.active : ""}`}>
+      <nav className={cx(styles.megaMenu, { [styles.active]: isOpen })}>
        {isMobile ? (
          <div className={styles.backWrapper}>
-            <Typography variant="Title/Subtitle/lg" className={styles.text}>
-              <button
-                type="button"
+            <Typography variant="Title/Subtitle/lg">
+              <ButtonRAC
                className={styles.backButton}
-                onClick={() => toggleMegaMenu(false)}
+                onPress={() => toggleMegaMenu(false)}
              >
                <MaterialIcon
                  icon="arrow_back_ios"
@@ -50,22 +53,27 @@ export default function MegaMenu({
                  color="CurrentColor"
                />
                <span>{title}</span>
-              </button>
+              </ButtonRAC>
            </Typography>
          </div>
        ) : null}
        <div className={styles.megaMenuContent}>
-          <div className={styles.seeAllLink}>
+          <div className={styles.seeAllLinkWrapper}>
            {seeAllLink?.url ? (
-              <Link
+              <ButtonLink
                href={seeAllLink.url}
-                variant="icon"
-                weight="bold"
+                variant="Text"
+                typography="Body/Paragraph/mdBold"
                onClick={handleNavigate}
+                wrapping={false}
              >
                {seeAllLink.title}
-                <MaterialIcon icon="arrow_forward" color="CurrentColor" />
-              </Link>
+                <MaterialIcon
+                  icon="arrow_forward"
+                  color="CurrentColor"
+                  size={24}
+                />
+              </ButtonLink>
            ) : null}
          </div>
          <ul className={styles.submenus}>
@@ -77,20 +85,10 @@ export default function MegaMenu({
                <ul className={styles.submenu}>
                  {item.links.map(({ title, url }) =>
                    url ? (
-                      <li key={title} className={styles.submenuItem}>
-                        <Link
-                          href={url}
-                          variant="menu"
-                          className={styles.link}
-                          onClick={handleNavigate}
-                        >
+                      <li key={title}>
+                        <MenuLink href={url} onClick={handleNavigate}>
                          {title}
-                          <MaterialIcon
-                            icon="arrow_forward"
-                            color="Icon/Interactive/Default"
-                            className={styles.arrow}
-                          />
-                        </Link>
+                        </MenuLink>
                      </li>
                    ) : null
                  )}
--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
@@ -1,64 +1,47 @@
-.megaMenu:not(.active) {
-  display: none;
+.megaMenu {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &:not(.active) {
+    display: none;
+  }
 }

 .megaMenuContent {
  display: grid;
 }

-.seeAllLink {
+.seeAllLinkWrapper {
  display: flex;
  padding: var(--Space-x2) var(--Space-x3);
-  align-items: center;
-  gap: var(--Space-x1);
-  background-color: var(--Base-Surface-Secondary-light-Normal);
+  background-color: var(--Surface-Primary-OnSurface-Default);
 }

 .submenus {
-  list-style: none;
  display: grid;
-}
-
-.submenuTitle {
-  padding-left: var(--Space-x1);
-  color: var(--Text-Tertiary);
-  text-transform: uppercase;
-}
-
-.submenu {
  list-style: none;
 }

-.submenuItem {
-  display: flex;
-}
-
 .submenusItem {
  display: grid;
  gap: var(--Space-x1);
  align-content: start;
 }

-.linkIcon {
-  display: none;
+.submenuTitle {
+  padding-left: var(--Space-x1);
+  color: var(--Text-Tertiary);
 }

-.link:not(:hover) .arrow {
-  opacity: 0;
-}
-
-.arrow {
-  flex-shrink: 0;
+.submenu {
+  list-style: none;
 }

 .backWrapper {
  padding: var(--Space-x2);
 }

-.text {
-  color: var(--Text-Interactive-Default);
-}
-
 .backButton {
  background-color: transparent;
  border: none;
@@ -68,39 +51,40 @@
  align-items: center;
  gap: var(--Space-x1);
  width: 100%;
+  color: var(--Text-Interactive-Default);
 }

@media screen and (max-width: 767px) {
-  .megaMenu {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
  .megaMenuContent {
    flex-grow: 1;
    grid-template-rows: max-content 1fr;
    gap: var(--Space-x2);
    align-items: start;
-  }
-  .megaMenuContent:has(.cardWrapper) {
-    grid-template-rows: max-content 1fr max-content;
+
+    &:has(.cardWrapper) {
+      grid-template-rows: max-content 1fr max-content;
+    }
  }

  .submenus {
    padding: var(--Space-x2);
  }

-  .submenusItem:first-child {
-    padding-bottom: var(--Space-x2);
-    border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-  }
-  .submenusItem:last-child {
-    padding-top: var(--Space-x3);
+  .submenusItem {
+    &:first-child {
+      padding-bottom: var(--Space-x2);
+      border-bottom: 1px solid var(--Border-Divider-Subtle);
+    }
+
+    &:last-child {
+      padding-top: var(--Space-x3);
+    }
  }

  .cardWrapper {
-    background-color: var(--Base-Surface-Secondary-light-Normal);
+    background-color: var(--Background-Primary);
    padding: var(--Space-x4) var(--Space-x2);
+    height: 320px;
  }
 }

@@ -112,17 +96,17 @@
      "submenus";
    width: 600px;
    max-width: calc(100vw - var(--Space-x4));
+
+    &:has(.cardWrapper) {
+      width: 900px;
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-areas:
+        "seeAllLink seeAllLink card"
+        "submenus submenus card";
+    }
  }

-  .megaMenuContent:has(.cardWrapper) {
-    width: 900px;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-areas:
-      "seeAllLink seeAllLink card"
-      "submenus submenus card";
-  }
-
-  .seeAllLink {
+  .seeAllLinkWrapper {
    grid-area: seeAllLink;
  }

@@ -132,12 +116,15 @@
    padding: var(--Space-x2) var(--Space-x3);
  }

-  .submenusItem:first-child {
-    padding-right: var(--Space-x5);
-    border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-  }
-  .submenusItem:last-child {
-    padding-left: var(--Space-x5);
+  .submenusItem {
+    &:first-child {
+      padding-right: var(--Space-x5);
+      border-right: 1px solid var(--Border-Divider-Subtle);
+    }
+
+    &:last-child {
+      padding-left: var(--Space-x5);
+    }
  }

  .cardWrapper {
--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
@@ -1,9 +1,11 @@
 "use client"

+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
 import { useRef } from "react"

 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { Typography } from "@scandic-hotels/design-system/Typography"

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

@@ -46,29 +48,40 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
    return (
      <>
        <MainMenuButton
-          onClick={() => toggleMegaMenu(megaMenuTitle)}
-          className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
+          onPress={() => toggleMegaMenu(megaMenuTitle)}
+          className={styles.navigationMenuItem}
        >
-          {title}
          {isMobile ? (
-            <MaterialIcon
-              icon="arrow_forward_ios"
-              size={20}
-              className={`${styles.chevron}`}
-              color="CurrentColor"
-            />
+            <>
+              <Typography variant="Title/Subtitle/lg">
+                <span>{title}</span>
+              </Typography>
+              <MaterialIcon
+                icon="arrow_forward_ios"
+                size={20}
+                className={styles.chevron}
+                color="CurrentColor"
+              />
+            </>
          ) : (
-            <MaterialIcon
-              icon="keyboard_arrow_down"
-              size={20}
-              className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
-              color="CurrentColor"
-            />
+            <>
+              <span>{title}</span>
+              <MaterialIcon
+                icon="keyboard_arrow_down"
+                size={20}
+                className={cx(styles.chevron, {
+                  [styles.isExpanded]: isMegaMenuOpen,
+                })}
+                color="CurrentColor"
+              />
+            </>
          )}
        </MainMenuButton>
        <div
          ref={megaMenuRef}
-          className={`${styles.dropdown} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
+          className={cx(styles.dropdown, {
+            [styles.isExpanded]: isMegaMenuOpen,
+          })}
        >
          <MegaMenu
            isMobile={isMobile}
@@ -83,15 +96,17 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
    )
  } else if (link?.url) {
    return (
-      <Link
-        className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
-        variant="navigation"
-        weight="bold"
-        onClick={handleNavigate}
-        href={link.url}
+      <Typography
+        variant={isMobile ? "Title/Subtitle/lg" : "Body/Paragraph/mdBold"}
      >
-        {title}
-      </Link>
+        <NextLink
+          className={cx(styles.navigationMenuItem, styles.link)}
+          onClick={handleNavigate}
+          href={link.url}
+        >
+          {title}
+        </NextLink>
+      </Typography>
    )
  }

--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
@@ -1,29 +1,28 @@
 .navigationMenuItem {
-  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
-}
-
-.navigationMenuItem.mobile {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--Space-x2) 0;
-  font-size: var(--typography-Subtitle-1-Mobile-fontSize);
+  color: var(--Text-Interactive-Default);
 }

 .chevron {
  transition: transform 0.3s;
-}

-.chevron.isExpanded {
-  transform: rotate(180deg);
+  &.isExpanded {
+    transform: rotate(180deg);
+  }
 }

 .dropdown {
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-Primary-Default);
  z-index: var(--menu-overlay-z-index);
  overflow: hidden;
 }

@media screen and (max-width: 767px) {
+  .navigationMenuItem {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--Space-x2) 0;
+  }
+
  .dropdown {
    position: fixed;
    width: 100%;
@@ -34,13 +33,18 @@
    bottom: 0;
    transition: right 0.3s;
    overflow-y: auto;
-  }
-  .dropdown.isExpanded {
-    right: 0;
+
+    &.isExpanded {
+      right: 0;
+    }
  }
 }

@media screen and (min-width: 768px) {
+  .navigationMenuItem.link {
+    padding: var(--Space-x05) 0;
+  }
+
  .dropdown {
    display: none;
    position: absolute;
@@ -51,8 +55,9 @@
    transform: translateX(-50%);
    border-radius: var(--Corner-radius-lg);
    box-shadow: var(--popup-box-shadow);
-  }
-  .dropdown.isExpanded {
-    display: grid;
+
+    &.isExpanded {
+      display: grid;
+    }
  }
 }
--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx
@@ -14,7 +14,10 @@ export default function NavigationMenuList({
 }: NavigationMenuListProps) {
  return (
    <ul
-      className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
+      className={cx(
+        styles.navigationMenu,
+        isMobile ? styles.mobile : styles.desktop
+      )}
    >
      {items.map((item) => (
        <li key={item.title} className={styles.item}>
--- a/apps/scandic-web/components/Header/MainMenu/mainMenu.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/mainMenu.module.css
@@ -1,7 +1,7 @@
 .mainMenu {
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-Primary-Default);
  padding: var(--Space-x2) 0;
-  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  border-bottom: 1px solid var(--Border-Divider-Subtle);
 }

 .nav {
--- a/apps/scandic-web/components/Header/TopLink/index.tsx
+++ b/apps/scandic-web/components/Header/TopLink/index.tsx
@@ -4,12 +4,24 @@ import HeaderLink from "../HeaderLink"

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

-import type { TopLinkProps } from "@/types/components/header/topLink"
+import type { Header } from "@scandic-hotels/trpc/types/header"
+import type { ComponentProps } from "react"
+
+export interface TopLinkProps
+  extends Omit<
+    ComponentProps<typeof HeaderLink>,
+    "href" | "iconName" | "children"
+  > {
+  isLoggedIn: boolean
+  topLink: Header["header"]["topLink"]
+  iconSize?: number
+}

 export default function TopLink({
  isLoggedIn,
  topLink,
  iconSize = 16,
+  ...props
 }: TopLinkProps) {
  const linkData = isLoggedIn ? topLink.logged_in : topLink.logged_out

@@ -22,6 +34,7 @@ export default function TopLink({
      href={linkData.url}
      iconName={linkData.icon || IconName.Gift}
      iconSize={iconSize}
+      {...props}
    >
      <span className={styles.topLink}>{linkData.title}</span>
    </HeaderLink>
--- a/apps/scandic-web/components/Header/TopMenu/topMenu.module.css
+++ b/apps/scandic-web/components/Header/TopMenu/topMenu.module.css
@@ -1,6 +1,6 @@
 .topMenu {
  display: none;
-  background-color: var(--Base-Surface-Subtle-Normal);
+  background-color: var(--Surface-Secondary-Default);
  padding: var(--Space-x2) 0;
 }

--- a/apps/scandic-web/components/Header/header.module.css
+++ b/apps/scandic-web/components/Header/header.module.css
@@ -1,4 +0,0 @@
-.header {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  color: var(--Base-Text-High-contrast);
-}
--- a/apps/scandic-web/components/Header/index.tsx
+++ b/apps/scandic-web/components/Header/index.tsx
@@ -5,13 +5,11 @@ import { getHeader } from "@/lib/trpc/memoizedRequests"
 import MainMenu from "./MainMenu"
 import TopMenu, { TopMenuSkeleton } from "./TopMenu"

-import styles from "./header.module.css"
-
 export default async function Header() {
  void getHeader()

  return (
-    <header className={styles.header}>
+    <header>
      <Suspense fallback={<TopMenuSkeleton />}>
        <TopMenu />
      </Suspense>
--- a/apps/scandic-web/types/components/header/mainMenuButton.ts
+++ b/apps/scandic-web/types/components/header/mainMenuButton.ts
@@ -1,2 +0,0 @@
-export interface MainMenuButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
--- a/apps/scandic-web/types/components/header/topLink.ts
+++ b/apps/scandic-web/types/components/header/topLink.ts
@@ -1,7 +0,0 @@
-import type { Header } from "@scandic-hotels/trpc/types/header"
-
-export interface TopLinkProps {
-  isLoggedIn: boolean
-  topLink: Header["header"]["topLink"]
-  iconSize?: number
-}