From 46610352eb00a8eeb831af06de1defbfd199a6f5 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 8 Nov 2023 05:05:09 +0100
Subject: [PATCH] Fix react-contexify styling (#18802)

* fix storage popover bg

* fix react-contexify bgs

* fix react-contexify styling

* fix react-contexify styling

* fix react-contexify styling

* fix react-contexify styling
---
 .../components/grid/components/menu/RowContextMenu.tsx |  2 +-
 studio/styles/contextMenu.scss                         | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/studio/components/grid/components/menu/RowContextMenu.tsx b/studio/components/grid/components/menu/RowContextMenu.tsx
index 3bdde7454d3..879181b81ef 100644
--- a/studio/components/grid/components/menu/RowContextMenu.tsx
+++ b/studio/components/grid/components/menu/RowContextMenu.tsx
@@ -60,7 +60,7 @@ const RowContextMenu = ({ rows }: RowContextMenuProps) => {
 
   return (
     <>
-      <Menu id={ROW_CONTEXT_MENU_ID} animation={false} className="!bg-surface-200">
+      <Menu id={ROW_CONTEXT_MENU_ID} animation={false}>
         <Item onClick={onCopyCellContent}>
           <IconClipboard size="tiny" />
           <span className="ml-2 text-xs">Copy cell content</span>
diff --git a/studio/styles/contextMenu.scss b/studio/styles/contextMenu.scss
index 9608d8dc8e5..04c8581f197 100644
--- a/studio/styles/contextMenu.scss
+++ b/studio/styles/contextMenu.scss
@@ -1,8 +1,10 @@
 .react-contexify {
-  @apply bg-surface-100 border border-default;
+  @apply border border-default;
+  background-color: hsl(var(--background-surface-100)) !important;
+
   .react-contexify__item {
     .react-contexify__item__content {
-      @apply dark:text-white text-sm;
+      @apply text-foreground text-sm;
     }
     .react-contexify__submenu {
       @apply bg-surface-100 border;
@@ -12,9 +14,9 @@
     > .react-contexify__item__content,
   .react-contexify__item:not(.react-contexify__item--disabled):focus
     > .react-contexify__item__content {
-    @apply dark:bg-overlay-hover;
+    @apply bg-overlay-hover;
   }
   .react-contexify__separator {
-    @apply dark:bg-overlay;
+    @apply bg-overlay;
   }
 }