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

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