From 2032c8cd76699ec4cfbc05fdbbeb589b903fa523 Mon Sep 17 00:00:00 2001
From: Yining Wang <yining.wang@calian.ca>
Date: Tue, 25 Apr 2023 10:48:21 -0400
Subject: [PATCH] modified the color of search icon in both light and dark
 mode, hovered and unhovered, using MainContext & defining style classes

---
 webui/src/main.tsx                                |  4 +---
 .../extension-list/extension-list-searchfield.tsx | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/webui/src/main.tsx b/webui/src/main.tsx
index a47a7326f..cc44f267f 100644
--- a/webui/src/main.tsx
+++ b/webui/src/main.tsx
@@ -222,9 +222,7 @@ class MainComponent extends React.Component<MainComponent.Props, MainComponent.S
                             <Switch>
                                 <Route exact path={[ExtensionListRoutes.MAIN]}
                                     render={routeProps =>
-                                        <ExtensionListContainer
-                                            {...routeProps}
-                                        />
+                                        <ExtensionListContainer {...routeProps} />
                                     } />
                                 <Route path={UserSettingsRoutes.MAIN}
                                     render={routeProps =>
diff --git a/webui/src/pages/extension-list/extension-list-searchfield.tsx b/webui/src/pages/extension-list/extension-list-searchfield.tsx
index d1573e567..a9fd2928d 100644
--- a/webui/src/pages/extension-list/extension-list-searchfield.tsx
+++ b/webui/src/pages/extension-list/extension-list-searchfield.tsx
@@ -8,9 +8,10 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useContext } from 'react';
 import SearchIcon from '@material-ui/icons/Search';
 import { Paper, IconButton, makeStyles, InputBase } from '@material-ui/core';
+import { MainContext } from '../../context';
 
 const useStyles = makeStyles((theme) => ({
     search: {
@@ -35,6 +36,12 @@ const useStyles = makeStyles((theme) => ({
             filter: 'invert(100%)',
         }
     },
+    searchIconLight: {
+        color: '#ffffff',
+    },
+    searchIconDark: {
+        color: '#111111',
+    },
     error: {
         border: `2px solid ${theme.palette.error.main}`
     }
@@ -53,6 +60,8 @@ interface ExtensionListSearchfieldProps {
 export const ExtensionListSearchfield: FunctionComponent<ExtensionListSearchfieldProps> = props => {
     const classes = useStyles();
 
+    const { pageSettings } = useContext(MainContext);
+
     const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         props.onSearchChanged(event.target.value);
     };
@@ -63,6 +72,8 @@ export const ExtensionListSearchfield: FunctionComponent<ExtensionListSearchfiel
         }
     };
 
+    const searchIconClass = pageSettings?.themeType === 'dark' ? classes.searchIconDark : classes.searchIconLight;
+
     return (<>
         <Paper className={classes.search} classes={{ root: props.error ? classes.error : '' }}>
             <InputBase
@@ -88,7 +99,7 @@ export const ExtensionListSearchfield: FunctionComponent<ExtensionListSearchfiel
             {
                 props.hideIconButton ? '' :
                     <IconButton color='primary' aria-label='Search' classes={{ root: classes.iconButton }} onClick={handleSearchButtonClick}>
-                        <SearchIcon />
+                        <SearchIcon classes={{ root: searchIconClass }} />
                     </IconButton>
             }
         </Paper>