Merged in fix/SW-2753-icon-header (pull request #2546)

fix(SW-2753): update icon in top navigation

* fix(SW-2753): update icon in top navigation


Approved-by: Anton Gunnarsson

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -2,9 +2,8 @@
 
 import FocusLock from "react-focus-lock"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useDropdownStore from "@/stores/main-menu"
 
@@ -45,13 +44,13 @@ export default function MegaMenu({
               onClick={() => toggleMegaMenu(false)}
             >
               <MaterialIcon
-                icon="chevron_left"
+                icon="arrow_back_ios"
                 size={20}
                 color="Icon/Interactive/Accent"
               />
-              <Subtitle type="one" color="burgundy" asChild>
+              <Typography variant="Title/Subtitle/lg" className={styles.text}>
                 <span>{title}</span>
-              </Subtitle>
+              </Typography>
             </button>
           </div>
         ) : null}
@@ -72,14 +71,9 @@ export default function MegaMenu({
           <ul className={styles.submenus}>
             {submenu.map((item) => (
               <li key={item.title} className={styles.submenusItem}>
-                <Caption
-                  type="label"
-                  color="uiTextPlaceholder"
-                  textTransform="uppercase"
-                  asChild
-                >
+                <Typography variant="Title/Overline/sm">
                   <span className={styles.submenuTitle}>{item.title}</span>
-                </Caption>
+                </Typography>
                 <ul className={styles.submenu}>
                   {item.links.map(({ title, link }) =>
                     link ? (

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css

@@ -21,6 +21,8 @@
 
 .submenuTitle {
   padding-left: var(--Spacing-x1);
+  color: var(--Text-Tertiary);
+  text-transform: uppercase;
 }
 
 .submenu {
@@ -53,6 +55,10 @@
   padding: var(--Spacing-x2);
 }
 
+.text {
+  color: var(--Text-Interactive-Default);
+}
+
 .backButton {
   background-color: transparent;
   border: none;

packages/design-system/lib/fonts.css

@@ -269,7 +269,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(/_static/fonts/material-symbols/rounded-5e7427aa.woff2)
+  src: url(/_static/fonts/material-symbols/rounded-e6bd32d5.woff2)
     format('woff2');
 }
 

scripts/material-symbols-update.mjs

@@ -28,6 +28,7 @@ const icons = [
   'apartment',
   'apparel',
   'arrow_back',
+  'arrow_back_ios',
   'arrow_forward_ios',
   'arrow_forward',
   'arrow_right',