fix: terminal search box can have low contrast in dark themes

Author: starpit

plugins/plugin-codeflare/src/components/Terminal.tsx

@@ -217,14 +217,6 @@ export default class XTerm extends React.PureComponent<Props, State> {
     xterm.setOption("theme", itheme)
     xterm.setOption("fontFamily", val("monospace", "font"))
 
-    // strange. these values don't seem to have any effect
-    this.searchOptions.decorations = {
-      activeMatchBackground: val("var(--color-base09)"),
-      matchBackground: val("var(--color-base02)"),
-      matchOverviewRuler: val("var(--color-base05)"),
-      activeMatchColorOverviewRuler: val("var(--color-base05)"),
-    }
-
     try {
       const standIn = document.querySelector("body .repl .repl-input input")
       if (standIn) {
@@ -258,7 +250,11 @@ export default class XTerm extends React.PureComponent<Props, State> {
   private searchOptions: ISearchOptions = {
     regex: true,
     caseSensitive: true,
-    decorations: { matchOverviewRuler: "orange", activeMatchColorOverviewRuler: "green" }, // placeholder; see injectTheme above
+    decorations: { matchOverviewRuler: "orange", activeMatchColorOverviewRuler: "green" },
+    // ^^ re: odd colors; these need to be something in order for the
+    // our onSearch handler to be called... the actual values don't seem
+    // to matter at the moment; let's make them obvious so we can spot
+    // regressions in the future
   }
 
   private readonly onSearch = (filter: string) => {

plugins/plugin-codeflare/web/scss/components/Terminal/_index.scss

@@ -19,8 +19,31 @@
 @include CodeFlareToolbar {
   padding: 0;
   font-family: var(--font-sans-serif);
+  background-color: var(--color-base00);
+  min-height: 2em;
+
+  @include SearchBadge {
+    color: var(--color-text-01);
+  }
 
   @include SearchIcon {
     z-index: 10;
+    color: var(--color-text-02);
   }
+
+  @include SearchInputGroup {
+    background-color: transparent;
+    --pf-c-text-input-group__text--before--BorderColor: transparent;
+
+    input {
+      background-color: transparent;
+      color: var(--color-text-01);
+    }
+  }
+}
+
+@include SearchResultActive {
+  opacity: 0.2;
+  background-color: var(--color-base0E);
+  z-index: 10 !important;
 }

plugins/plugin-codeflare/web/scss/components/Terminal/_mixins.scss

@@ -20,8 +20,34 @@
   }
 }
 
+@mixin SearchInputGroup {
+  .pf-c-text-input-group {
+    @content;
+  }
+}
+
+@mixin SearchBadge {
+  .pf-c-badge {
+    @content;
+  }
+}
+
 @mixin SearchIcon {
   .pf-c-text-input-group__icon {
     @content;
   }
 }
+
+@mixin SearchResult {
+  .xterm-find-result-decoration {
+    @content;
+  }
+}
+
+@mixin SearchResultActive {
+  @include SearchResult {
+    &.xterm-find-active-result-decoration {
+      @content;
+    }
+  }
+}