From 7016c8940ceeba5255f735940ad34f123ad4a1e9 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 29 Sep 2023 17:17:24 +0300
Subject: [PATCH] docs: fix design issues (#5252)

* docs: fix design issues

* fix commands in installation tabs
---
 www/apps/api-reference/css/globals.css             | 14 --------------
 www/apps/ui/src/components/package-install.tsx     |  4 ++--
 .../docs-ui/src/components/CodeTabs/index.tsx      |  4 ++--
 www/packages/tailwind/base.tailwind.config.js      |  8 ++++++++
 4 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/www/apps/api-reference/css/globals.css b/www/apps/api-reference/css/globals.css
index 704966821b..88cbdb7db1 100644
--- a/www/apps/api-reference/css/globals.css
+++ b/www/apps/api-reference/css/globals.css
@@ -50,18 +50,4 @@
   body[data-modal="opened"] {
     @apply !overflow-hidden;
   }
-}
-
-@layer utilities {
-  .clip {
-    clip-path: inset(0);
-  }
-
-  .no-marker {
-    @apply marker:content-none;
-  }
-
-  .no-marker::-webkit-details-marker {
-    @apply hidden;
-  }
 }
\ No newline at end of file
diff --git a/www/apps/ui/src/components/package-install.tsx b/www/apps/ui/src/components/package-install.tsx
index 409b072ced..d60c930753 100644
--- a/www/apps/ui/src/components/package-install.tsx
+++ b/www/apps/ui/src/components/package-install.tsx
@@ -23,8 +23,8 @@ const PackageInstall = ({
   return (
     <CodeTabs
       tabs={[
-        { code: { lang: "bash", source: yarn }, label: "npm", value: "npm" },
-        { code: { lang: "bash", source: npm }, label: "yarn", value: "yarn" },
+        { code: { lang: "bash", source: npm }, label: "npm", value: "npm" },
+        { code: { lang: "bash", source: yarn }, label: "yarn", value: "yarn" },
         { code: { lang: "bash", source: pnpm }, label: "pnpm", value: "pnpm" },
       ]}
       className={clx("my-4", className)}
diff --git a/www/packages/docs-ui/src/components/CodeTabs/index.tsx b/www/packages/docs-ui/src/components/CodeTabs/index.tsx
index e52fe54e80..47b0ad40c9 100644
--- a/www/packages/docs-ui/src/components/CodeTabs/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeTabs/index.tsx
@@ -72,7 +72,7 @@ export const CodeTabs = ({
       <span
         className={clsx(
           "xs:absolute xs:border xs:border-solid xs:border-medusa-code-border xs:bg-medusa-code-bg-base",
-          "xs:transition-all xs:duration-200 xs:ease-ease xs:top-[13px] xs:z-[1] xs:rounded-full"
+          "xs:transition-all xs:duration-200 xs:ease-ease xs:top-[13px] xs:rounded-full"
         )}
         ref={codeTabSelectorRef}
       ></span>
@@ -87,7 +87,7 @@ export const CodeTabs = ({
           <li key={index}>
             <button
               className={clsx(
-                "text-compact-small-plus xs:border-0 py-docs_0.25 px-docs_0.75 relative z-[2] rounded-full border",
+                "text-compact-small-plus xs:border-0 py-docs_0.25 px-docs_0.75 relative rounded-full border",
                 (!selectedTab || selectedTab.value !== tab.value) && [
                   "text-medusa-code-text-subtle border-transparent",
                   "hover:bg-medusa-code-bg-base",
diff --git a/www/packages/tailwind/base.tailwind.config.js b/www/packages/tailwind/base.tailwind.config.js
index 102d60f979..d921734414 100644
--- a/www/packages/tailwind/base.tailwind.config.js
+++ b/www/packages/tailwind/base.tailwind.config.js
@@ -570,6 +570,14 @@ module.exports = {
         ".animate-fast": {
           animationDuration: "300ms",
         },
+        ".clip": {
+          clipPath: "inset(0)",
+        },
+        ".no-marker": {
+          "&::-webkit-details-marker": {
+            display: "none",
+          },
+        },
       })
       addComponents({
         ".btn-secondary-icon": {