docs: design polish (#8696)

* polish

* finish polish

* change typography

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

@@ -69,7 +69,9 @@ export const SidebarItemCategory = ({
   )
 
   return (
-    <div className={clsx("my-docs_0.75 w-full relative", className)}>
+    <div
+      className={clsx("my-docs_0.75 first:!mt-0 w-full relative", className)}
+    >
       <div className="px-docs_0.75">
         <div
           className={clsx(

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

@@ -118,7 +118,12 @@ export const SidebarItemLink = ({
           shallow={!item.isPathHref}
           {...item.linkProps}
         >
-          <span className={clsx(isTitleOneWord && "truncate")}>
+          <span
+            className={clsx(
+              isTitleOneWord && "truncate",
+              nested && "inline-block pl-docs_1.5"
+            )}
+          >
             {item.title}
           </span>
           {item.additionalElms}
@@ -129,7 +134,6 @@ export const SidebarItemLink = ({
           className={clsx(
             "ease-ease overflow-hidden",
             "flex flex-col gap-docs_0.125",
-            !item.childrenSameLevel && "pl-docs_1.5",
             "pt-docs_0.125 pb-docs_0.5"
           )}
         >

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

@@ -116,7 +116,12 @@ export const SidebarItemSubCategory = ({
             className
           )}
         >
-          <span className={clsx(isTitleOneWord && "truncate")}>
+          <span
+            className={clsx(
+              isTitleOneWord && "truncate",
+              nested && "pl-docs_1.5"
+            )}
+          >
             {item.title}
           </span>
           {item.additionalElms}
@@ -127,7 +132,6 @@ export const SidebarItemSubCategory = ({
           className={clsx(
             "ease-ease overflow-hidden",
             "flex flex-col gap-docs_0.125",
-            !item.childrenSameLevel && "pl-docs_1.5",
             "pb-docs_0.5 pt-docs_0.125"
           )}
         >

www/packages/docs-ui/src/components/Sidebar/Top/MedusaMenu/index.tsx

@@ -46,7 +46,7 @@ export const SidebarTopMedusaMenu = () => {
         <span className="text-compact-small-plus text-medusa-fg-base flex-1">
           Medusa Docs
         </span>
-        <EllipsisHorizontal className="text-medusa-fg-subtle" />
+        <EllipsisHorizontal className="text-medusa-fg-muted" />
       </div>
       <div
         className={clsx(

www/packages/docs-ui/src/components/Sidebar/Top/index.tsx

@@ -24,7 +24,7 @@ export const SidebarTop = React.forwardRef<HTMLDivElement, SidebarTopProps>(
               <SidebarChild item={parentItem} />
             </>
           )}
-          <DottedSeparator className="!my-0" />
+          <DottedSeparator wrapperClassName="!my-0" />
         </div>
       </div>
     )