modified the color of search icon in both light and dark mode, hovere…

…d and unhovered, using MainContext & defining style classes
eclipse · May 9, 2023 · 2032c8c · 2032c8c
1 parent 2252936
commit 2032c8c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git 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
@@ -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>