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 <vlad.arama@ericsson.com>

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>;
     }

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 {