docs: design fixes to toc and related elements (#12747)

* docs: design fixes to toc and related elements

* change header styling

* fix heading styles

* design fixes

* fix showing badges in toc

www/packages/docs-ui/src/components/MainNav/Items/Dropdown/index.tsx

@@ -46,7 +46,7 @@ export const MainNavItemDropdown = ({
     return (
       <div
         className={clsx(
-          "cursor-pointer flex gap-docs_0.25 items-center px-docs_0.25 py-docs_0.5",
+          "cursor-pointer flex gap-docs_0.25 items-center py-docs_0.25 px-docs_0.5",
           isActive && "text-medusa-fg-base",
           !isActive && [
             "text-medusa-fg-muted hover:text-medusa-fg-subtle",

www/packages/docs-ui/src/components/MainNav/Version/index.tsx

@@ -15,7 +15,10 @@ export const MainNavVersion = () => {
     <Link
       href={version.releaseUrl}
       target="_blank"
-      className={clsx(version.hide && "hidden", "px-docs_0.5 py-docs_0.25")}
+      className={clsx(
+        version.hide && "hidden",
+        "px-docs_0.5 py-docs_0.25 hover:bg-medusa-button-transparent-hover rounded-docs_sm"
+      )}
     >
       <Tooltip html="View the release notes<br/>on GitHub">
         <span className="relative text-compact-small-plus block">

www/packages/docs-ui/src/components/MainNav/index.tsx

@@ -102,7 +102,7 @@ export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
                 ],
               }}
               isActive={false}
-              className="text-medusa-fg-subtle"
+              className="text-medusa-fg-subtle hover:bg-medusa-button-transparent-hover rounded-docs_sm"
               wrapperClassName="z-10"
             />
           </div>