From 60330f19856772991bddcc073a740bc5ba337838 Mon Sep 17 00:00:00 2001
From: Daniel Adu-Gyan <26229521+danieladugyan@users.noreply.github.com>
Date: Wed, 12 Jun 2024 14:52:26 +0200
Subject: [PATCH] Fix ugly outline around graph style picker

---
 .../PropertiesPanelContent/StyleableNodeLabel.tsx          | 5 +++--
 .../VisualizationView/PropertiesPanelContent/styled.tsx    | 7 +++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/StyleableNodeLabel.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/StyleableNodeLabel.tsx
index a3f510ab537..5702cba1d97 100644
--- a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/StyleableNodeLabel.tsx
+++ b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/StyleableNodeLabel.tsx
@@ -24,6 +24,7 @@ import { StyledLabelChip } from 'neo4j-arc/common'
 import { GraphStyleModel } from 'neo4j-arc/graph-visualization'
 
 import { GrassEditor } from './GrassEditor'
+import { StyledPopup } from './styled'
 
 export type StyleableNodeLabelProps = {
   selectedLabel: {
@@ -48,7 +49,7 @@ export function StyleableNodeLabel({
     selectedLabel.label === '*' ? allNodesCount : selectedLabel.count
 
   return (
-    <Popup
+    <StyledPopup
       on="click"
       basic
       key={selectedLabel.label}
@@ -68,6 +69,6 @@ export function StyleableNodeLabel({
       }
     >
       <GrassEditor selectedLabel={selectedLabel} />
-    </Popup>
+    </StyledPopup>
   )
 }
diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/styled.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/styled.tsx
index a1987bc2ede..9d3dff4603a 100644
--- a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/styled.tsx
+++ b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/styled.tsx
@@ -17,10 +17,17 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { Popup, PopupProps } from 'semantic-ui-react'
 import styled from 'styled-components'
 
 export const legendRowHeight = 32
 
+export const StyledPopup = styled<React.ComponentType<PopupProps>>(Popup)`
+  && {
+    background: ${props => props.theme.editorBackground};
+  }
+`
+
 export const StyledInlineList = styled.ul`
   list-style: none;
   word-break: break-word;