docs: design polish (#8696)

* polish

* finish polish

* change typography

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

@@ -1,7 +1,7 @@
 "use client"
 
 import React, { useMemo } from "react"
-import { CurrentItemsState, useSidebar } from "../../.."
+import { Button, CurrentItemsState, useSidebar } from "../../.."
 import clsx from "clsx"
 import Link from "next/link"
 import { SidebarItemLink } from "types"
@@ -61,22 +61,19 @@ export const MainNavBreadcrumbs = () => {
   return (
     <div
       className={clsx(
-        "flex items-center",
+        "flex items-center gap-docs_0.25",
         "text-medusa-fg-muted text-compact-small"
       )}
     >
       {Array.from(breadcrumbItems).map(([link, title]) => (
         <React.Fragment key={link}>
           <span>/</span>
-          <Link
-            href={link}
-            className={clsx(
-              "hover:text-medusa-fg-base transition-colors",
-              "px-docs_0.5 py-docs_0.25"
-            )}
+          <Button
+            variant="transparent-clear"
+            className="px-docs_0.5 py-docs_0.25"
           >
-            {title}
-          </Link>
+            <Link href={link}>{title}</Link>
+          </Button>
         </React.Fragment>
       ))}
     </div>

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

@@ -2,7 +2,7 @@
 
 import React from "react"
 import { useColorMode } from "../../../providers"
-import { Button } from "../../.."
+import { Button, Tooltip } from "../../.."
 import { Moon, Sun } from "@medusajs/icons"
 import clsx from "clsx"
 
@@ -10,13 +10,15 @@ export const MainNavColorMode = () => {
   const { colorMode, toggleColorMode } = useColorMode()
 
   return (
-    <Button
-      variant="transparent-clear"
-      className={clsx("!p-[6.5px] text-medusa-fg-muted")}
-      onClick={toggleColorMode}
-    >
-      {colorMode === "light" && <Sun />}
-      {colorMode === "dark" && <Moon />}
-    </Button>
+    <Tooltip place="bottom" tooltipChildren="Change Theme">
+      <Button
+        variant="transparent-clear"
+        className={clsx("!p-[6.5px] text-medusa-fg-muted")}
+        onClick={toggleColorMode}
+      >
+        {colorMode === "light" && <Sun />}
+        {colorMode === "dark" && <Moon />}
+      </Button>
+    </Tooltip>
   )
 }

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

@@ -46,9 +46,9 @@ export const MainNavHelpButton = () => {
     <div className="relative" ref={ref}>
       <Tooltip
         tooltipChildren={
-          <span className="flex gap-[6px]">
+          <span className="flex gap-[6px] items-center">
             <span>Need help?</span>
-            <Kbd>?</Kbd>
+            <Kbd className="w-docs_1 h-docs_1">?</Kbd>
           </span>
         }
         place="bottom"
@@ -56,7 +56,7 @@ export const MainNavHelpButton = () => {
       >
         <Button
           variant="transparent-clear"
-          className="text-medusa-fg-muted"
+          className="text-medusa-fg-muted !px-[6.5px] !py-[6.5px]"
           onClick={() => setShowMenu((prev) => !prev)}
         >
           <QuestionMark />

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

@@ -9,11 +9,13 @@ import { MainNavigationDropdownIcon } from "../Icon"
 export type MainNavigationDropdownSelectedProps = {
   item: NavigationDropdownItem
   onClick: () => void
+  isActive: boolean
 }
 
 export const MainNavigationDropdownSelected = ({
   item,
   onClick,
+  isActive,
 }: MainNavigationDropdownSelectedProps) => {
   if (item.type === "divider") {
     return <></>
@@ -22,15 +24,22 @@ export const MainNavigationDropdownSelected = ({
   return (
     <div
       className={clsx(
-        "flex justify-between items-center",
-        "cursor-pointer rounded-docs_sm hover:bg-medusa-bg-hover"
+        "flex justify-between items-center gap-docs_0.25",
+        "cursor-pointer rounded-docs_sm group"
       )}
       tabIndex={-1}
       onClick={onClick}
     >
       <MainNavigationDropdownIcon icon={item.icon} />
-      <div className="flex gap-[6px] py-docs_0.25 px-docs_0.5 items-center">
-        <span className="text-medusa-fg-base whitespace-nowrap flex-1">
+      <div
+        className={clsx(
+          "flex gap-[6px] py-docs_0.25 px-docs_0.5",
+          "items-center group-hover:bg-medusa-button-transparent-hover",
+          "rounded-docs_sm",
+          isActive && "bg-medusa-button-transparent-hover"
+        )}
+      >
+        <span className="text-medusa-fg-base whitespace-nowrap flex-1 text-compact-small-plus">
           {item.title}
         </span>
         <TrianglesMini className="text-medusa-fg-muted" />

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

@@ -34,6 +34,7 @@ export const MainNavigationDropdown = () => {
         <MainNavigationDropdownSelected
           item={selectedItem}
           onClick={() => setMenuOpen((prev) => !prev)}
+          isActive={menuOpen}
         />
       )}
       <MainNavigationDropdownMenu

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

@@ -4,9 +4,14 @@ import clsx from "clsx"
 import React from "react"
 import { MainNavigationDropdown } from "./NavigationDropdown"
 import { MainNavBreadcrumbs } from "./Breadcrumb"
-import { Button, SearchModalOpener, useMainNav, useSidebar } from "../.."
+import {
+  Button,
+  LinkButton,
+  SearchModalOpener,
+  useMainNav,
+  useSidebar,
+} from "../.."
 import { MainNavColorMode } from "./ColorMode"
-import Link from "next/link"
 import { MainNavDivider } from "./Divider"
 import { MainNavSidebarOpener } from "./SidebarOpener"
 import { MainNavHelpButton } from "./HelpButton"
@@ -39,7 +44,9 @@ export const MainNav = () => {
       <div className="flex items-center gap-docs_0.75">
         <div className="flex items-center gap-[6px] text-medusa-fg-muted">
           {editDate && <MainNavEditDate date={editDate} />}
-          <Link href={reportIssueLink}>Report Issue</Link>
+          <LinkButton href={reportIssueLink} variant="muted" target="_blank">
+            Report Issue
+          </LinkButton>
         </div>
         <MainNavDivider />
         <div className="flex items-center gap-docs_0.25">