6 files changed, 19 insertions, 8 deletions
diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js
index 7aff0da0..6733e980 100644
--- a/modern/src/settings/ComputedAttributePage.js
+++ b/modern/src/settings/ComputedAttributePage.js
@@ -4,8 +4,8 @@ import {
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import EditItemView from '../EditItemView';
-import positionAttributes from '../attributes/positionAttributes';
 import { useTranslation } from '../LocalizationProvider';
+import { usePositionAttributes } from '../attributes/positionAttributes';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -17,6 +17,8 @@ const ComputedAttributePage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const positionAttributes = usePositionAttributes(t);
+
   const [item, setItem] = useState();
   const [key, setKey] = useState();
 
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index faf8acbe..88b9504d 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -7,7 +7,7 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import EditItemView from '../EditItemView';
 import EditAttributesView from '../attributes/EditAttributesView';
-import deviceAttributes from '../attributes/deviceAttributes';
+import { useDeviceAttributes } from '../attributes/deviceAttributes';
 import SelectField from '../form/SelectField';
 import { useTranslation } from '../LocalizationProvider';
 
@@ -21,6 +21,8 @@ const GroupPage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const deviceAttributes = useDeviceAttributes(t);
+
   const [item, setItem] = useState();
 
   return (
diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js
index a9fed7d6..d9500bed 100644
--- a/modern/src/settings/MaintenancePage.js
+++ b/modern/src/settings/MaintenancePage.js
@@ -7,12 +7,12 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { prefixString } from '../common/stringUtils';
 import EditItemView from '../EditItemView';
 import EditAttributesView from '../attributes/EditAttributesView';
-import positionAttributes from '../attributes/positionAttributes';
 import { useAttributePreference } from '../common/preferences';
 import {
   speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters,
 } from '../common/converter';
 import { useTranslation } from '../LocalizationProvider';
+import { usePositionAttributes } from '../attributes/positionAttributes';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -24,6 +24,8 @@ const MaintenancePage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const positionAttributes = usePositionAttributes(t);
+
   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 5b040b55..a59a24e1 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -6,7 +6,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 
-import positionAttributes from '../attributes/positionAttributes';
+import { usePositionAttributes } from '../attributes/positionAttributes';
 import { formatDistance, formatSpeed } from '../common/formatter';
 import { useAttributePreference } from '../common/preferences';
 import OptionsLayout from './OptionsLayout';
@@ -23,6 +23,8 @@ const MaintenancesView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const positionAttributes = usePositionAttributes(t);
+
   const [items, setItems] = useState([]);
   const speedUnit = useAttributePreference('speedUnit');
   const distanceUnit = useAttributePreference('distanceUnit');
diff --git a/modern/src/settings/NotificationPage.js b/modern/src/settings/NotificationPage.js
index 98104d76..6d895d0f 100644
--- a/modern/src/settings/NotificationPage.js
+++ b/modern/src/settings/NotificationPage.js
@@ -4,7 +4,7 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t, { findStringKeys } from '../LocalizationProvider';
+import t, { findStringKeys, useTranslation, useTranslationKeys } from '../LocalizationProvider';
 import EditItemView from '../EditItemView';
 import { prefixString, unprefixString } from '../common/stringUtils';
 import SelectField from '../form/SelectField';
@@ -17,10 +17,11 @@ const useStyles = makeStyles(() => ({
 
 const NotificationPage = () => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [item, setItem] = useState();
 
-  const alarms = findStringKeys((it) => it.startsWith('alarm')).map((it) => ({
+  const alarms = useTranslationKeys((it) => it.startsWith('alarm')).map((it) => ({
     key: unprefixString('alarm', it),
     name: t(it),
   }));
diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index dd969196..fea03722 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -13,8 +13,8 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 import SideNav from '../../components/SideNav';
 import NavBar from '../../components/NavBar';
-import t from '../../LocalizationProvider';
 import useRoutes from './useRoutes';
+import { useTranslation } from '../../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -54,9 +54,11 @@ const OptionsLayout = ({ children }) => {
   const classes = useStyles();
   const location = useLocation();
   const history = useHistory();
+  const routes = useRoutes();
+  const t = useTranslation();
+
   const [openDrawer, setOpenDrawer] = useState(false);
   const [optionTitle, setOptionTitle] = useState();
-  const routes = useRoutes();
 
   useEffect(() => {
     const activeRoute = routes.find(