[Session View] Remove color="ghost" buttons (#169305)

## Summary 👋 Hey y'all - EUI will shortly be deprecating the `ghost` color in all button components (see https://eui.elastic.co/v89.0.0/#/navigation/button#ghost-vs-dark-mode). I'm opening this PR ahead of time for your team so you can test this migration and ensure no regressions have occurred as a result. While I'm confident in the theory of the changes, I'm not totally sure how to get to this actual terminal UI to test that the changes look good in-browser - I'd appreciate your team's help QAing! ### Checklist - [x] Tested in light and dark mode
elastic · Oct 24, 2023 · 1b7b094 · 1b7b094
1 parent 01ebda0
commit 1b7b094
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 25 deletions.
diff --git a/x-pack/plugins/session_view/public/components/tty_player/index.tsx b/x-pack/plugins/session_view/public/components/tty_player/index.tsx
@@ -5,7 +5,14 @@
  * 2.0.
  */
 import React, { useRef, useState, useCallback, useMemo, useEffect } from 'react';
-import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiButton } from '@elastic/eui';
+import {
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiButton,
+  EuiThemeProvider,
+} from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { CoreStart } from '@kbn/core/public';
 import useResizeObserver from 'use-resize-observer';
@@ -217,26 +224,28 @@ export const TTYPlayer = ({
         <div ref={ref} data-test-subj="sessionView:TTYPlayer" css={styles.terminal} />
       </div>
 
-      <TTYPlayerControls
-        currentProcessEvent={currentProcessEvent}
-        processStartMarkers={processStartMarkers}
-        isPlaying={isPlaying}
-        currentLine={currentLine}
-        linesLength={lines.length}
-        onSeekLine={onSeekLine}
-        onTogglePlayback={onTogglePlayback}
-        onClose={onClose}
-        onJumpToEvent={onJumpToEvent}
-        textSizer={
-          <TTYTextSizer
-            tty={tty}
-            containerHeight={containerHeight}
-            fontSize={fontSize}
-            onFontSizeChanged={setFontSize}
-            isFullscreen={isFullscreen}
-          />
-        }
-      />
+      <EuiThemeProvider colorMode="dark">
+        <TTYPlayerControls
+          currentProcessEvent={currentProcessEvent}
+          processStartMarkers={processStartMarkers}
+          isPlaying={isPlaying}
+          currentLine={currentLine}
+          linesLength={lines.length}
+          onSeekLine={onSeekLine}
+          onTogglePlayback={onTogglePlayback}
+          onClose={onClose}
+          onJumpToEvent={onJumpToEvent}
+          textSizer={
+            <TTYTextSizer
+              tty={tty}
+              containerHeight={containerHeight}
+              fontSize={fontSize}
+              onFontSizeChanged={setFontSize}
+              isFullscreen={isFullscreen}
+            />
+          }
+        />
+      </EuiThemeProvider>
     </div>
   );
 };
diff --git a/x-pack/plugins/session_view/public/components/tty_player_controls/index.tsx b/x-pack/plugins/session_view/public/components/tty_player_controls/index.tsx
@@ -59,7 +59,7 @@ export const TTYPlayerControls = ({
   const commonButtonProps: Partial<EuiButtonIconProps> = {
     display: 'empty',
     size: 's',
-    color: 'ghost',
+    color: 'text',
     css: styles.controlButton,
   };
 
@@ -188,7 +188,7 @@ export const TTYPlayerControls = ({
             onClick={handleViewInSession}
             iconType="arrowRight"
             aria-label={VIEW_IN_SESSION}
-            color="ghost"
+            color="text"
           >
             {VIEW_IN_SESSION}
           </EuiButtonEmpty>

diff --git a/x-pack/plugins/session_view/public/components/tty_text_sizer/index.tsx b/x-pack/plugins/session_view/public/components/tty_text_sizer/index.tsx
@@ -28,7 +28,7 @@ export interface TTYTextSizerDeps {
 const commonButtonProps: Partial<EuiButtonIconProps> = {
   display: 'empty',
   size: 's',
-  color: 'ghost',
+  color: 'text',
 };
 
 const LINE_HEIGHT_SCALE_RATIO = 1.3;
@@ -95,7 +95,7 @@ export const TTYTextSizer = ({
             iconType={fit ? 'expand' : 'minimize'}
             onClick={onToggleFit}
             size="s"
-            color="ghost"
+            color="text"
           />
         </EuiToolTip>
       </EuiFlexItem>