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

Approved-by: Linus Flood
Approved-by: Matilda Landström

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
                   )}