From 7a12aa04ac755c4bb4324d78a0bd1dc7d05757d2 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 8 Sep 2023 20:18:26 +0300
Subject: [PATCH] docs,api-ref: fix kbd styling (#4995)

* docs: fix kbd styling

* additional fixes
---
 www/api-reference/components/MDXComponents/Kbd/index.tsx | 4 ++--
 www/docs/content/create-medusa-app.mdx                   | 2 +-
 www/docs/src/css/_docusaurus.css                         | 5 -----
 www/docs/src/css/_variables.css                          | 8 ++++----
 www/docs/src/theme/MDXComponents/Kbd.tsx                 | 6 +++---
 5 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/www/api-reference/components/MDXComponents/Kbd/index.tsx b/www/api-reference/components/MDXComponents/Kbd/index.tsx
index f4425a7475a82..13342b3d48e9c 100644
--- a/www/api-reference/components/MDXComponents/Kbd/index.tsx
+++ b/www/api-reference/components/MDXComponents/Kbd/index.tsx
@@ -6,12 +6,12 @@ const Kbd = ({ children, className, ...props }: KbdProps) => {
   return (
     <kbd
       className={clsx(
-        "h-[22px] w-[22px] rounded-sm p-0",
+        "rounded-sm border-solid py-0 px-[6px]",
         "inline-flex items-center justify-center",
         "border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border",
         "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
         "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark",
-        "text-compact-x-small-plus",
+        "text-compact-x-small-plus font-monospace shadow-none",
         className
       )}
       {...props}
diff --git a/www/docs/content/create-medusa-app.mdx b/www/docs/content/create-medusa-app.mdx
index 4d3d29261c54c..8b99e1bd5c99e 100644
--- a/www/docs/content/create-medusa-app.mdx
+++ b/www/docs/content/create-medusa-app.mdx
@@ -133,7 +133,7 @@ You'll then be prompted to enter an admin email for your admin user. You'll be u
 
 If you didn't pass the `--with-nextjs-starter` option, you'll be asked if you want to install the [Next.js starter storefront](./starters/nextjs-medusa-starter.mdx) along with the Medusa backend. This will install the storefront under the `<PROJECT_NAME>-storefront` directory, where `<PROJECT_NAME>` is the name of the project you specified in step 2.
 
-If you want to install the storefront, type `y` and press `enter`. If not, you can use the default value `N` and just press `enter`.
+If you want to install the storefront, type `y` and press <kbd>enter</kbd>. If not, you can use the default value `N` and just press <kbd>enter</kbd>.
 
 :::note
 
diff --git a/www/docs/src/css/_docusaurus.css b/www/docs/src/css/_docusaurus.css
index b587433e296e1..be51cd463427d 100644
--- a/www/docs/src/css/_docusaurus.css
+++ b/www/docs/src/css/_docusaurus.css
@@ -181,11 +181,6 @@ details summary {
   @apply hidden;
 }
 
-.markdown kbd {
-  @apply !font-monospace !bg-medusa-bg-component dark:!bg-medusa-bg-component-dark !text-medusa-fg-subtle dark:!text-medusa-fg-subtle-dark;
-  @apply !rounded-md !border-medusa-border-strong dark:!border-medusa-border-strong-dark !shadow-none;
-}
-
 .theme-doc-footer {
   @apply !mt-0 border-0 !border-t border-solid !border-medusa-border-base dark:!border-medusa-border-base-dark;
   @apply pt-2;
diff --git a/www/docs/src/css/_variables.css b/www/docs/src/css/_variables.css
index b3eac870932f6..4ca25c1f4f0f8 100644
--- a/www/docs/src/css/_variables.css
+++ b/www/docs/src/css/_variables.css
@@ -75,7 +75,7 @@
   /* Inline Code */
   --ifm-code-border-radius: theme(borderRadius.DEFAULT);
   --ifm-code-padding-horizontal: theme(padding[0.5]);
-  --ifm-code-background: theme(colors.medusa.bg.subtle.DEFAULT) !important;
+  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.DEFAULT) !important;
 
   /* Code Blocks */
   --ifm-pre-background: theme(colors.medusa.code.bg.base.DEFAULT);
@@ -154,7 +154,7 @@ html[data-theme="dark"] {
   --ifm-navbar-link-color: theme(colors.medusa.fg.subtle.dark);
 
   /* Inline Code */
-  --ifm-code-background: theme(colors.medusa.bg.base.dark) !important;
+  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.dark) !important;
 
   /* Code Blocks */
   --ifm-pre-background: theme(colors.medusa.code.bg.base.dark);
@@ -200,9 +200,9 @@ html[data-theme="dark"] {
 }
 
 .alert {
-  --ifm-code-background: theme(colors.medusa.bg.subtle.DEFAULT) !important;
+  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.DEFAULT) !important;
 }
 
 html[data-theme="dark"] .alert {
-  --ifm-code-background: theme(colors.medusa.bg.subtle.dark) !important;
+  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.dark) !important;
 }
\ No newline at end of file
diff --git a/www/docs/src/theme/MDXComponents/Kbd.tsx b/www/docs/src/theme/MDXComponents/Kbd.tsx
index 0b9e58962a700..dc110e44fbca5 100644
--- a/www/docs/src/theme/MDXComponents/Kbd.tsx
+++ b/www/docs/src/theme/MDXComponents/Kbd.tsx
@@ -9,12 +9,12 @@ const Kbd: React.FC<KbdProps> = ({ children, className, ...props }) => {
   return (
     <kbd
       className={clsx(
-        "h-[22px] w-[22px] rounded-sm p-0 border-solid",
+        "rounded-sm py-0 px-[6px] border-solid",
         "inline-flex items-center justify-center",
-        "border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border",
+        "border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border border-solid",
         "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
         "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark",
-        "text-compact-x-small-plus shadow-none",
+        "text-compact-x-small-plus shadow-none !font-monospace",
         className
       )}
       {...props}