docs: design polish (#8696)

* polish

* finish polish

* change typography

www/packages/docs-ui/src/components/Menu/Action/index.tsx

@@ -10,25 +10,27 @@ export type MenuActionProps = {
 
 export const MenuAction = ({ item }: MenuActionProps) => {
   return (
-    <span
-      className={clsx(
-        "flex py-docs_0.25 px-docs_0.5",
-        "gap-docs_0.5 rounded-docs_xs",
-        "hover:bg-medusa-bg-component-hover",
-        "text-medusa-fg-base cursor-pointer"
-      )}
-      tabIndex={-1}
-      onClick={item.action}
-    >
-      <span className="text-medusa-fg-subtle mt-[2.5px] block">
-        {item.icon}
-      </span>
-      <span className="text-compact-small flex-1">{item.title}</span>
-      {item.shortcut && (
-        <span className="text-medusa-fg-subtle text-compact-small">
-          {item.shortcut}
+    <div className="px-docs_0.25">
+      <span
+        className={clsx(
+          "flex py-docs_0.25 px-docs_0.5",
+          "gap-docs_0.5 rounded-docs_xs",
+          "hover:bg-medusa-bg-component-hover",
+          "text-medusa-fg-base cursor-pointer"
+        )}
+        tabIndex={-1}
+        onClick={item.action}
+      >
+        <span className="text-medusa-fg-subtle mt-[2.5px] block">
+          {item.icon}
         </span>
-      )}
-    </span>
+        <span className="text-compact-small flex-1">{item.title}</span>
+        {item.shortcut && (
+          <span className="text-medusa-fg-subtle text-compact-small">
+            {item.shortcut}
+          </span>
+        )}
+      </span>
+    </div>
   )
 }

www/packages/docs-ui/src/components/Menu/Divider/index.tsx

@@ -3,5 +3,34 @@
 import React from "react"
 
 export const MenuDivider = () => {
-  return <hr className="bg-medusa-border-menu-top mt-[3px] mb-[3px]" />
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 205 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        width="197"
+        height="8"
+        transform="translate(4)"
+        fill="var(--docs-bg-component)"
+      />
+      <rect
+        x="-4"
+        y="3"
+        width="213"
+        height="1"
+        fill="var(--docs-border-menu-top)"
+      />
+      <rect
+        x="-4"
+        y="4"
+        width="213"
+        height="1"
+        fill="var(--docs-border-menu-bot)"
+      />
+    </svg>
+  )
 }

www/packages/docs-ui/src/components/Menu/Item/index.tsx

@@ -11,19 +11,21 @@ export type MenuItemProps = {
 
 export const MenuItem = ({ item }: MenuItemProps) => {
   return (
-    <Link
-      className={clsx(
-        "flex py-docs_0.25 px-docs_0.5",
-        "gap-docs_0.5 rounded-docs_xs",
-        "hover:bg-medusa-bg-component-hover",
-        "text-medusa-fg-base"
-      )}
-      href={item.link}
-    >
-      <span className="text-medusa-fg-subtle mt-[2.5px] block">
-        {item.icon}
-      </span>
-      <span className="text-compact-small">{item.title}</span>
-    </Link>
+    <div className="px-docs_0.25">
+      <Link
+        className={clsx(
+          "flex py-docs_0.25 px-docs_0.5",
+          "gap-docs_0.5 rounded-docs_xs",
+          "hover:bg-medusa-bg-component-hover",
+          "text-medusa-fg-base"
+        )}
+        href={item.link}
+      >
+        <span className="text-medusa-fg-subtle mt-[2.5px] block">
+          {item.icon}
+        </span>
+        <span className="text-compact-small">{item.title}</span>
+      </Link>
+    </div>
   )
 }

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

@@ -14,7 +14,7 @@ export const Menu = ({ items, className }: MenuProps) => {
   return (
     <div
       className={clsx(
-        "bg-medusa-bg-component p-docs_0.25 rounded-docs_DEFAULT",
+        "bg-medusa-bg-component py-docs_0.25 rounded-docs_DEFAULT",
         "shadow-elevation-flyout dark:shadow-elevation-flyout-dark",
         className
       )}