adjust background color, text color, and tweak chevron buttons of mob…

…ile menu

src/components/layout/Modal/Modal.styles.js

@@ -8,8 +8,9 @@ export const root = ({ type, isOpen }) =>
       'su-hidden': !isOpen,
       'su-bg-saa-black-dark': type === 'trip-filter',
       'su-bg-cardinal-red-xdark': type === 'main-menu',
+      'su-bg-white': type === 'mega-menu',
       'su-bg-saa-black su-bg-opacity-[97%]':
-        type !== 'trip-filter' && type !== 'main-menu',
+        type !== 'trip-filter' && type !== 'main-menu' && type !== 'mega-menu',
     }
   );
 export const wrapper = ({ type }) =>
@@ -31,15 +32,17 @@ export const closeButton = ({ type }) =>
     'su-group su-bg-transparent su-text-white su-font-semibold hocus:su-underline su-text-m1 su-flex su-items-end su-absolute su-top-[2.2rem] su-right-20 su-z-10',
     {
       'hover:su-bg-digital-red-xlight hocus:su-rounded-full':
-        type === 'main-menu',
-      'hocus:su-bg-transparent': type !== 'main-menu',
+        type === 'main-menu' || type === 'mega-menu',
+      'su-text-black hocus:su-bg-transparent': type !== 'main-menu',
+      'su-text-black hocus:su-bg-white': type !== 'mega-menu',
       'su-text-black': type === 'timeout',
     }
   );
 export const closeIcon = ({ type }) =>
   dcnb('su-inline-block su-h-[1.1em] su-w-[1.1em]', {
     'su-transition-colors group-hover:su-text-palo-verde-light group-focus:su-text-palo-verde-light':
       type === 'trip-filter',
-    'su-h-[1.3em] su-w-[1.3em] su-ml-0 su-p-2': type === 'main-menu',
+    'su-h-[1.3em] su-w-[1.3em] su-ml-0 su-p-2':
+      type === 'main-menu' || type === 'mega-menu',
     'su-ml-4': type !== 'main-menu',
   });

src/components/navigation/MegaMenu/megaMenu.js

@@ -77,7 +77,7 @@ const MegaMenu = ({ blok: { topLevelLinks }, blok, className }) => {
       </button>
       <Modal
         isOpen={mainMenuOpened || userMenuOpen}
-        type="main-menu"
+        type="mega-menu"
         onClose={() => {
           handleClose();
         }}
@@ -94,7 +94,7 @@ const MegaMenu = ({ blok: { topLevelLinks }, blok, className }) => {
             <FlexBox
               alignItems="center"
               justifyContent="center"
-              className="su-h-[7rem] su-px-30 su-text-20 su-text-white"
+              className="su-h-[7rem] su-px-30 su-text-20 su-bg-white"
             >
               <Heading size="base" weight="regular" className="su-mb-0">
                 Menu

src/components/navigation/MegaMenu/megaMenu.styles.js

@@ -11,8 +11,7 @@ export const burgerIconMobile =
   'su-transition-colors su-w-[2.2rem] group-hover:su-text-digital-red-xlight group-focus:su-text-digital-red-xlight';
 
 const menuMobileCommon =
-  'su-w-full su-border-t su-border-solid su-border-digital-red-light su-flex su-flex-col su-list-unstyled children:su-mb-0';
-export const menuMobileSAA = ({ menuOpened } = {}) =>
-  dcnb(menuMobileCommon, ' su-bg-black');
+  'su-w-full su-border-t su-border-solid su-border-black-20 su-flex su-flex-col su-list-unstyled children:su-mb-0';
+
 export const menuMobileHomesite = ({ menuOpened } = {}) =>
   dcnb(menuMobileCommon);

src/components/navigation/MegaMenu/megaMenuPanel.styles.js

@@ -5,20 +5,20 @@ import { dcnb } from 'cnbuilder';
  */
 
 export const root =
-  'su-float-left su-border-b su-border-solid last:su-border-none lg:su-inline-block lg:su-border-none su-border-digital-red-light';
+  'su-float-left su-border-b su-border-solid lg:su-inline-block lg:su-border-none su-border-black-20';
 
 // Styles for top level buttons
 const buttonMobile =
-  'su-text-black su-flex su-items-center su-font-semibold su-w-full hocus:su-shadow-none hocus:su-underline su-py-20 su-pl-26 su-pr-80 su-text-20';
+  'su-text-black !su-z-[100] su-flex su-items-center su-font-semibold su-w-full hocus:su-shadow-none hocus:su-underline su-py-20 su-pl-26 su-pr-80 su-text-20';
 const buttonDesktop =
   'lg:su-text-white lg:su-items-end lg:su-px-15 xl:su-pt-20 lg:su-pb-18 xl:su-pb-[3rem] lg:su-bg-transparent lg:hocus:su-bg-transparent lg:su-whitespace-pre lg:su-font-bold lg:hocus:su-text-digital-red-xlight lg:hocus:su-no-underline lg:su-border-b-[5px] lg:su-border-solid lg:su-border-transparent lg:hocus:su-border-digital-red-xlight';
 export const parentButton = ({ panelOpened, isActiveButton } = {}) =>
   dcnb(
-    'su-group su-transition-colors su-text-left su-leading-snug su-bg-white focus:su-outline-none su-underline-offset-[3px] hocus:su-bg-cardinal-red-xxdark lg:su-text-19 2xl:su-text-21',
+    'su-group su-transition-colors su-text-left su-leading-snug su-bg-white focus:su-outline-none su-underline-offset-[3px] hocus:su-underline lg:su-text-19 2xl:su-text-21',
     buttonMobile,
     buttonDesktop,
     {
-      '!su-bg-cardinal-red-xxdark hover:!su-bg-white !su-border-cardinal-red-xdark lg:hover:!su-bg-transparent !su-text-digital-red-light lg:!su-bg-transparent lg:!su-border-digital-red-light':
+      '!su-bg-white !su-border-cardinal-red-xdark lg:hover:!su-bg-transparent !su-text-digital-red-light lg:!su-bg-transparent lg:!su-border-digital-red-light':
         panelOpened,
       'su-bg-white lg:su-text-digital-red-xlight lg:su-bg-transparent lg:!su-border-digital-red-xlight':
         isActiveButton,
@@ -32,14 +32,16 @@ const chevronMobile =
   'su-absolute su-right-0 su-w-[3.4rem] su-pt-6 su-pb-5 su-px-5 su-bg-digital-red su-rounded-full group-hover:!su-bg-digital-red-light group-focus:!su-bg-digital-red-light su-mr-20';
 const chevronDesktop =
   'lg:su-relative lg:su--top-3 lg:su-mr-0 lg:su-ml-02em lg:su-w-[0.9em] lg:su-pt-0 lg:su-pb-0 lg:su-px-0 lg:su-bg-transparent lg:group-hover:su-text-digital-red-xlight lg:group-focus:su-text-digital-red-xlight lg:group-hover:!su-bg-transparent lg:group-focus:!su-bg-transparent';
+
 export const chevron = ({ panelOpened, isActiveButton } = {}) =>
   dcnb(
     'su-inline-block su-text-white su-transition group-focus:su-text-white',
     chevronMobile,
     chevronDesktop,
     {
-      'su-transform-gpu su-rotate-180 su-text-digital-red-light': panelOpened,
-      'su-bg-digital-red-light lg:su-text-white': isActiveButton,
+      'su-transform-gpu su-rotate-180 lg:su-text-digital-red-light':
+        panelOpened,
+      'lg:su-bg-digital-red-light lg:su-text-white': isActiveButton,
     }
   );