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

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