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