docs: redesign tabs (#5687)

* redesigned tabs

* design fixes

www/apps/docs/content/development/backend/prepare-environment.mdx

@@ -69,6 +69,8 @@ node -v
   </TabItem>
 </Tabs>
 
+---
+
 ## Git
 
 Medusa uses Git behind the scenes when you create a new project. So, you'll have to install it on your machine to get started.
@@ -99,6 +101,8 @@ Medusa uses Git behind the scenes when you create a new project. So, you'll have
   </TabItem>
 </Tabs>
 
+---
+
 ## PostgreSQL
 
 The Medusa backend uses PostgreSQL to store data of your commerce system.
@@ -126,6 +130,8 @@ The Medusa backend uses PostgreSQL to store data of your commerce system.
   </TabItem>
 </Tabs>
 
+---
+
 ## (Optional) Medusa CLI
 
 Medusa provides a CLI tool that can aid your through your Medusa development. You can install it globally, or you can use it through `npx`.

www/apps/docs/src/theme/Tabs/index.tsx

@@ -110,7 +110,7 @@ function TabList({
 
   return (
     <div
-      className={clsx(isCodeTabs && "code-header", !isCodeTabs && "[&+*]:pt-2")}
+      className={clsx(isCodeTabs && "code-header", !isCodeTabs && "[&+*]:pt-1")}
     >
       <div
         className={clsx(isCodeTabs && "relative overflow-auto")}
@@ -129,8 +129,10 @@ function TabList({
           aria-orientation="horizontal"
           className={clsx(
             "tabs",
-            isCodeTabs && "no-scrollbar",
             "list-none",
+            isCodeTabs && "no-scrollbar",
+            !isCodeTabs &&
+              "overflow-visible border-0 border-b border-solid border-medusa-border-base pb-1",
             className
           )}
         >
@@ -146,29 +148,28 @@ function TabList({
               onClick={handleTabChange}
               {...attributes}
               className={clsx(
-                isCodeTabs &&
+                isCodeTabs && [
                   "text-compact-small-plus py-0.25 border border-solid border-transparent whitespace-nowrap rounded-full [&:not(:first-child)]:ml-0.25",
-                "!mt-0 cursor-pointer",
+                  "z-[2] flex justify-center items-center",
-                attributes?.className,
-                isCodeTabs && "z-[2] flex justify-center items-center",
-                isCodeTabs &&
                   selectedValue !== value &&
-                  "text-medusa-code-text-subtle hover:!bg-medusa-code-bg-base",
+                    "text-medusa-code-text-subtle hover:!bg-medusa-code-bg-base",
-                isCodeTabs &&
                   selectedValue === value &&
-                  "text-medusa-code-text-base border border-solid border-medusa-code-border bg-medusa-code-bg-base xs:!border-none xs:!bg-transparent",
+                    "text-medusa-code-text-base border border-solid border-medusa-code-border bg-medusa-code-bg-base xs:!border-none xs:!bg-transparent",
-                !isCodeTabs &&
-                  "border-0 border-b-[3px] rounded inline-flex p-1 transition-[background-color] duration-200 ease-ease",
-                !isCodeTabs &&
-                  selectedValue === value &&
-                  "border-solid border-medusa-fg-base rounded-b-none",
-                !isCodeTabs &&
-                  selectedValue !== value &&
-                  "text-medusa-fg-subtle",
-                (!isCodeTabs || !attributes?.badge) && "px-0.75",
-                isCodeTabs &&
                   attributes?.badge &&
-                  "[&_.badge]:ml-0.5 [&_.badge]:py-0.125 [&_.badge]:px-[6px] [&_.badge]:rounded-full pl-0.75 pr-0.25"
+                    "[&_.badge]:ml-0.5 [&_.badge]:py-0.125 [&_.badge]:px-[6px] [&_.badge]:rounded-full pl-0.75 pr-0.25",
+                  !attributes?.badge && "px-0.75",
+                ],
+                !isCodeTabs && [
+                  "[&:not(:last-child)]:mr-0.5 px-0.75 py-[6px] txt-compact-small-plus",
+                  "border-0 rounded-full transition-shadow duration-200 ease-ease",
+                  selectedValue === value &&
+                    "text-medusa-fg-base shadow-card-rest dark:shadow-card-rest-dark",
+                  selectedValue !== value &&
+                    "text-medusa-fg-subtle hover:text-medusa-fg-base",
+                  "flex gap-0.5",
+                ],
+                "!mt-0 cursor-pointer",
+                attributes?.className
               )}
             >
               {label ?? value}
@@ -251,8 +252,7 @@ export default function Tabs(props: TabsProps): JSX.Element {
         "tabs-wrapper",
         props.wrapperClassName,
         isCodeTabs && "code-tabs",
-        !isCodeTabs &&
+        !isCodeTabs && "my-4"
-          "bg-docs-bg-surface p-1 border border-solid border-medusa-border-base rounded"
       )}
     >
       <TabsComponent