search-in-workspace: improve search options styling (#12697)

The commit updates the styling for the search options in the search-in-workspace view. The input button which control "match case", "match whole word" and etc are updated similarly to other toolbar icons present in the application, and provide a more consistent look and feel. Signed-off-by: Vlad Arama <[email protected]>
eclipse-theia · Jul 13, 2023 · e52fc5b · e52fc5b
1 parent 39e778a
commit e52fc5b
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx b/packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx
@@ -563,7 +563,7 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
 
     protected renderOptionElement(opt: SearchFieldState): React.ReactNode {
         return <span
-            className={`${opt.className} option ${opt.enabled ? 'enabled' : ''}`}
+            className={`${opt.className} option action-label ${opt.enabled ? 'enabled' : ''}`}
             title={opt.title}
             onClick={() => this.handleOptionClick(opt)}></span>;
     }

diff --git a/packages/search-in-workspace/src/browser/styles/index.css b/packages/search-in-workspace/src/browser/styles/index.css
@@ -89,8 +89,10 @@
 }
 
 .t-siw-search-container .searchHeader .search-field .option.enabled {
+  color: var(--theia-inputOption-activeForeground);
   border: var(--theia-border-width) var(--theia-inputOption-activeBorder) solid;
   background-color: var(--theia-inputOption-activeBackground);
+  opacity: 1;
 }
 
 .t-siw-search-container .searchHeader .search-field .option:hover {