Improve menu to avoid line breaks/overlaps + overall look and feel

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 hover:text-ssw-red"
+      className="flex items-center justify-center rounded-md px-2 py-1 hover:text-ssw-red"
     >
       {name}
     </CustomLink>

lib/components/DesktopMenu/MenuItemWithSubmenu.tsx

@@ -25,7 +25,7 @@ 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 text-ssw-black focus:outline-none focus-visible:ring-opacity-0",
+          "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",
           isOpened ? "text-ssw-red" : "hover:text-ssw-red",
         )}
       >

lib/components/MegaMenuLayout/MegaMenuLayout.tsx

@@ -88,8 +88,8 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
                 <Logo />
 
                 {tagline && (
-                  <div className="w-fit whitespace-break-spaces text-sm font-semibold uppercase leading-4 text-gray-700">
-                    <span className="ml-4 hidden xl:block">{tagline}</span>
+                  <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 && (

lib/components/PhoneButton/PhoneButton.tsx

@@ -30,7 +30,7 @@ export const PhoneButton = ({ className }: PhoneButtonProps) => {
       <CustomLink
         href={url}
         className={cx(
-          "flex h-12 w-full shrink-0 cursor-pointer items-center justify-center rounded bg-ssw-red px-5 text-xl hover:opacity-70 max-sm:my-5 sm:w-fit",
+          "whitespace-nowrap·rounded·flex·h-12·w-full·shrink-0·cursor-pointer·items-center·justify-center bg-ssw-red px-4 text-xl hover:opacity-70 max-sm:my-5 sm:w-fit",
         )}
       >
         <MegaIcon icon="phoneAlt" className="text-2xl text-white" />

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:text-ssw-red"
+        className="rounded p-3 text-ssw-black hover:text-ssw-red"
         onClick={() => setIsOpen(true)}
       >
         <MegaIcon icon="magnifyingGlass" className="h-5 w-5" />
@@ -72,7 +72,7 @@ export const Search: React.FC<SearchTermProps> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="mx-auto max-w-2xl divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white/80 shadow-2xl backdrop-blur transition-all">
+              <Dialog.Panel className="mx-auto max-w-2xl divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-md bg-white/80 shadow-2xl backdrop-blur transition-all">
                 <SearchInput
                   setSearchTerm={setSearchTerm}
                   searchTerm={searchTerm}
@@ -107,14 +107,14 @@ export const SearchInput: React.FC<SearchInputProps> = ({
         aria-hidden="true"
       />
       <form
-        className="isolate inline-flex w-full rounded-md shadow-sm"
+        className="isolate inline-flex w-full shadow-sm"
         onSubmit={(e) => performSearch(e)}
       >
         <input
           type="text"
           className={
             inputClassName ??
-            "h-12 grow rounded-l-md border bg-transparent pl-11 text-ssw-black focus:ring-0 sm:text-sm"
+            "h-12 grow rounded-l-md bg-transparent pl-11 text-ssw-black focus:ring-0 sm:text-sm"
           }
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}

lib/components/SubMenuGroup/SubMenuGroup.tsx

@@ -50,7 +50,7 @@ export const SubMenuGroup: React.FC<SubMenuGroupProps> = ({
         </div>
 
         <div className="shrink-0 overflow-x-hidden bg-gray-100 lg:relative lg:w-[350px] lg:before:absolute lg:before:inset-0 lg:before:-z-10 lg:before:w-[1000px] lg:before:bg-gray-50">
-          <div className="flex flex-col gap-y-2 px-8 py-4">
+          <div className="flex flex-col gap-y-2 px-6 pb-8 pt-4">
             {sidebarItems?.map((sideBarItem, i) => (
               <div key={i}>
                 <Heading
@@ -89,7 +89,7 @@ const Heading: React.FC<{
   children: React.ReactNode;
 }> = ({ className, children }) => {
   return (
-    <h3 className={cx("pb-4 text-lg font-bold text-ssw-black", className)}>
+    <h3 className={cx("pb-2 pl-2 text-lg font-bold text-ssw-black", className)}>
       {children}
     </h3>
   );
@@ -125,7 +125,7 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
     <CustomLink
       href={url || ""}
       className={cx(
-        "flex items-start gap-x-3 text-ssw-black hover:text-ssw-red focus:outline-none",
+        "flex items-start gap-x-1 text-ssw-black hover:text-ssw-red focus:outline-none",
         description ? "p-4" : "p-2",
       )}
       onClick={() => {
@@ -152,7 +152,7 @@ const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
               </p>
             </>
           ) : (
-            <p className="pl-4 text-sm font-normal text-ssw-black hover:text-ssw-red">
+            <p className="pl-2 text-sm font-normal text-ssw-black hover:text-ssw-red">
               {name}
             </p>
           )}