Fix readability of filter input field in dark mode

Sascha created

Change summary

webui/src/pages/list/Filter.tsx | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)

Detailed changes

webui/src/pages/list/Filter.tsx 🔗

@@ -10,14 +10,21 @@ import TextField from '@material-ui/core/TextField';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 
-const CustomTextField = withStyles({
+const CustomTextField = withStyles((theme) => ({
   root: {
     margin: '0 8px 12px 8px',
     '& label.Mui-focused': {
       margin: '0 2px',
+      color: theme.palette.text.secondary,
+    },
+    '& .MuiInput-underline::before': {
+      borderBottomColor: theme.palette.divider,
+    },
+    '& .MuiInput-underline::after': {
+      borderBottomColor: theme.palette.divider,
     },
   },
-})(TextField);
+}))(TextField);
 
 const ITEM_HEIGHT = 48;