update chevron

Telefonica · Nov 6, 2024 · 638fa05 · 638fa05
1 parent 6bdd8a3
commit 638fa05
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/navigation-bar.tsx b/src/navigation-bar.tsx
@@ -36,10 +36,19 @@ import {debounce, isEqual} from './utils/helpers';
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {Variant} from './theme-variant-context';
 import type {TouchableProps} from './touchable';
-import type {DataAttributes, HeadingType} from './utils/types';
+import type {DataAttributes, HeadingType, IconProps} from './utils/types';
 
 const MAIN_NAVIGATION_BAR_MENU_DEBOUNCE_TIME = 120;
 
+const MenuSectionArrow = ({size = 24, color = vars.colors.neutralHigh, style, className}: IconProps) => (
+    <svg width={size} height={size} viewBox="0 0 8 8" style={style} className={className}>
+        <path
+            d="M6.32595 3.46071L3.03801 0.158595L3.03292 0.153747L3.032 0.152903L3.02931 0.150463L3.02848 0.149738L3.02248 0.144353C2.88533 0.021206 2.71386 -0.0126731 2.56343 0.00394249C2.41648 0.0201739 2.27272 0.0856702 2.16886 0.18711C2.06893 0.281844 2.01209 0.42816 2.00175 0.567065C1.99083 0.71377 2.02925 0.889583 2.16869 1.02392L5.24446 4.00145L2.15859 6.96199L2.15375 6.96708L2.1529 6.968L2.15046 6.97069L2.14974 6.97152L2.14435 6.97752C2.02121 7.11467 1.98733 7.28614 2.00394 7.43657C2.02017 7.58352 2.08567 7.72728 2.18711 7.83114C2.28184 7.93107 2.42816 7.98791 2.56706 7.99825C2.71377 8.00917 2.88958 7.97075 3.02392 7.83132L6.32595 4.5422V4.5422C6.6246 4.24355 6.6246 3.75935 6.32595 3.46071V3.46071Z"
+            fill={color}
+        />
+    </svg>
+);
+
 const BurgerMenuIcon = ({isOpen}: {isOpen: boolean}) => {
     return (
         <div className={styles.burgerIconContainer} role="presentation" data-component-name="BurgerMenuIcon">
@@ -1173,12 +1182,15 @@ const MainNavigationBarDesktopSection = ({
                                 style={{
                                     pointerEvents: isMenuControlFocused ? 'auto' : 'none',
                                     opacity: isMenuControlFocused ? 1 : 0,
+                                    // We are using the same chevron as in ButtonLink, and that svg has
+                                    // some extra space on the left that we want to ignore in this case
+                                    marginTop: -2,
                                 }}
                             >
-                                <IconChevronLeftRegular
+                                <MenuSectionArrow
                                     size={8}
                                     style={{
-                                        transform: `rotate(${isSectionMenuOpen ? 90 : -90}deg)`,
+                                        transform: `rotate(${isSectionMenuOpen ? -90 : 90}deg)`,
                                     }}
                                 />
                             </BaseTouchable>