Merge pull request #100 from SSWConsulting/feature/mega-menu-styling-…

…1751 💄 UI - Mega Menu hover effect improvements
SSWConsulting · Aug 11, 2024 · dc6ea14 · dc6ea14
2 parents 8380384 + 92b6b4b
commit dc6ea14
Show file tree

Hide file tree

Showing 9 changed files with 4,213 additions and 3,521 deletions.
diff --git a/lib/components/CountryDropdown/CountryDropdown.tsx b/lib/components/CountryDropdown/CountryDropdown.tsx
@@ -50,8 +50,7 @@ const CountryDropdown = ({ url }: CountryDropdownProps) => {
       <Popover.Button
         className={cx(
           "flex items-center justify-center gap-x-1 rounded-md px-1 py-1 text-sm font-semibold text-ssw-black outline-none xs:px-4",
-          "hover:bg-gray-100",
-          isOpened && "bg-gray-100",
+          "hover:scale-105",
         )}
         onClick={() => setIsOpened(!isOpened)}
       >
@@ -73,7 +72,7 @@ const CountryDropdown = ({ url }: CountryDropdownProps) => {
             .map((country) => (
               <CustomLink
                 key={country.country}
-                className="block min-w-[80px] py-2 hover:bg-gray-100"
+                className="block min-w-[80px] py-2 hover:scale-105"
                 href={country.url}
                 title={country.country}
               >

diff --git a/lib/components/DesktopMenu/DesktopMenu.tsx b/lib/components/DesktopMenu/DesktopMenu.tsx
@@ -32,7 +32,7 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({
   return (
     <>
       <div className="hidden flex-1 xl:block">
-        <Popover.Group className="flex items-center justify-center text-sm font-semibold text-ssw-black outline-none">
+        <Popover.Group className="flex items-center justify-center gap-1 text-sm font-semibold text-ssw-black outline-none">
           {menuGroups.map((group) => {
             if (
               !!group.menuColumns &&
@@ -76,7 +76,7 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({
         </Popover.Group>
       </div>
 
-      <div className="hidden shrink items-center justify-end xl:flex">
+      <div className="hidden shrink items-center justify-end gap-1 xl:flex">
         {SideActions ? (
           <SideActions />
         ) : (

diff --git a/lib/components/DesktopMenu/MenuItemLink.tsx b/lib/components/DesktopMenu/MenuItemLink.tsx
@@ -11,7 +11,7 @@ export const MenuItemLink = ({ name, href }: MenuItemLinkProps) => {
   return (
     <CustomLink
       href={href}
-      className="flex items-center justify-center rounded-md px-3 py-1"
+      className="flex items-center justify-center rounded-md px-3 py-1 hover:text-ssw-red"
     >
       {name}
     </CustomLink>

diff --git a/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx b/lib/components/DesktopMenu/MenuItemWithSubmenu.tsx
@@ -25,15 +25,12 @@ export const MenuItemWithSubmenu: React.FC<MenuItemWithSubmenuProps> = ({
     <>
       <Popover.Button
         className={cx(
-          "flex cursor-pointer items-center justify-center gap-x-1 whitespace-nowrap rounded-md px-3 py-1 focus:outline-none focus-visible:ring-opacity-0",
-          isOpened ? "bg-gray-100" : "hover:bg-gray-100",
+          "flex cursor-pointer items-center justify-center gap-x-1 whitespace-nowrap rounded-md px-3 py-1 text-ssw-black 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 text-ssw-black"
-        />
+        <MegaIcon icon="chevronDown" className="h-5 w-5 flex-none" />
       </Popover.Button>
 
       <Transition

diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -80,7 +80,7 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
         )}
       >
         <nav
-          className="flex h-full w-full items-center justify-between gap-x-1 overflow-hidden px-0 xs:gap-x-4"
+          className="flex h-full w-full items-center justify-between gap-x-1 overflow-hidden px-0 xs:gap-x-2"
           aria-label="Global"
         >
           <div className="flex items-center">

diff --git a/lib/components/MobileMenu/MobileMenu.tsx b/lib/components/MobileMenu/MobileMenu.tsx
@@ -102,14 +102,14 @@ const MenuBarItems: React.FC<MenuBarItemProps> = ({
             <CustomLink
               key={item.name}
               href={item.url}
-              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:bg-gray-50"
+              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red"
             >
               {item.name}
             </CustomLink>
           ) : (
             <button
               key={item.name}
-              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:bg-gray-50"
+              className="-mx-3 flex w-full items-center px-3 py-2 text-left text-lg leading-7 text-ssw-black hover:text-ssw-red"
               onClick={() => setSelectedMenuItem(item)}
             >
               {item.name}

diff --git a/lib/components/Search/Search.tsx b/lib/components/Search/Search.tsx
@@ -43,7 +43,7 @@ export const Search: React.FC<SearchTermProps> = ({
   return (
     <>
       <button
-        className="rounded p-4 text-ssw-black hover:bg-gray-100"
+        className="rounded p-4 text-ssw-black hover:text-ssw-red"
         onClick={() => setIsOpen(true)}
       >
         <MegaIcon icon="magnifyingGlass" className="h-5 w-5" />

diff --git a/lib/components/SubMenuGroup/SubMenuGroup.tsx b/lib/components/SubMenuGroup/SubMenuGroup.tsx
@@ -109,7 +109,7 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
     <CustomLink
       href={url || ""}
       className={cx(
-        "flex items-start gap-x-3 rounded-md bg-white hover:bg-gray-100 focus:outline-none",
+        "flex items-start gap-x-3 rounded-md bg-white text-ssw-black hover:text-ssw-red focus:outline-none",
         description ? "p-4" : "p-2",
       )}
       onClick={() => {
@@ -130,13 +130,15 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
         <span>
           {name && description ? (
             <>
-              <p className="font-bold text-ssw-black">{name}</p>
+              <p className="font-bold">{name}</p>
               <p className="mt-1 text-sm font-normal text-ssw-gray">
                 {description}
               </p>
             </>
           ) : (
-            <p className="pl-4 text-sm font-normal text-ssw-black">{name}</p>
+            <p className="pl-4 text-sm font-normal text-ssw-black hover:text-ssw-red">
+              {name}
+            </p>
           )}
         </span>
       </div>