8 files changed, 18 insertions, 9 deletions
diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js
index a3b45b4a..7aff0da0 100644
--- a/modern/src/settings/ComputedAttributePage.js
+++ b/modern/src/settings/ComputedAttributePage.js
@@ -3,9 +3,9 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, MenuItem, Select, TextField,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t from '../LocalizationProvider';
 import EditItemView from '../EditItemView';
 import positionAttributes from '../attributes/positionAttributes';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -15,6 +15,8 @@ const useStyles = makeStyles(() => ({
 
 const ComputedAttributePage = () => {
   const classes = useStyles();
+  const t = useTranslation();
+
   const [item, setItem] = useState();
   const [key, setKey] = useState();
 
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index 9858ea39..b989b43e 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -4,10 +4,10 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useSelector } from 'react-redux';
-import t from '../LocalizationProvider';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 import OptionsLayout from './OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -18,6 +18,7 @@ const useStyles = makeStyles((theme) => ({
 
 const ComputedAttributeView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [items, setItems] = useState([]);
   const adminEnabled = useSelector((state) => state.session.user && state.session.user.administrator);
@@ -66,7 +67,6 @@ const ComputedAttributeView = ({ updateTimestamp, onMenuClick }) => {
 
 const ComputedAttributesPage = () => (
   <OptionsLayout>
-
     <EditCollectionView content={ComputedAttributeView} editPath="/settings/attribute" endpoint="attributes/computed" />
   </OptionsLayout>
 );
diff --git a/modern/src/settings/DriverPage.js b/modern/src/settings/DriverPage.js
index 7bb4497b..a185405e 100644
--- a/modern/src/settings/DriverPage.js
+++ b/modern/src/settings/DriverPage.js
@@ -4,9 +4,9 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t from '../LocalizationProvider';
 import EditItemView from '../EditItemView';
 import EditAttributesView from '../attributes/EditAttributesView';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -16,6 +16,7 @@ const useStyles = makeStyles(() => ({
 
 const DriverPage = () => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [item, setItem] = useState();
 
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index ad578e25..faf8acbe 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -5,11 +5,11 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t from '../LocalizationProvider';
 import EditItemView from '../EditItemView';
 import EditAttributesView from '../attributes/EditAttributesView';
 import deviceAttributes from '../attributes/deviceAttributes';
 import SelectField from '../form/SelectField';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -19,6 +19,7 @@ const useStyles = makeStyles(() => ({
 
 const GroupPage = () => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [item, setItem] = useState();
 
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index 89715928..0b28e7bf 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -3,10 +3,10 @@ import {
   TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton,
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import t from '../LocalizationProvider';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 import OptionsLayout from './OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -17,6 +17,7 @@ const useStyles = makeStyles((theme) => ({
 
 const GroupsView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [items, setItems] = useState([]);
 
diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js
index 287d040d..a9fed7d6 100644
--- a/modern/src/settings/MaintenancePage.js
+++ b/modern/src/settings/MaintenancePage.js
@@ -4,7 +4,6 @@ import {
 } from '@material-ui/core';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t from '../LocalizationProvider';
 import { prefixString } from '../common/stringUtils';
 import EditItemView from '../EditItemView';
 import EditAttributesView from '../attributes/EditAttributesView';
@@ -13,6 +12,7 @@ import { useAttributePreference } from '../common/preferences';
 import {
   speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters,
 } from '../common/converter';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -22,6 +22,8 @@ const useStyles = makeStyles(() => ({
 
 const MaintenancePage = () => {
   const classes = useStyles();
+  const t = useTranslation();
+
   const [item, setItem] = useState();
   const [labels, setLabels] = useState({ start: '', period: '' });
 
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index 07d78ee9..5b040b55 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -3,7 +3,6 @@ import {
   TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton,
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import t from '../LocalizationProvider';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 
@@ -11,6 +10,7 @@ import positionAttributes from '../attributes/positionAttributes';
 import { formatDistance, formatSpeed } from '../common/formatter';
 import { useAttributePreference } from '../common/preferences';
 import OptionsLayout from './OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -21,6 +21,7 @@ const useStyles = makeStyles((theme) => ({
 
 const MaintenancesView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [items, setItems] = useState([]);
   const speedUnit = useAttributePreference('speedUnit');
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index 273c15d5..01483637 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -3,12 +3,12 @@ import {
   TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton,
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import t from '../LocalizationProvider';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 import { prefixString } from '../common/stringUtils';
 import { formatBoolean } from '../common/formatter';
 import OptionsLayout from './OptionsLayout';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -19,6 +19,7 @@ const useStyles = makeStyles((theme) => ({
 
 const NotificationsView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [items, setItems] = useState([]);