✨ Add light/dark theming support to the mega menu

lib/components/CountryDropdown/CountryDropdown.tsx

@@ -51,7 +51,7 @@ const CountryDropdown = ({ url, className }: CountryDropdownProps) => {
     <Popover className={cx(className)}>
       <Popover.Button
         className={cx(
-          "flex items-center justify-center gap-x-1 rounded-md px-4 py-1 text-sm font-semibold text-ssw-black outline-none xl:pr-0",
+          "flex items-center justify-center gap-x-1 rounded-md px-4 py-1 text-sm font-semibold text-foreground outline-none xl:pr-0",
           "hover:scale-105",
         )}
         onClick={() => setIsOpened(!isOpened)}

lib/components/DesktopMenu/DesktopMenu.tsx

@@ -31,7 +31,7 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({
   return (
     <>
       <div className="hidden flex-1 xl:block">
-        <Popover.Group className="flex items-center justify-center gap-1 text-sm font-semibold text-ssw-black outline-none">
+        <Popover.Group className="flex items-center justify-center gap-1 text-sm font-semibold text-foreground outline-none">
           {menuGroups.map((group, index) => {
             if (
               !!group.menuColumns &&
@@ -116,7 +116,7 @@ const DefaultSideActions = ({
 };
 
 const Divider: React.FC = () => {
-  return <div className="hidden h-5 w-px bg-gray-700/30 sm:block"></div>;
+  return <div className="hidden h-5 w-px bg-hairline sm:block"></div>;
 };
 
 export default DesktopMenu;

lib/components/DesktopMenu/MenuItemWithSubmenu.tsx

@@ -25,12 +25,15 @@ export const MenuItemWithSubmenu: React.FC<MenuItemWithSubmenuProps> = ({
     <>
       <Popover.Button
         className={cx(
-          "flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-2 py-1 text-ssw-black focus:outline-none focus-visible:ring-opacity-0",
+          "flex cursor-pointer items-center justify-center gap-1 whitespace-nowrap rounded-md px-2 py-1 text-foreground focus:outline-none focus-visible:ring-opacity-0",
           isOpened ? "text-ssw-red" : "hover:text-ssw-red",
         )}
       >
         {name}
-        <MegaIcon icon="chevronDown" className="h-5 w-5 flex-none" />
+        <MegaIcon
+          icon="chevronDown"
+          className="h-4 w-4 flex-none text-muted-foreground"
+        />
       </Popover.Button>
 
       <Transition
@@ -42,7 +45,7 @@ export const MenuItemWithSubmenu: React.FC<MenuItemWithSubmenuProps> = ({
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 -translate-y-1"
       >
-        <Popover.Panel className="absolute inset-x-0 top-[120px] -z-10 bg-gray-50 shadow-md shadow-gray-400">
+        <Popover.Panel className="absolute inset-x-0 top-[120px] -z-10 bg-gray-50 shadow-md shadow-gray-400 dark:bg-[#151515] dark:shadow-black/50">
           <SubMenuGroup
             menuColumns={menuColumns}
             sidebarItems={sidebarItems}

lib/components/Logo/Logo.tsx

@@ -3,24 +3,30 @@ import { CustomImage } from "../CustomImage";
 
 export type LogoSize = "small" | "medium" | "large";
 
+const LIGHT_LOGO = "/images/ssw-logo-lightmode.svg";
+const DARK_LOGO = "/images/ssw-logo-darkmode.svg";
+
 const Logo: React.FC = () => {
   // show the xmas logo for 1-25 December
   const date = new Date();
   const isXmas = date.getMonth() === 11 && date.getDate() <= 25;
   const logoPath = isXmas
     ? "https://www.ssw.com.au/images/ssw-logo-xmas.svg"
-    : "https://www.ssw.com.au/images/ssw-logo.svg";
+    : LIGHT_LOGO;
 
   return (
     <>
       <CustomImage
         src={logoPath}
         alt="SSW - Enterprise Software Development"
-        height={60}
-        width={100}
-        className="h-full"
+        className="h-14 w-auto object-contain xl:h-11 min-[1400px]:h-14 dark:hidden"
+      />
+      <CustomImage
+        src={DARK_LOGO}
+        alt=""
+        aria-hidden="true"
+        className="hidden h-14 w-auto object-contain xl:h-11 min-[1400px]:h-14 dark:block"
       />
-      <span className="sr-only">SSW</span>
     </>
   );
 };

lib/components/MegaIcon/MegaIcon.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { AvailableIcons, iconMap } from "../../types/icon";
 import { ICON_IMAGE_SIZES, IconSizes } from "../../util/constants";
+import { cx } from "../../util/cx";
 import { CustomImage } from "../CustomImage";
 
 const MegaIconMapper = ({
@@ -22,6 +23,7 @@ const MegaIconMapper = ({
 export interface MegaIconProps {
   // TODO: implement below intended solution extends React.ComponentPropsWithoutRef<"span"> {
   iconImg?: string;
+  iconImgDarkMode?: string;
   icon?: AvailableIcons;
   imgSize?: IconSizes;
   className?: string;
@@ -30,6 +32,7 @@ export interface MegaIconProps {
 export const MegaIcon: React.FC<MegaIconProps> = ({
   icon,
   iconImg,
+  iconImgDarkMode,
   imgSize = "small",
   className,
 }) => {
@@ -47,16 +50,32 @@ export const MegaIcon: React.FC<MegaIconProps> = ({
     );
   }
 
+  // When a dark-mode icon is supplied, render both and toggle with `dark:` so the
+  // swap resolves from the `.dark` scope in CSS (no JS, no flash); most products
+  // have no dark variant and just render the single default icon.
   return (
     <div>
       <CustomImage
-        className={ICON_IMAGE_SIZES[imgSize]}
+        className={cx(
+          ICON_IMAGE_SIZES[imgSize],
+          iconImgDarkMode && "dark:hidden",
+        )}
         src={iconImg}
-        alt={iconImg}
+        alt=""
         width={20}
         height={20}
         aria-hidden="true"
       />
+      {iconImgDarkMode && (
+        <CustomImage
+          className={cx(ICON_IMAGE_SIZES[imgSize], "hidden dark:block")}
+          src={iconImgDarkMode}
+          alt=""
+          width={20}
+          height={20}
+          aria-hidden="true"
+        />
+      )}
     </div>
   );
 };

lib/components/MegaMenuLayout/MegaMenuLayout.tsx

@@ -29,6 +29,7 @@ export type MegaMenuWrapperProps = {
   callback?: (searchTerm: string) => void;
   linkComponent?: LinkComponentType;
   isFlagVisible?: boolean;
+  mobileMenuClassName?: string;
 } & React.PropsWithChildren &
   (Tagline | Title);
 
@@ -44,7 +45,6 @@ export type Title = {
 
 const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
   className = "",
-  tagline,
   title,
   url,
   subtitle,
@@ -54,6 +54,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
   rightSideActionsOverride,
   callback,
   isFlagVisible = true,
+  mobileMenuClassName,
 }) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const performSearch = (e: React.FormEvent<HTMLFormElement>) => {
@@ -81,7 +82,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
       <div
         className={cx(
           className,
-          "relative z-10 flex w-full items-center justify-center px-4 sm:h-[120px]",
+          "relative z-10 flex w-full items-center justify-center px-4 max-sm:py-3 sm:h-[120px]",
         )}
       >
         <nav
@@ -92,12 +93,6 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
             <CustomLink href={url || "/"} className="gap-1 whitespace-nowrap">
               <div className="flex min-w-[4rem] max-w-[14rem] items-center">
                 <Logo />
-
-                {tagline && (
-                  <div className="w-fit whitespace-break-spaces text-xs font-semibold uppercase leading-3 text-gray-700">
-                    <span className="ml-3 hidden xl:block">{tagline}</span>
-                  </div>
-                )}
                 {title && (
                   <div className="mb-3 ml-2 mt-2 text-4xl leading-5">
                     {title}
@@ -112,18 +107,20 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
             </CustomLink>
           </div>
           <div className="flex items-center xl:hidden">
-            {RightSideActions ? (
-              <div className="max-sm:hidden">
+            {/* From lg–xl these actions sit in the bar as before; below lg they
+                collapse into the hamburger, leaving just the logo + burger. */}
+            <div className="hidden items-center lg:flex">
+              {RightSideActions ? (
                 <RightSideActions />
-              </div>
-            ) : (
-              !hidePhone && <PhoneButton className="max-sm:hidden" />
-            )}
-            {isFlagVisible && <CountryDropdown />}
-            {isFlagVisible && <Divider />}
+              ) : (
+                !hidePhone && <PhoneButton />
+              )}
+              {isFlagVisible && <CountryDropdown />}
+              {isFlagVisible && <Divider />}
+            </div>
             <button
               type="button"
-              className="inline-flex items-center justify-center rounded-md pl-2 text-gray-700"
+              className="inline-flex items-center justify-center rounded-md pl-2 text-foreground"
               onClick={() => setMobileMenuOpen(true)}
             >
               <span className="sr-only">Open main menu</span>
@@ -148,15 +145,13 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
           setSearchTerm={setSearchTerm}
           performSearch={performSearch}
           menuBarItems={menuItems}
+          sideActions={rightSideActionsOverride}
+          hidePhone={hidePhone}
+          isFlagVisible={isFlagVisible}
+          searchUrl={searchUrl}
+          mobileMenuClassName={mobileMenuClassName}
         />
       </div>
-      {RightSideActions ? (
-        <div className="sm:hidden">
-          <RightSideActions />
-        </div>
-      ) : (
-        !hidePhone && <PhoneButton className="flex-grow px-4 pb-4 sm:hidden" />
-      )}
     </>
   );
 };