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/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",

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;
+  }
+}