diff --git a/src/client/components/main_layout/TopBarSearchField.js b/src/client/components/main_layout/TopBarSearchField.js
index 2165024c994088e5d222139ebf4031ddb1690c3d..8e848cbff8d40ab8ae00d1e26c06f6356524eaac 100644
--- a/src/client/components/main_layout/TopBarSearchField.js
+++ b/src/client/components/main_layout/TopBarSearchField.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import intl from 'react-intl-universal'
 import { withStyles } from '@material-ui/core/styles'
-import { fade } from '@material-ui/core/styles/colorManipulator'
+import { alpha } from '@material-ui/core/styles/colorManipulator'
 import SearchIcon from '@material-ui/icons/Search'
 import InputBase from '@material-ui/core/InputBase'
 // import CircularProgress from '@material-ui/core/CircularProgress';
@@ -12,9 +12,9 @@ const styles = theme => ({
   search: {
     position: 'relative',
     borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
+    backgroundColor: alpha(theme.palette.common.white, 0.15),
     '&:hover': {
-      backgroundColor: fade(theme.palette.common.white, 0.25)
+      backgroundColor: alpha(theme.palette.common.white, 0.25)
     },
     // marginRight: theme.spacing(3),
     // marginLeft: theme.spacing(2.5),