fix(SW-812): styling fixes for the header and related components

components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -41,7 +41,7 @@ export default function MegaMenu({
             className={styles.backButton}
             onClick={() => toggleMegaMenu(false)}
           >
-            <ChevronLeftIcon color="red" />
+            <ChevronLeftIcon color="red" height={20} width={20} />
             <Subtitle type="one" color="burgundy" asChild>
               <span>{title}</span>
             </Subtitle>
@@ -55,6 +55,7 @@ export default function MegaMenu({
               href={seeAllLink.link.url}
               color="burgundy"
               variant="icon"
+              weight="bold"
               onClick={handleNavigate}
             >
               {seeAllLink.title}
@@ -65,7 +66,12 @@ export default function MegaMenu({
         <ul className={styles.submenus}>
           {submenu.map((item) => (
             <li key={item.title} className={styles.submenusItem}>
-              <Caption textTransform="uppercase" asChild>
+              <Caption
+                type="label"
+                color="uiTextPlaceholder"
+                textTransform="uppercase"
+                asChild
+              >
                 <span className={styles.submenuTitle}>{item.title}</span>
               </Caption>
               <ul className={styles.submenu}>

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx

@@ -4,7 +4,7 @@ import { useRef } from "react"
 
 import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronDownIcon, ChevronRightIcon } from "@/components/Icons"
+import { ChevronDownSmallIcon, ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
@@ -41,9 +41,14 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
       >
         {title}
         {isMobile ? (
-          <ChevronRightIcon className={`${styles.chevron}`} color="red" />
+          <ChevronRightIcon
+            className={`${styles.chevron}`}
+            color="red"
+            height={20}
+            width={20}
+          />
         ) : (
-          <ChevronDownIcon
+          <ChevronDownSmallIcon
             className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
             color="red"
           />
@@ -67,7 +72,8 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
   ) : (
     <Link
       className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
-      color="burgundy"
+      variant="navigation"
+      weight="bold"
       href={link!.url}
     >
       {title}

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css

@@ -1,3 +1,7 @@
+.navigationMenuItem {
+  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
+}
+
 .navigationMenuItem.mobile {
   display: flex;
   justify-content: space-between;
@@ -38,8 +42,7 @@
   .dropdown {
     display: none;
     position: absolute;
-    top: var(--main-menu-desktop-height);
-    /* top: var(--Spacing-x5); */
+    top: calc(3.5rem - 2px); /* 3.5rem is the height of the main menu + bottom padding. */
     left: 50%;
     transform: translateX(-50%);
     border-radius: var(--Corner-radius-Large);

components/Header/MainMenu/NavigationMenu/NavigationMenuList/navigationMenuList.module.css

@@ -3,7 +3,7 @@
   margin: 0;
   justify-content: space-between;
   align-items: center;
-  gap: var(--Spacing-x4);
+  gap: var(--Spacing-x3);
   display: none;
 }