From 797cd48bd3c406bf3b046462b182b437319c7a2f Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Mon, 25 Sep 2023 18:36:42 +0300
Subject: [PATCH] docs(ui): dark mode fixes (#5204)

* docs(ui): dark mode fixes

* apply color on the body

* remove z-index
---
 www/apps/ui/src/components/navbar.tsx    | 2 +-
 www/apps/ui/src/examples/drawer-demo.tsx | 6 ++++--
 www/apps/ui/src/styles/globals.css       | 6 +++++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/www/apps/ui/src/components/navbar.tsx b/www/apps/ui/src/components/navbar.tsx
index 4032b98904..d4c8791f7b 100644
--- a/www/apps/ui/src/components/navbar.tsx
+++ b/www/apps/ui/src/components/navbar.tsx
@@ -18,7 +18,7 @@ const Navbar = () => {
         setMobileSidebarOpen,
         mobileSidebarOpen,
       }}
-      className="!z-[99]"
+      className="!z-[49]"
     />
   )
 }
diff --git a/www/apps/ui/src/examples/drawer-demo.tsx b/www/apps/ui/src/examples/drawer-demo.tsx
index 1f3a55f513..583170deeb 100644
--- a/www/apps/ui/src/examples/drawer-demo.tsx
+++ b/www/apps/ui/src/examples/drawer-demo.tsx
@@ -1,4 +1,4 @@
-import { Button, Drawer } from "@medusajs/ui"
+import { Button, Drawer, Text } from "@medusajs/ui"
 
 export default function DrawerDemo() {
   return (
@@ -10,7 +10,9 @@ export default function DrawerDemo() {
         <Drawer.Header>
           <Drawer.Title>Edit Variant</Drawer.Title>
         </Drawer.Header>
-        <Drawer.Body></Drawer.Body>
+        <Drawer.Body className="p-4">
+          <Text>This is where you edit the variant&apos;s details</Text>
+        </Drawer.Body>
         <Drawer.Footer>
           <Drawer.Close asChild>
             <Button variant="secondary">Cancel</Button>
diff --git a/www/apps/ui/src/styles/globals.css b/www/apps/ui/src/styles/globals.css
index d9f04535b3..945554a7da 100644
--- a/www/apps/ui/src/styles/globals.css
+++ b/www/apps/ui/src/styles/globals.css
@@ -18,7 +18,11 @@
     @apply !bg-medusa-code-text-highlight;
   }
 
+  body {
+    @apply text-ui-fg-subtle;
+  }
+
   body[data-modal="opened"] {
-    @apply !overflow-hidden;
+    @apply !overflow-hidden text-ui-fg-base;
   }
 }