fix(plugins/plugin-client-common): split headers have low contrast in dark themes

part of #7538

Author: starpit

plugins/plugin-client-common/src/components/Views/Terminal/ScrollableTerminal.tsx

@@ -45,6 +45,7 @@ import {
 
 import Block from './Block'
 import getSize from './getSize'
+import SplitHeader from './SplitHeader'
 import { NotebookImpl, isNotebookImpl, snapshot, FlightRecorder, tabAlignment } from './Snapshot'
 import KuiConfiguration from '../../Client/KuiConfiguration'
 import { onCopy, onCut, onPaste } from './ClipboardTransfer'
@@ -1324,20 +1325,6 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
     })
   }
 
-  /** Render a header for the given split */
-  private splitHeader(scrollback: ScrollbackState) {
-    return (
-      this.state.splits.length > 1 && (
-        <div className="kui--split-header flex-layout kui--inverted-color-context">
-          <div className="flex-fill" />
-          <div className="kui--split-close-button" onClick={scrollback.remove}>
-            &#x2A2F;
-          </div>
-        </div>
-      )
-    )
-  }
-
   /** Render one split */
   private split(scrollback: ScrollbackState, sbidx: number) {
     const tab = this.tabFor(scrollback)
@@ -1356,7 +1343,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
         onClick={scrollback.onClick}
       >
         <React.Fragment>
-          {this.splitHeader(scrollback)}
+          {this.state.splits.length > 1 && <SplitHeader onRemove={scrollback.remove} />}
           <ul className="kui--scrollback-block-list">{this.blocks(tab, scrollback, sbidx)}</ul>
         </React.Fragment>
       </div>

plugins/plugin-client-common/src/components/Views/Terminal/SplitHeader.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2021 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react'
+
+import '../../../../web/scss/components/Terminal/SplitHeader.scss'
+
+interface Props {
+  onRemove(): void
+}
+
+/** Render a header for the given split */
+export default class SplitHeader extends React.PureComponent<Props> {
+  public render() {
+    return (
+      <div className="kui--split-header flex-layout kui--inverted-color-context">
+        <div className="flex-fill" />
+        <div className="kui--split-close-button" onClick={this.props.onRemove}>
+          &#x2A2F;
+        </div>
+      </div>
+    )
+  }
+}

plugins/plugin-client-common/web/scss/components/Terminal/SplitHeader.scss

@@ -17,10 +17,15 @@
 @import 'mixins';
 
 @include SplitHeader {
-  opacity: 0.925;
   padding: 0.125em 0;
+  padding-left: $input-padding-left;
   padding-right: $input-padding-right;
-  background-color: var(--color-stripe-01);
+
+  opacity: 0.925;
+  background-color: var(--color-sidecar-toolbar-background);
+  & > div {
+    color: var(--color-sidecar-toolbar-foreground);
+  }
 }
 
 @include SplitHeaderClose {

plugins/plugin-client-common/web/scss/components/Terminal/_index.scss

@@ -22,4 +22,3 @@
 @import 'Scrollback';
 @import 'SourceRef';
 @import 'Spinner';
-@import 'SplitHeader';