Fix ClearAdonment for light theme

app/src/components/Layout/TitleBar.tsx

@@ -103,7 +103,7 @@ class TitleBar extends React.Component<Props, {}> {
           value={topicFilter}
           onChange={this.onFilterChange}
           placeholder="Search…"
-          endAdornment={<div style={{ width: '24px', paddingRight: '8px' }}><ClearAdornment action={this.clearFilter} value={topicFilter} /></div>}
+          endAdornment={<div style={{ width: '24px', paddingRight: '8px' }}><ClearAdornment variant="primary" action={this.clearFilter} value={topicFilter} /></div>}
           classes={{ root: classes.inputRoot, input: classes.inputInput }}
         />
       </div>

app/src/components/helper/ClearAdornment.tsx

@@ -1,28 +1,30 @@
 import * as React from 'react'
 import Clear from '@material-ui/icons/Clear'
-import { IconButton } from '@material-ui/core'
+import { IconButton, Theme } from '@material-ui/core'
+import { withTheme } from '@material-ui/core/styles'
 
 interface Props {
   value?: string
   action: any
   style?: React.CSSProperties
+  variant?: 'primary'
+  theme: Theme
 }
 
 /**
  * Clear button for text input fields
  */
-class ClearAdornment extends React.Component<Props, {}> {
+function ClearAdornment(props: Props) {
-  public render() {
+  if (!props.value) {
-    if (this.props.value) {
+    return null
+  }
+
+  const color = props.variant === 'primary' ? props.theme.palette.primary.contrastText : undefined
   return (
-        <IconButton style={{ ...this.props.style, padding: '1px' }} onClick={this.props.action}>
+    <IconButton style={{ ...props.style, padding: '1px' }} onClick={props.action}>
-          <Clear style={{ fontSize: '16px' }} />
+      <Clear style={{ color, fontSize: '16px' }} />
     </IconButton>
   )
 }
 
-    return null
+export default withTheme(ClearAdornment)
-  }
-}
-
-export default ClearAdornment