fix: menu bg colors (#433)

freeCodeCamp · Feb 9, 2024 · 7e5b9db · 7e5b9db
1 parent 25f71f6
commit 7e5b9db
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/apps/frontend/src/components/tiptap.jsx b/apps/frontend/src/components/tiptap.jsx
@@ -7,6 +7,7 @@ import {
   MenuList,
   Text,
   useColorMode,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import {
   autoUpdate,
@@ -273,6 +274,7 @@ function ToolBar({ editor, user }) {
 }
 
 function BubbleMenuBar({ editor, isLinkHover }) {
+  const menuBgColor = useColorModeValue("white", "gray.700");
   const addLink = () => {
     const url = window.prompt("URL");
 
@@ -292,7 +294,7 @@ function BubbleMenuBar({ editor, isLinkHover }) {
         borderRadius="lg"
         overflowX="auto"
         id="bubble-menu"
-        background="white"
+        background={menuBgColor}
       >
         <Button
           variant="ghost"
@@ -337,14 +339,16 @@ function HoverMenuBar({
   linkEl,
   setLinkEl,
 }) {
+  const menuBgColor = useColorModeValue("white", "gray.700");
+
   return (
     <Box
       p="0.2rem"
       border="1px solid silver"
       borderRadius="lg"
       overflowX="auto"
       id="bubble-menu"
-      background="white"
+      background={menuBgColor}
       width="fit-content"
       visibility={
         floatingMiddleware.hide?.referenceHidden ? "hidden" : "visible"