[canvas] Convert color="ghost" button to dark mode wrapper

elastic · Oct 18, 2023 · d10b7d6 · d10b7d6
1 parent 8bd62dd
commit d10b7d6
Showing 1 changed file with 16 additions and 7 deletions.
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/settings.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/settings.tsx
@@ -6,7 +6,14 @@
  */
 
 import React, { useState, FC } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiPopover,
+  EuiContextMenu,
+  EuiThemeProvider,
+} from '@elastic/eui';
 import { useCanvasShareableState } from '../../../context';
 import { Refs } from '../../../types';
 import { ToolbarSettings } from './toolbar_settings';
@@ -25,12 +32,14 @@ interface Props {
 export const SettingsComponent: FC<Props> = ({ refs }) => {
   const [isPopoverOpen, setPopoverOpen] = useState(false);
   const button = (
-    <EuiButtonIcon
-      color="ghost"
-      iconType="gear"
-      aria-label="Settings"
-      onClick={() => setPopoverOpen(!isPopoverOpen)}
-    />
+    <EuiThemeProvider colorMode="dark">
+      <EuiButtonIcon
+        color="text"
+        iconType="gear"
+        aria-label="Settings"
+        onClick={() => setPopoverOpen(!isPopoverOpen)}
+      />
+    </EuiThemeProvider>
   );
 
   const flattenPanelTree = (tree: any, array: any[] = []) => {