From d4d7752e96258cce717cc39885788d5983361b9b Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sat, 6 Aug 2022 07:37:48 -0700
Subject: Minor UI improvements

---
 modern/src/settings/MaintenancePage.js                 | 18 +++++++-----------
 modern/src/settings/PreferencesPage.js                 |  4 ++--
 .../src/settings/components/EditAttributesAccordion.js |  2 +-
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js
index c434f11e..987789d5 100644
--- a/modern/src/settings/MaintenancePage.js
+++ b/modern/src/settings/MaintenancePage.js
@@ -11,7 +11,6 @@ import {
   Select,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import InputAdornment from '@mui/material/InputAdornment';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { prefixString } from '../common/util/stringUtils';
 import EditItemView from './components/EditItemView';
@@ -42,8 +41,8 @@ const MaintenancePage = () => {
   const [item, setItem] = useState();
   const [labels, setLabels] = useState({ start: '', period: '' });
 
-  const speedUnit = useAttributePreference('speedUnit');
-  const distanceUnit = useAttributePreference('distanceUnit');
+  const speedUnit = useAttributePreference('speedUnit', 'kn');
+  const distanceUnit = useAttributePreference('distanceUnit', 'km');
 
   const convertToList = (attributes) => {
     const otherList = [];
@@ -72,8 +71,11 @@ const MaintenancePage = () => {
           setLabels({ ...labels, start: t(prefixString('shared', speedUnit)), period: t(prefixString('shared', speedUnit)) });
           break;
         default:
+          setLabels({ ...labels, start: null, period: null });
           break;
       }
+    } else {
+      setLabels({ ...labels, start: null, period: null });
     }
   };
 
@@ -148,19 +150,13 @@ const MaintenancePage = () => {
                 type="number"
                 value={rawToValue(item.start) || ''}
                 onChange={(event) => setItem({ ...item, start: valueToRaw(event.target.value) })}
-                label={t('maintenanceStart')}
-                InputProps={{
-                  endAdornment: <InputAdornment position="start">{labels.start}</InputAdornment>,
-                }}
+                label={labels.start ? `${t('maintenanceStart')} (${labels.start})` : t('maintenanceStart')}
               />
               <TextField
                 type="number"
                 value={rawToValue(item.period) || ''}
                 onChange={(event) => setItem({ ...item, period: valueToRaw(event.target.value) })}
-                label={t('maintenancePeriod')}
-                InputProps={{
-                  endAdornment: <InputAdornment position="start">{labels.period}</InputAdornment>,
-                }}
+                label={labels.period ? `${t('maintenancePeriod')} (${labels.period})` : t('maintenancePeriod')}
               />
             </AccordionDetails>
           </Accordion>
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index 3b0c7e9c..a29c056d 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -114,10 +114,10 @@ const PreferencesPage = () => {
                 endAdornment={(
                   <InputAdornment position="end">
                     <div className={classes.tokenActions}>
-                      <IconButton size="small" onClick={generateToken} disabled={!!token}>
+                      <IconButton size="small" edge="end" onClick={generateToken} disabled={!!token}>
                         <CachedIcon fontSize="small" />
                       </IconButton>
-                      <IconButton size="small" onClick={() => navigator.clipboard.writeText(token)} disabled={!token}>
+                      <IconButton size="small" edge="end" onClick={() => navigator.clipboard.writeText(token)} disabled={!token}>
                         <ContentCopyIcon fontSize="small" />
                       </IconButton>
                     </div>
diff --git a/modern/src/settings/components/EditAttributesAccordion.js b/modern/src/settings/components/EditAttributesAccordion.js
index 54ded187..214ddb0e 100644
--- a/modern/src/settings/components/EditAttributesAccordion.js
+++ b/modern/src/settings/components/EditAttributesAccordion.js
@@ -199,7 +199,7 @@ const EditAttributesAccordion = ({ attribute, attributes, setAttributes, definit
                 autoFocus={focusAttribute === key}
                 endAdornment={(
                   <InputAdornment position="end">
-                    <IconButton size="small" onClick={() => deleteAttribute(key)}>
+                    <IconButton size="small" edge="end" onClick={() => deleteAttribute(key)}>
                       <CloseIcon fontSize="small" />
                     </IconButton>
                   </InputAdornment>
-- 
cgit v1.2.3