From 022718d7d0831c246bbe01cc2d8fb66709be3189 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sat, 4 Jun 2022 07:18:32 -0700
Subject: Add filter config button

---
 modern/src/main/MainPage.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

(limited to 'modern/src')

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 27e2631f..50209568 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
-  Paper, Toolbar, TextField, IconButton, Button,
+  Paper, Toolbar, IconButton, Button, OutlinedInput, InputAdornment,
 } from '@mui/material';
 
 import makeStyles from '@mui/styles/makeStyles';
@@ -12,6 +12,7 @@ import AddIcon from '@mui/icons-material/Add';
 import CloseIcon from '@mui/icons-material/Close';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ListIcon from '@mui/icons-material/ViewList';
+import TuneIcon from '@mui/icons-material/Tune';
 
 import { useDispatch, useSelector } from 'react-redux';
 import DevicesList from './DevicesList';
@@ -192,13 +193,19 @@ const MainPage = () => {
                 <ArrowBackIcon />
               </IconButton>
             )}
-            <TextField
-              fullWidth
-              name="searchKeyword"
+            <OutlinedInput
+              placeholder={t('sharedSearchDevices')}
               value={searchKeyword}
-              autoComplete="searchKeyword"
               onChange={(event) => setSearchKeyword(event.target.value)}
-              placeholder={t('sharedSearchDevices')}
+              endAdornment={(
+                <InputAdornment position="end">
+                  <IconButton size="small" onClick={() => {}}>
+                    <TuneIcon fontSize="small" />
+                  </IconButton>
+                </InputAdornment>
+              )}
+              size="small"
+              fullWidth
             />
             <IconButton onClick={() => navigate('/settings/device')} disabled={deviceReadonly}>
               <AddIcon />
-- 
cgit v1.2.3