Migrate components

4 files changed, 6 insertions, 4 deletions

diff --git a/modern/src/components/BottomNav.js b/modern/src/components/BottomNav.js
index fbb115e8..3d1a6752 100644
--- a/modern/src/components/BottomNav.js
+++ b/modern/src/components/BottomNav.js
@@ -12,7 +12,7 @@ import MapIcon from '@material-ui/icons/Map';
 import LogoutIcon from '@material-ui/icons/ExitToApp';
 
 import { sessionActions } from '../store';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -46,6 +46,7 @@ const BottomNav = ({ showOnDesktop }) => {
   const classes = useStyles();
   const theme = useTheme();
   const history = useHistory();
+  const t = useTranslation();
 
   const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
   const dispatch = useDispatch();
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index c1a8d92c..3cc3c2f3 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -5,11 +5,11 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import MainToolbar from '../MainToolbar';
 import Map from '../map/Map';
-import t from '../LocalizationProvider';
 import ReplayPathMap from '../map/ReplayPathMap';
 import PositionsMap from '../map/PositionsMap';
 import { formatPosition } from '../common/formatter';
 import ReportFilter from './ReportFilter';
+import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -41,6 +41,7 @@ const TimeLabel = ({ children, open, value }) => (
 
 const ReplayPage = () => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [expanded, setExpanded] = useState(true);
   const [positions, setPositions] = useState([]);
diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js
index ad3c398e..11419cf1 100644
--- a/modern/src/settings/DriversPage.js
+++ b/modern/src/settings/DriversPage.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 DriversView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
+  const t = useTranslation();
 
   const [items, setItems] = useState([]);
 
diff --git a/modern/src/settings/OptionsLayout/useRoutes.js b/modern/src/settings/OptionsLayout/useRoutes.js
index f38736f5..4f0621ca 100644
--- a/modern/src/settings/OptionsLayout/useRoutes.js
+++ b/modern/src/settings/OptionsLayout/useRoutes.js
@@ -9,7 +9,6 @@ import BuildIcon from '@material-ui/icons/Build';
 import PeopleIcon from '@material-ui/icons/People';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import { getIsAdmin, getUserId } from '../../common/selectors';
-import t from '../../LocalizationProvider';
 
 const accountRoute = {
   name: t('settingsUser'),