From e7e8d1c9a52b9b82fdcbf2d4d6f3134698eb0cf0 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Mon, 23 May 2022 07:30:04 -0700
Subject: Convert to outline inputs

---
 modern/src/common/components/ErrorHandler.js       |  2 +-
 modern/src/common/theme/index.js                   |  2 +-
 modern/src/login/LoginPage.js                      |  6 +--
 modern/src/login/RegisterPage.js                   |  6 +--
 modern/src/login/ResetPasswordPage.js              |  4 +-
 modern/src/main/MainPage.js                        |  2 +-
 modern/src/reports/ChartReportPage.js              |  2 +-
 modern/src/reports/EventReportPage.js              |  2 +-
 modern/src/reports/SummaryReportPage.js            |  2 +-
 modern/src/reports/components/ColumnSelect.js      |  2 +-
 modern/src/reports/components/ReportFilter.js      |  8 +--
 modern/src/settings/AccumulatorsPage.js            |  4 +-
 modern/src/settings/CalendarPage.js                |  2 +-
 modern/src/settings/CommandPage.js                 |  2 +-
 modern/src/settings/CommandSendPage.js             |  2 +-
 modern/src/settings/ComputedAttributePage.js       |  8 +--
 modern/src/settings/DevicePage.js                  | 26 +++++-----
 modern/src/settings/DriverPage.js                  |  4 +-
 modern/src/settings/GeofencePage.js                |  2 +-
 modern/src/settings/GroupPage.js                   | 16 +++---
 modern/src/settings/MaintenancePage.js             |  8 +--
 modern/src/settings/NotificationPage.js            |  6 +--
 modern/src/settings/PreferencesPage.js             |  4 +-
 modern/src/settings/ServerPage.js                  | 22 ++++----
 modern/src/settings/UserPage.js                    | 58 +++++++++++-----------
 .../src/settings/components/AddAttributeDialog.js  |  4 +-
 modern/src/settings/components/BaseCommandView.js  |  4 +-
 .../src/settings/components/EditAttributesView.js  |  6 +--
 28 files changed, 108 insertions(+), 108 deletions(-)

(limited to 'modern')

diff --git a/modern/src/common/components/ErrorHandler.js b/modern/src/common/components/ErrorHandler.js
index 08ba8e12..d6735885 100644
--- a/modern/src/common/components/ErrorHandler.js
+++ b/modern/src/common/components/ErrorHandler.js
@@ -14,7 +14,7 @@ const ErrorHandler = () => {
     <Snackbar open={!!error}>
       <Alert
         elevation={6}
-        variant="filled"
+       
         onClose={() => dispatch(errorsActions.pop())}
         severity="error"
       >
diff --git a/modern/src/common/theme/index.js b/modern/src/common/theme/index.js
index 8e85150e..de0a7efd 100644
--- a/modern/src/common/theme/index.js
+++ b/modern/src/common/theme/index.js
@@ -5,7 +5,7 @@ import dimensions from './dimensions';
 
 const theme = createTheme(adaptV4Theme({
   palette,
-  overrides,
+  //overrides,
   dimensions,
 }));
 
diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index 4478c866..e7a110de 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -118,7 +118,7 @@ const LoginPage = () => {
             onChange={(e) => setEmail(e.target.value)}
             onKeyUp={handleSpecialKey}
             helperText={failed && 'Invalid username or password'}
-            variant="filled"
+           
           />
         </Grid>
         <Grid item>
@@ -134,7 +134,7 @@ const LoginPage = () => {
             autoFocus={!!email}
             onChange={(e) => setPassword(e.target.value)}
             onKeyUp={handleSpecialKey}
-            variant="filled"
+           
           />
         </Grid>
         <Grid item>
@@ -156,7 +156,7 @@ const LoginPage = () => {
             </Button>
           </Grid>
           <Grid item xs>
-            <FormControl variant="filled" fullWidth>
+            <FormControl fullWidth>
               <InputLabel>{t('loginLanguage')}</InputLabel>
               <Select value={language} onChange={(e) => setLanguage(e.target.value)}>
                 {languageList.map((it) => <MenuItem key={it.code} value={it.code}>{it.name}</MenuItem>)}
diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js
index ce09b63e..e0b408f4 100644
--- a/modern/src/login/RegisterPage.js
+++ b/modern/src/login/RegisterPage.js
@@ -81,7 +81,7 @@ const RegisterPage = () => {
             autoComplete="name"
             autoFocus
             onChange={(event) => setName(event.target.value)}
-            variant="filled"
+           
           />
         </Grid>
         <Grid item>
@@ -94,7 +94,7 @@ const RegisterPage = () => {
             value={email}
             autoComplete="email"
             onChange={(event) => setEmail(event.target.value)}
-            variant="filled"
+           
           />
         </Grid>
         <Grid item>
@@ -107,7 +107,7 @@ const RegisterPage = () => {
             type="password"
             autoComplete="current-password"
             onChange={(event) => setPassword(event.target.value)}
-            variant="filled"
+           
           />
         </Grid>
         <Grid item>
diff --git a/modern/src/login/ResetPasswordPage.js b/modern/src/login/ResetPasswordPage.js
index f9f4a88e..c74d3396 100644
--- a/modern/src/login/ResetPasswordPage.js
+++ b/modern/src/login/ResetPasswordPage.js
@@ -94,7 +94,7 @@ const ResetPasswordPage = () => {
                 value={email}
                 autoComplete="email"
                 onChange={(event) => setEmail(event.target.value)}
-                variant="filled"
+               
               />
             </Grid>
           )
@@ -109,7 +109,7 @@ const ResetPasswordPage = () => {
                 type="password"
                 autoComplete="current-password"
                 onChange={(event) => setPassword(event.target.value)}
-                variant="filled"
+               
               />
             </Grid>
           )}
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 0b3be6d2..2805ecd1 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -178,7 +178,7 @@ const MainPage = () => {
               autoComplete="searchKeyword"
               onChange={(event) => setSearchKeyword(event.target.value)}
               placeholder={t('sharedSearchDevices')}
-              variant="filled"
+             
             />
             <IconButton
               size="large"
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index e6c971df..461a6756 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -59,7 +59,7 @@ const ChartReportPage = () => {
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportChart']}>
       <ReportFilter handleSubmit={handleSubmit} showOnly>
         <div className={filterClasses.item}>
-          <FormControl variant="filled" fullWidth>
+          <FormControl fullWidth>
             <InputLabel>{t('reportChartType')}</InputLabel>
             <Select value={type} onChange={(e) => setType(e.target.value)}>
               {Object.keys(positionAttributes).filter((key) => positionAttributes[key].type === 'number').map((key) => (
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 2c6aaea5..352a4e13 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -99,7 +99,7 @@ const EventReportPage = () => {
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportEvents']}>
       <ReportFilter handleSubmit={handleSubmit}>
         <div className={classes.item}>
-          <FormControl variant="filled" fullWidth>
+          <FormControl fullWidth>
             <InputLabel>{t('reportEventTypes')}</InputLabel>
             <Select
               value={eventTypes}
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 1e905155..511a0e6e 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -81,7 +81,7 @@ const SummaryReportPage = () => {
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportSummary']}>
       <ReportFilter handleSubmit={handleSubmit}>
         <div className={classes.item}>
-          <FormControl variant="filled" fullWidth>
+          <FormControl fullWidth>
             <InputLabel>{t('sharedType')}</InputLabel>
             <Select value={daily} onChange={(e) => setDaily(e.target.value)}>
               <MenuItem value={false}>{t('reportSummary')}</MenuItem>
diff --git a/modern/src/reports/components/ColumnSelect.js b/modern/src/reports/components/ColumnSelect.js
index 04645cd5..543aa7bf 100644
--- a/modern/src/reports/components/ColumnSelect.js
+++ b/modern/src/reports/components/ColumnSelect.js
@@ -13,7 +13,7 @@ const ColumnSelect = ({
 
   return (
     <div className={classes.item}>
-      <FormControl variant="filled" fullWidth>
+      <FormControl fullWidth>
         <InputLabel>{t('sharedColumns')}</InputLabel>
         <Select
           value={columns}
diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index 9938a4ad..95502688 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -90,7 +90,7 @@ const ReportFilter = ({
     <div className={classes.filter}>
       {!ignoreDevice && (
         <div className={classes.item}>
-          <FormControl variant="filled" fullWidth>
+          <FormControl fullWidth>
             <InputLabel>{t('reportDevice')}</InputLabel>
             <Select value={deviceId || ''} onChange={(e) => setDeviceId(e.target.value)}>
               {Object.values(devices).map((device) => (
@@ -101,7 +101,7 @@ const ReportFilter = ({
         </div>
       )}
       <div className={classes.item}>
-        <FormControl variant="filled" fullWidth>
+        <FormControl fullWidth>
           <InputLabel>{t('reportPeriod')}</InputLabel>
           <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
             <MenuItem value="today">{t('reportToday')}</MenuItem>
@@ -117,7 +117,7 @@ const ReportFilter = ({
       {period === 'custom' && (
         <div className={classes.item}>
           <TextField
-            variant="filled"
+           
             label={t('reportFrom')}
             type="datetime-local"
             value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
@@ -129,7 +129,7 @@ const ReportFilter = ({
       {period === 'custom' && (
         <div className={classes.item}>
           <TextField
-            variant="filled"
+           
             label={t('reportTo')}
             type="datetime-local"
             value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
diff --git a/modern/src/settings/AccumulatorsPage.js b/modern/src/settings/AccumulatorsPage.js
index 31fb12aa..73091e50 100644
--- a/modern/src/settings/AccumulatorsPage.js
+++ b/modern/src/settings/AccumulatorsPage.js
@@ -85,7 +85,7 @@ const AccumulatorsPage = () => {
                 value={item.hours}
                 onChange={(event) => setItem({ ...item, hours: Number(event.target.value) })}
                 label={t('positionHours')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
@@ -93,7 +93,7 @@ const AccumulatorsPage = () => {
                 value={item.totalDistance}
                 onChange={(event) => setItem({ ...item, totalDistance: Number(event.target.value) })}
                 label={t('deviceTotalDistance')}
-                variant="filled"
+               
               />
             </AccordionDetails>
           </Accordion>
diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js
index f7bcb02a..f2f2da32 100644
--- a/modern/src/settings/CalendarPage.js
+++ b/modern/src/settings/CalendarPage.js
@@ -61,7 +61,7 @@ const CalendarPage = () => {
                 value={item.name || ''}
                 onChange={(event) => setItem({ ...item, name: event.target.value })}
                 label={t('sharedName')}
-                variant="filled"
+               
               />
               <DropzoneArea
                 filesLimit={1}
diff --git a/modern/src/settings/CommandPage.js b/modern/src/settings/CommandPage.js
index 6c816338..0f3522bd 100644
--- a/modern/src/settings/CommandPage.js
+++ b/modern/src/settings/CommandPage.js
@@ -45,7 +45,7 @@ const CommandPage = () => {
               value={item.description || ''}
               onChange={(event) => setItem({ ...item, description: event.target.value })}
               label={t('sharedDescription')}
-              variant="filled"
+             
             />
             <BaseCommandView item={item} setItem={setItem} />
           </AccordionDetails>
diff --git a/modern/src/settings/CommandSendPage.js b/modern/src/settings/CommandSendPage.js
index aa51489b..88519791 100644
--- a/modern/src/settings/CommandSendPage.js
+++ b/modern/src/settings/CommandSendPage.js
@@ -92,7 +92,7 @@ const CommandSendPage = () => {
               endpoint={`/api/commands/send?deviceId=${deviceId}`}
               titleGetter={(it) => it.description}
               label={t('sharedSavedCommand')}
-              variant="filled"
+             
             />
             {!savedId && (
               <BaseCommandView item={item} setItem={setItem} />
diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js
index c433b9e7..826fe422 100644
--- a/modern/src/settings/ComputedAttributePage.js
+++ b/modern/src/settings/ComputedAttributePage.js
@@ -73,9 +73,9 @@ const ComputedAttributePage = () => {
               value={item.description || ''}
               onChange={(event) => setItem({ ...item, description: event.target.value })}
               label={t('sharedDescription')}
-              variant="filled"
+             
             />
-            <FormControl variant="filled" margin="normal" fullWidth>
+            <FormControl margin="normal" fullWidth>
               <InputLabel>{t('sharedAttribute')}</InputLabel>
               <Select
                 value={item.attribute || ''}
@@ -93,10 +93,10 @@ const ComputedAttributePage = () => {
               label={t('sharedExpression')}
               multiline
               rows={4}
-              variant="filled"
+             
             />
             <FormControl
-              variant="filled"
+             
               margin="normal"
               fullWidth
               disabled={key in positionAttributes}
diff --git a/modern/src/settings/DevicePage.js b/modern/src/settings/DevicePage.js
index e5d0f995..2d45dff4 100644
--- a/modern/src/settings/DevicePage.js
+++ b/modern/src/settings/DevicePage.js
@@ -65,14 +65,14 @@ const DevicePage = () => {
                 value={item.name || ''}
                 onChange={(event) => setItem({ ...item, name: event.target.value })}
                 label={t('sharedName')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
                 value={item.uniqueId || ''}
                 onChange={(event) => setItem({ ...item, uniqueId: event.target.value })}
                 label={t('deviceIdentifier')}
-                variant="filled"
+               
               />
             </AccordionDetails>
           </Accordion>
@@ -89,28 +89,28 @@ const DevicePage = () => {
                 onChange={(event) => setItem({ ...item, groupId: Number(event.target.value) })}
                 endpoint="/api/groups"
                 label={t('groupParent')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
                 value={item.phone || ''}
                 onChange={(event) => setItem({ ...item, phone: event.target.value })}
                 label={t('sharedPhone')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
                 value={item.model || ''}
                 onChange={(event) => setItem({ ...item, model: event.target.value })}
                 label={t('deviceModel')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
                 value={item.contact || ''}
                 onChange={(event) => setItem({ ...item, contact: event.target.value })}
                 label={t('deviceContact')}
-                variant="filled"
+               
               />
               <SelectField
                 margin="normal"
@@ -122,7 +122,7 @@ const DevicePage = () => {
                   name: t(`category${category.replace(/^\w/, (c) => c.toUpperCase())}`),
                 }))}
                 label={t('deviceCategory')}
-                variant="filled"
+               
               />
               {admin && (
                 <FormControlLabel
@@ -162,7 +162,7 @@ const DevicePage = () => {
                   keyBase="deviceId"
                   keyLink="geofenceId"
                   label={t('sharedGeofences')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -173,7 +173,7 @@ const DevicePage = () => {
                   keyLink="notificationId"
                   titleGetter={(it) => t(prefixString('event', it.type))}
                   label={t('sharedNotifications')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -183,7 +183,7 @@ const DevicePage = () => {
                   keyBase="deviceId"
                   keyLink="driverId"
                   label={t('sharedDrivers')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -194,7 +194,7 @@ const DevicePage = () => {
                   keyLink="attributeId"
                   titleGetter={(it) => it.description}
                   label={t('sharedComputedAttributes')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -205,7 +205,7 @@ const DevicePage = () => {
                   keyLink="commandId"
                   titleGetter={(it) => it.description}
                   label={t('sharedSavedCommands')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -215,7 +215,7 @@ const DevicePage = () => {
                   keyBase="deviceId"
                   keyLink="maintenanceId"
                   label={t('sharedMaintenance')}
-                  variant="filled"
+                 
                 />
               </AccordionDetails>
             </Accordion>
diff --git a/modern/src/settings/DriverPage.js b/modern/src/settings/DriverPage.js
index f03682e3..c072c52b 100644
--- a/modern/src/settings/DriverPage.js
+++ b/modern/src/settings/DriverPage.js
@@ -47,14 +47,14 @@ const DriverPage = () => {
                 value={item.name || ''}
                 onChange={(event) => setItem({ ...item, name: event.target.value })}
                 label={t('sharedName')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
                 value={item.uniqueId || ''}
                 onChange={(event) => setItem({ ...item, uniqueId: event.target.value })}
                 label={t('deviceIdentifier')}
-                variant="filled"
+               
               />
             </AccordionDetails>
           </Accordion>
diff --git a/modern/src/settings/GeofencePage.js b/modern/src/settings/GeofencePage.js
index 3b8ac2ed..7dd47527 100644
--- a/modern/src/settings/GeofencePage.js
+++ b/modern/src/settings/GeofencePage.js
@@ -51,7 +51,7 @@ const GeofencePage = () => {
                 value={item.name || ''}
                 onChange={(event) => setItem({ ...item, name: event.target.value })}
                 label={t('sharedName')}
-                variant="filled"
+               
               />
             </AccordionDetails>
           </Accordion>
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index d4991c59..5cb0474d 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -56,7 +56,7 @@ const GroupPage = () => {
                 value={item.name || ''}
                 onChange={(event) => setItem({ ...item, name: event.target.value })}
                 label={t('sharedName')}
-                variant="filled"
+               
               />
             </AccordionDetails>
           </Accordion>
@@ -73,7 +73,7 @@ const GroupPage = () => {
                 onChange={(event) => setItem({ ...item, groupId: Number(event.target.value) })}
                 endpoint="/api/groups"
                 label={t('groupParent')}
-                variant="filled"
+               
               />
             </AccordionDetails>
           </Accordion>
@@ -107,7 +107,7 @@ const GroupPage = () => {
                   keyBase="groupId"
                   keyLink="geofenceId"
                   label={t('sharedGeofences')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -118,7 +118,7 @@ const GroupPage = () => {
                   keyLink="notificationId"
                   titleGetter={(it) => t(prefixString('event', it.type))}
                   label={t('sharedNotifications')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -128,7 +128,7 @@ const GroupPage = () => {
                   keyBase="groupId"
                   keyLink="driverId"
                   label={t('sharedDrivers')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -139,7 +139,7 @@ const GroupPage = () => {
                   keyLink="attributeId"
                   titleGetter={(it) => it.description}
                   label={t('sharedComputedAttributes')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -150,7 +150,7 @@ const GroupPage = () => {
                   keyLink="commandId"
                   titleGetter={(it) => it.description}
                   label={t('sharedSavedCommands')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -160,7 +160,7 @@ const GroupPage = () => {
                   keyBase="groupId"
                   keyLink="maintenanceId"
                   label={t('sharedMaintenance')}
-                  variant="filled"
+                 
                 />
               </AccordionDetails>
             </Accordion>
diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js
index 292e197e..599d600d 100644
--- a/modern/src/settings/MaintenancePage.js
+++ b/modern/src/settings/MaintenancePage.js
@@ -129,9 +129,9 @@ const MaintenancePage = () => {
                 value={item.name || ''}
                 onChange={(event) => setItem({ ...item, name: event.target.value })}
                 label={t('sharedName')}
-                variant="filled"
+               
               />
-              <FormControl variant="filled" margin="normal" fullWidth>
+              <FormControl margin="normal" fullWidth>
                 <InputLabel>{t('sharedType')}</InputLabel>
                 <Select
                   value={item.type || ''}
@@ -148,7 +148,7 @@ const MaintenancePage = () => {
                 value={rawToValue(item.start) || ''}
                 onChange={(event) => setItem({ ...item, start: valueToRaw(event.target.value) })}
                 label={t('maintenanceStart')}
-                variant="filled"
+               
                 InputProps={{
                   endAdornment: <InputAdornment position="start">{labels.start}</InputAdornment>,
                 }}
@@ -159,7 +159,7 @@ const MaintenancePage = () => {
                 value={rawToValue(item.period) || ''}
                 onChange={(event) => setItem({ ...item, period: valueToRaw(event.target.value) })}
                 label={t('maintenancePeriod')}
-                variant="filled"
+               
                 InputProps={{
                   endAdornment: <InputAdornment position="start">{labels.period}</InputAdornment>,
                 }}
diff --git a/modern/src/settings/NotificationPage.js b/modern/src/settings/NotificationPage.js
index 0c713a75..a98330c2 100644
--- a/modern/src/settings/NotificationPage.js
+++ b/modern/src/settings/NotificationPage.js
@@ -61,7 +61,7 @@ const NotificationPage = () => {
               keyGetter={(it) => it.type}
               titleGetter={(it) => t(prefixString('event', it.type))}
               label={t('sharedType')}
-              variant="filled"
+             
             />
             <SelectField
               multiple
@@ -72,7 +72,7 @@ const NotificationPage = () => {
               keyGetter={(it) => it.type}
               titleGetter={(it) => t(prefixString('notificator', it.type))}
               label={t('notificationNotificators')}
-              variant="filled"
+             
             />
             {(!item.type || item.type === 'alarm') && (
             <SelectField
@@ -83,7 +83,7 @@ const NotificationPage = () => {
               data={alarms}
               keyGetter={(it) => it.key}
               label={t('sharedAlarms')}
-              variant="filled"
+             
             />
             )}
             <FormControlLabel
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index b79f4b6c..7c0d4aee 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -53,7 +53,7 @@ const PreferencesPage = () => {
             </Typography>
           </AccordionSummary>
           <AccordionDetails className={classes.details}>
-            <FormControl variant="filled" fullWidth>
+            <FormControl fullWidth>
               <InputLabel>{t('loginLanguage')}</InputLabel>
               <Select value={language} onChange={(e) => setLanguage(e.target.value)}>
                 {languageList.map((it) => <MenuItem key={it.code} value={it.code}>{it.name}</MenuItem>)}
@@ -68,7 +68,7 @@ const PreferencesPage = () => {
             </Typography>
           </AccordionSummary>
           <AccordionDetails className={classes.details}>
-            <FormControl variant="filled" fullWidth>
+            <FormControl fullWidth>
               <InputLabel>{t('sharedAttributes')}</InputLabel>
               <Select
                 value={positionItems}
diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js
index d7ce8b2e..1f51d530 100644
--- a/modern/src/settings/ServerPage.js
+++ b/modern/src/settings/ServerPage.js
@@ -89,7 +89,7 @@ const ServerPage = () => {
                   value={item.mapUrl || ''}
                   onChange={(event) => setItem({ ...item, mapUrl: event.target.value })}
                   label={t('mapCustomLabel')}
-                  variant="filled"
+                 
                 />
                 <TextField
                   margin="normal"
@@ -97,7 +97,7 @@ const ServerPage = () => {
                   value={item.latitude || 0}
                   onChange={(event) => setItem({ ...item, latitude: Number(event.target.value) })}
                   label={t('positionLatitude')}
-                  variant="filled"
+                 
                 />
                 <TextField
                   margin="normal"
@@ -105,7 +105,7 @@ const ServerPage = () => {
                   value={item.longitude || 0}
                   onChange={(event) => setItem({ ...item, longitude: Number(event.target.value) })}
                   label={t('positionLongitude')}
-                  variant="filled"
+                 
                 />
                 <TextField
                   margin="normal"
@@ -113,9 +113,9 @@ const ServerPage = () => {
                   value={item.zoom || 0}
                   onChange={(event) => setItem({ ...item, zoom: Number(event.target.value) })}
                   label={t('serverZoom')}
-                  variant="filled"
+                 
                 />
-                <FormControl variant="filled" margin="normal" fullWidth>
+                <FormControl margin="normal" fullWidth>
                   <InputLabel>{t('settingsCoordinateFormat')}</InputLabel>
                   <Select
                     value={item.coordinateFormat || 'dd'}
@@ -126,7 +126,7 @@ const ServerPage = () => {
                     <MenuItem value="dms">{t('sharedDegreesMinutesSeconds')}</MenuItem>
                   </Select>
                 </FormControl>
-                <FormControl variant="filled" margin="normal" fullWidth>
+                <FormControl margin="normal" fullWidth>
                   <InputLabel>{t('settingsSpeedUnit')}</InputLabel>
                   <Select
                     value={item.attributes.speedUnit || 'kn'}
@@ -137,7 +137,7 @@ const ServerPage = () => {
                     <MenuItem value="mph">{t('sharedMph')}</MenuItem>
                   </Select>
                 </FormControl>
-                <FormControl variant="filled" margin="normal" fullWidth>
+                <FormControl margin="normal" fullWidth>
                   <InputLabel>{t('settingsDistanceUnit')}</InputLabel>
                   <Select
                     value={item.attributes.distanceUnit || 'km'}
@@ -148,7 +148,7 @@ const ServerPage = () => {
                     <MenuItem value="nmi">{t('sharedNmi')}</MenuItem>
                   </Select>
                 </FormControl>
-                <FormControl variant="filled" margin="normal" fullWidth>
+                <FormControl margin="normal" fullWidth>
                   <InputLabel>{t('settingsVolumeUnit')}</InputLabel>
                   <Select
                     value={item.attributes.volumeUnit || 'ltr'}
@@ -168,21 +168,21 @@ const ServerPage = () => {
                   keyGetter={(it) => it}
                   titleGetter={(it) => it}
                   label={t('sharedTimezone')}
-                  variant="filled"
+                 
                 />
                 <TextField
                   margin="normal"
                   value={item.poiLayer || ''}
                   onChange={(event) => setItem({ ...item, poiLayer: event.target.value })}
                   label={t('mapPoiLayer')}
-                  variant="filled"
+                 
                 />
                 <TextField
                   margin="normal"
                   value={item.announcement || ''}
                   onChange={(event) => setItem({ ...item, announcement: event.target.value })}
                   label={t('serverAnnouncement')}
-                  variant="filled"
+                 
                 />
                 <FormControlLabel
                   control={<Checkbox checked={item.twelveHourFormat} onChange={(event) => setItem({ ...item, twelveHourFormat: event.target.checked })} />}
diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js
index d2832452..8b2dc933 100644
--- a/modern/src/settings/UserPage.js
+++ b/modern/src/settings/UserPage.js
@@ -14,7 +14,7 @@ import {
   Checkbox,
   InputAdornment,
   IconButton,
-  FilledInput,
+  OutlinedInput,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -87,21 +87,21 @@ const UserPage = () => {
                 value={item.name || ''}
                 onChange={(event) => setItem({ ...item, name: event.target.value })}
                 label={t('sharedName')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
                 value={item.email || ''}
                 onChange={(event) => setItem({ ...item, email: event.target.value })}
                 label={t('userEmail')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
                 type="password"
                 onChange={(event) => setItem({ ...item, password: event.target.value })}
                 label={t('userPassword')}
-                variant="filled"
+               
               />
             </AccordionDetails>
           </Accordion>
@@ -117,7 +117,7 @@ const UserPage = () => {
                 value={item.phone || ''}
                 onChange={(event) => setItem({ ...item, phone: event.target.value })}
                 label={t('sharedPhone')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
@@ -125,7 +125,7 @@ const UserPage = () => {
                 value={item.latitude || 0}
                 onChange={(event) => setItem({ ...item, latitude: Number(event.target.value) })}
                 label={t('positionLatitude')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
@@ -133,7 +133,7 @@ const UserPage = () => {
                 value={item.longitude || 0}
                 onChange={(event) => setItem({ ...item, longitude: Number(event.target.value) })}
                 label={t('positionLongitude')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
@@ -141,9 +141,9 @@ const UserPage = () => {
                 value={item.zoom || 0}
                 onChange={(event) => setItem({ ...item, zoom: Number(event.target.value) })}
                 label={t('serverZoom')}
-                variant="filled"
+               
               />
-              <FormControl variant="filled" margin="normal" fullWidth>
+              <FormControl margin="normal" fullWidth>
                 <InputLabel>{t('settingsCoordinateFormat')}</InputLabel>
                 <Select
                   value={item.coordinateFormat || 'dd'}
@@ -154,7 +154,7 @@ const UserPage = () => {
                   <MenuItem value="dms">{t('sharedDegreesMinutesSeconds')}</MenuItem>
                 </Select>
               </FormControl>
-              <FormControl variant="filled" margin="normal" fullWidth>
+              <FormControl margin="normal" fullWidth>
                 <InputLabel>{t('settingsSpeedUnit')}</InputLabel>
                 <Select
                   value={(item.attributes && item.attributes.speedUnit) || 'kn'}
@@ -165,7 +165,7 @@ const UserPage = () => {
                   <MenuItem value="mph">{t('sharedMph')}</MenuItem>
                 </Select>
               </FormControl>
-              <FormControl variant="filled" margin="normal" fullWidth>
+              <FormControl margin="normal" fullWidth>
                 <InputLabel>{t('settingsDistanceUnit')}</InputLabel>
                 <Select
                   value={(item.attributes && item.attributes.distanceUnit) || 'km'}
@@ -176,7 +176,7 @@ const UserPage = () => {
                   <MenuItem value="nmi">{t('sharedNmi')}</MenuItem>
                 </Select>
               </FormControl>
-              <FormControl variant="filled" margin="normal" fullWidth>
+              <FormControl margin="normal" fullWidth>
                 <InputLabel>{t('settingsVolumeUnit')}</InputLabel>
                 <Select
                   value={(item.attributes && item.attributes.volumeUnit) || 'ltr'}
@@ -196,14 +196,14 @@ const UserPage = () => {
                 keyGetter={(it) => it}
                 titleGetter={(it) => it}
                 label={t('sharedTimezone')}
-                variant="filled"
+               
               />
               <TextField
                 margin="normal"
                 value={item.poiLayer || ''}
                 onChange={(event) => setItem({ ...item, poiLayer: event.target.value })}
                 label={t('mapPoiLayer')}
-                variant="filled"
+               
               />
               <FormControlLabel
                 control={<Checkbox checked={item.twelveHourFormat} onChange={(event) => setItem({ ...item, twelveHourFormat: event.target.checked })} />}
@@ -218,9 +218,9 @@ const UserPage = () => {
               </Typography>
             </AccordionSummary>
             <AccordionDetails className={classes.details}>
-              <FormControl variant="filled" margin="normal">
+              <FormControl margin="normal">
                 <InputLabel>{t('userToken')}</InputLabel>
-                <FilledInput
+                <OutlinedInput
                   type="text"
                   value={item.token || ''}
                   onChange={(e) => setItem({ ...item, token: e.target.value })}
@@ -241,7 +241,7 @@ const UserPage = () => {
               </FormControl>
               <TextField
                 margin="normal"
-                variant="filled"
+               
                 label={t('userExpirationTime')}
                 type="date"
                 value={(item.expirationTime && item.expirationTime.format(moment.HTML5_FMT.DATE)) || '2999-01-01'}
@@ -254,7 +254,7 @@ const UserPage = () => {
                 value={item.deviceLimit || 0}
                 onChange={(e) => setItem({ ...item, deviceLimit: Number(e.target.value) })}
                 label={t('userDeviceLimit')}
-                variant="filled"
+               
                 disabled={!admin}
               />
               <TextField
@@ -263,7 +263,7 @@ const UserPage = () => {
                 value={item.userLimit || 0}
                 onChange={(e) => setItem({ ...item, userLimit: Number(e.target.value) })}
                 label={t('userUserLimit')}
-                variant="filled"
+               
                 disabled={!admin}
               />
               <FormControlLabel
@@ -328,7 +328,7 @@ const UserPage = () => {
                   keyBase="userId"
                   keyLink="deviceId"
                   label={t('deviceTitle')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -338,7 +338,7 @@ const UserPage = () => {
                   keyBase="userId"
                   keyLink="groupId"
                   label={t('settingsGroups')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -348,7 +348,7 @@ const UserPage = () => {
                   keyBase="userId"
                   keyLink="geofenceId"
                   label={t('sharedGeofences')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -359,7 +359,7 @@ const UserPage = () => {
                   keyLink="notificationId"
                   titleGetter={(it) => t(prefixString('event', it.type))}
                   label={t('sharedNotifications')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -369,7 +369,7 @@ const UserPage = () => {
                   keyBase="userId"
                   keyLink="calendarId"
                   label={t('sharedCalendars')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -379,7 +379,7 @@ const UserPage = () => {
                   keyBase="userId"
                   keyLink="managedUserId"
                   label={t('settingsUsers')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -390,7 +390,7 @@ const UserPage = () => {
                   keyLink="attributeId"
                   titleGetter={(it) => it.description}
                   label={t('sharedComputedAttributes')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -400,7 +400,7 @@ const UserPage = () => {
                   keyBase="userId"
                   keyLink="driverId"
                   label={t('sharedDrivers')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -411,7 +411,7 @@ const UserPage = () => {
                   keyLink="commandId"
                   titleGetter={(it) => it.description}
                   label={t('sharedSavedCommands')}
-                  variant="filled"
+                 
                 />
                 <LinkField
                   margin="normal"
@@ -421,7 +421,7 @@ const UserPage = () => {
                   keyBase="userId"
                   keyLink="maintenanceId"
                   label={t('sharedMaintenance')}
-                  variant="filled"
+                 
                 />
               </AccordionDetails>
             </Accordion>
diff --git a/modern/src/settings/components/AddAttributeDialog.js b/modern/src/settings/components/AddAttributeDialog.js
index b7ce43f3..d0ac5f46 100644
--- a/modern/src/settings/components/AddAttributeDialog.js
+++ b/modern/src/settings/components/AddAttributeDialog.js
@@ -48,11 +48,11 @@ const AddAttributeDialog = ({ open, onResult, definitions }) => {
           renderOption={(option) => option.name}
           freeSolo
           renderInput={(params) => (
-            <TextField {...params} label={t('sharedAttribute')} variant="filled" margin="normal" />
+            <TextField {...params} label={t('sharedAttribute')} margin="normal" />
           )}
         />
         <FormControl
-          variant="filled"
+         
           margin="normal"
           fullWidth
           disabled={key in definitions}
diff --git a/modern/src/settings/components/BaseCommandView.js b/modern/src/settings/components/BaseCommandView.js
index 9a8fa9b5..5f89ac2b 100644
--- a/modern/src/settings/components/BaseCommandView.js
+++ b/modern/src/settings/components/BaseCommandView.js
@@ -32,7 +32,7 @@ const BaseCommandView = ({ item, setItem }) => {
         keyGetter={(it) => it.type}
         titleGetter={(it) => t(prefixString('command', it.type))}
         label={t('sharedType')}
-        variant="filled"
+       
       />
       {attributes.map(({ key, name, type }) => {
         if (type === 'boolean') {
@@ -63,7 +63,7 @@ const BaseCommandView = ({ item, setItem }) => {
               setItem(updateItem);
             }}
             label={name}
-            variant="filled"
+           
           />
         );
       })}
diff --git a/modern/src/settings/components/EditAttributesView.js b/modern/src/settings/components/EditAttributesView.js
index da730538..d714c489 100644
--- a/modern/src/settings/components/EditAttributesView.js
+++ b/modern/src/settings/components/EditAttributesView.js
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import {
   Button,
   Checkbox,
-  FilledInput,
+  OutlinedInput,
   FormControl,
   FormControlLabel,
   Grid,
@@ -173,9 +173,9 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
           );
         }
         return (
-          <FormControl variant="filled" margin="normal" key={key}>
+          <FormControl margin="normal" key={key}>
             <InputLabel>{getAttributeName(key, subtype)}</InputLabel>
-            <FilledInput
+            <OutlinedInput
               type={type === 'number' ? 'number' : 'text'}
               value={getDisplayValue(value, subtype)}
               onChange={(e) => updateAttribute(key, e.target.value, type, subtype)}
-- 
cgit v1.2.3