Fix outline around graph style picker (#1971)

Author: danieladugyan

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>
   )
 }

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;