aboutsummaryrefslogtreecommitdiff
path: root/modern/src/common
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/common')
-rw-r--r--modern/src/common/components/BottomMenu.js26
-rw-r--r--modern/src/common/components/ErrorHandler.js4
-rw-r--r--modern/src/common/components/LinkField.js6
-rw-r--r--modern/src/common/components/LocalizationProvider.js7
-rw-r--r--modern/src/common/components/NavBar.js10
-rw-r--r--modern/src/common/components/PageLayout.js26
-rw-r--r--modern/src/common/components/PositionValue.js2
-rw-r--r--modern/src/common/components/RemoveDialog.js5
-rw-r--r--modern/src/common/components/SelectField.js6
-rw-r--r--modern/src/common/components/SideNav.js2
-rw-r--r--modern/src/common/theme/components.js15
-rw-r--r--modern/src/common/theme/index.js6
-rw-r--r--modern/src/common/theme/overrides.js87
13 files changed, 73 insertions, 129 deletions
diff --git a/modern/src/common/components/BottomMenu.js b/modern/src/common/components/BottomMenu.js
index 30960396..b011638e 100644
--- a/modern/src/common/components/BottomMenu.js
+++ b/modern/src/common/components/BottomMenu.js
@@ -1,22 +1,22 @@
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
import {
Paper, BottomNavigation, BottomNavigationAction, Menu, MenuItem, Typography,
-} from '@material-ui/core';
+} from '@mui/material';
-import DescriptionIcon from '@material-ui/icons/Description';
-import SettingsIcon from '@material-ui/icons/Settings';
-import MapIcon from '@material-ui/icons/Map';
-import PersonIcon from '@material-ui/icons/Person';
-import ExitToAppIcon from '@material-ui/icons/ExitToApp';
+import DescriptionIcon from '@mui/icons-material/Description';
+import SettingsIcon from '@mui/icons-material/Settings';
+import MapIcon from '@mui/icons-material/Map';
+import PersonIcon from '@mui/icons-material/Person';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
import { sessionActions } from '../../store';
import { useTranslation } from './LocalizationProvider';
import { useReadonly } from '../util/permissions';
const BottomMenu = () => {
- const history = useHistory();
+ const navigate = useNavigate();
const location = useLocation();
const dispatch = useDispatch();
const t = useTranslation();
@@ -41,26 +41,26 @@ const BottomMenu = () => {
const handleAccount = () => {
setAnchorEl(null);
- history.push(`/settings/user/${userId}`);
+ navigate(`/settings/user/${userId}`);
};
const handleLogout = async () => {
setAnchorEl(null);
await fetch('/api/session', { method: 'DELETE' });
- history.push('/login');
+ navigate('/login');
dispatch(sessionActions.updateUser(null));
};
const handleSelection = (event, value) => {
switch (value) {
case 0:
- history.push('/');
+ navigate('/');
break;
case 1:
- history.push('/reports/route');
+ navigate('/reports/route');
break;
case 2:
- history.push('/settings/preferences');
+ navigate('/settings/preferences');
break;
case 3:
if (readonly) {
diff --git a/modern/src/common/components/ErrorHandler.js b/modern/src/common/components/ErrorHandler.js
index 5a238956..757a78ef 100644
--- a/modern/src/common/components/ErrorHandler.js
+++ b/modern/src/common/components/ErrorHandler.js
@@ -1,5 +1,4 @@
-import { Snackbar } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import { Snackbar, Alert } from '@mui/material';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { usePrevious } from '../../reactHelper';
@@ -15,7 +14,6 @@ const ErrorHandler = () => {
<Snackbar open={!!error}>
<Alert
elevation={6}
- variant="filled"
onClose={() => dispatch(errorsActions.pop())}
severity="error"
>
diff --git a/modern/src/common/components/LinkField.js b/modern/src/common/components/LinkField.js
index 0f6cc7ba..f87a8963 100644
--- a/modern/src/common/components/LinkField.js
+++ b/modern/src/common/components/LinkField.js
@@ -1,12 +1,11 @@
import {
FormControl, InputLabel, MenuItem, Select,
-} from '@material-ui/core';
+} from '@mui/material';
import React, { useState } from 'react';
import { useEffectAsync } from '../../reactHelper';
const LinkField = ({
margin,
- variant,
label,
endpointAll,
endpointLinked,
@@ -69,9 +68,10 @@ const LinkField = ({
if (items && linked) {
return (
- <FormControl margin={margin} variant={variant}>
+ <FormControl margin={margin} fullWidth>
<InputLabel>{label}</InputLabel>
<Select
+ label={label}
multiple
value={linked}
onChange={onChange}
diff --git a/modern/src/common/components/LocalizationProvider.js b/modern/src/common/components/LocalizationProvider.js
index 0df242dc..147ac5ca 100644
--- a/modern/src/common/components/LocalizationProvider.js
+++ b/modern/src/common/components/LocalizationProvider.js
@@ -1,5 +1,5 @@
+/* eslint-disable import/no-relative-packages */
import React, { createContext, useContext, useMemo } from 'react';
-import usePersistedState from '../util/usePersistedState';
import af from '../../../../web/l10n/af.json';
import ar from '../../../../web/l10n/ar.json';
@@ -55,6 +55,7 @@ import uz from '../../../../web/l10n/uz.json';
import vi from '../../../../web/l10n/vi.json';
import zh from '../../../../web/l10n/zh.json';
import zhTW from '../../../../web/l10n/zh_TW.json';
+import usePersistedState from '../util/usePersistedState';
const languages = {
af: { data: af, name: 'Afrikaans' },
@@ -143,8 +144,10 @@ const LocalizationContext = createContext({
export const LocalizationProvider = ({ children }) => {
const [language, setLanguage] = usePersistedState('language', getDefaultLanguage());
+ const value = useMemo(() => ({ languages, language, setLanguage }), [languages, language, setLanguage]);
+
return (
- <LocalizationContext.Provider value={{ languages, language, setLanguage }}>
+ <LocalizationContext.Provider value={value}>
{children}
</LocalizationContext.Provider>
);
diff --git a/modern/src/common/components/NavBar.js b/modern/src/common/components/NavBar.js
index ac689e76..a1a73fdf 100644
--- a/modern/src/common/components/NavBar.js
+++ b/modern/src/common/components/NavBar.js
@@ -1,13 +1,17 @@
import React from 'react';
import {
AppBar, Toolbar, Typography, IconButton,
-} from '@material-ui/core';
-import MenuIcon from '@material-ui/icons/Menu';
+} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
const Navbar = ({ setOpenDrawer, title }) => (
<AppBar position="sticky" color="inherit">
<Toolbar>
- <IconButton color="inherit" edge="start" onClick={() => setOpenDrawer(true)}>
+ <IconButton
+ color="inherit"
+ edge="start"
+ onClick={() => setOpenDrawer(true)}
+ >
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
diff --git a/modern/src/common/components/PageLayout.js b/modern/src/common/components/PageLayout.js
index a1f117c4..17567fb1 100644
--- a/modern/src/common/components/PageLayout.js
+++ b/modern/src/common/components/PageLayout.js
@@ -1,10 +1,20 @@
import React, { useState } from 'react';
import {
- AppBar, Breadcrumbs, Divider, Drawer, Hidden, IconButton, makeStyles, Toolbar, Typography, useMediaQuery, useTheme,
-} from '@material-ui/core';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import MenuIcon from '@material-ui/icons/Menu';
-import { useHistory } from 'react-router-dom';
+ AppBar,
+ Breadcrumbs,
+ Divider,
+ Drawer,
+ Hidden,
+ IconButton,
+ Toolbar,
+ Typography,
+ useMediaQuery,
+ useTheme,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import MenuIcon from '@mui/icons-material/Menu';
+import { useNavigate } from 'react-router-dom';
import { useTranslation } from './LocalizationProvider';
const useStyles = makeStyles((theme) => ({
@@ -56,13 +66,13 @@ const PageTitle = ({ breadcrumbs }) => {
const PageLayout = ({ menu, breadcrumbs, children }) => {
const classes = useStyles();
- const history = useHistory();
+ const navigate = useNavigate();
const [openDrawer, setOpenDrawer] = useState(false);
return (
<>
- <Hidden smDown>
+ <Hidden mdDown>
<div className={classes.desktopRoot}>
<Drawer
variant="permanent"
@@ -71,7 +81,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => {
>
<div className={classes.toolbar}>
<Toolbar>
- <IconButton color="inherit" edge="start" onClick={() => history.push('/')}>
+ <IconButton color="inherit" edge="start" onClick={() => navigate('/')}>
<ArrowBackIcon />
</IconButton>
<PageTitle breadcrumbs={breadcrumbs} />
diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js
index 1162a150..3dd0eb6f 100644
--- a/modern/src/common/components/PositionValue.js
+++ b/modern/src/common/components/PositionValue.js
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
-import { Link } from '@material-ui/core';
+import { Link } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import {
formatAlarm, formatBoolean, formatCoordinate, formatCourse, formatDistance, formatNumber, formatPercentage, formatSpeed, formatTime,
diff --git a/modern/src/common/components/RemoveDialog.js b/modern/src/common/components/RemoveDialog.js
index a11af4c2..1af4e6a8 100644
--- a/modern/src/common/components/RemoveDialog.js
+++ b/modern/src/common/components/RemoveDialog.js
@@ -1,6 +1,7 @@
import React from 'react';
-import Button from '@material-ui/core/Button';
-import { Snackbar, makeStyles } from '@material-ui/core';
+import Button from '@mui/material/Button';
+import { Snackbar } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
import { useTranslation } from './LocalizationProvider';
import { useCatch } from '../../reactHelper';
import { snackBarDurationLongMs } from '../util/duration';
diff --git a/modern/src/common/components/SelectField.js b/modern/src/common/components/SelectField.js
index 5a9a176b..d3de5c46 100644
--- a/modern/src/common/components/SelectField.js
+++ b/modern/src/common/components/SelectField.js
@@ -1,12 +1,11 @@
import {
FormControl, InputLabel, MenuItem, Select,
-} from '@material-ui/core';
+} from '@mui/material';
import React, { useState } from 'react';
import { useEffectAsync } from '../../reactHelper';
const SelectField = ({
margin,
- variant,
label,
multiple,
value,
@@ -33,9 +32,10 @@ const SelectField = ({
if (items) {
return (
- <FormControl margin={margin} variant={variant}>
+ <FormControl margin={margin} fullWidth>
<InputLabel>{label}</InputLabel>
<Select
+ label={label}
multiple={multiple}
value={value}
onChange={onChange}
diff --git a/modern/src/common/components/SideNav.js b/modern/src/common/components/SideNav.js
index ad7c212a..648059d1 100644
--- a/modern/src/common/components/SideNav.js
+++ b/modern/src/common/components/SideNav.js
@@ -1,7 +1,7 @@
import React, { Fragment } from 'react';
import {
List, ListItem, ListItemText, ListItemIcon, Divider, ListSubheader,
-} from '@material-ui/core';
+} from '@mui/material';
import { Link, useLocation } from 'react-router-dom';
const SideNav = ({ routes }) => {
diff --git a/modern/src/common/theme/components.js b/modern/src/common/theme/components.js
new file mode 100644
index 00000000..f5f3acaa
--- /dev/null
+++ b/modern/src/common/theme/components.js
@@ -0,0 +1,15 @@
+export default {
+ MuiFormControl: {
+ defaultProps: {
+ size: 'small',
+ },
+ },
+ MuiSnackbar: {
+ defaultProps: {
+ anchorOrigin: {
+ vertical: 'bottom',
+ horizontal: 'center',
+ },
+ },
+ },
+};
diff --git a/modern/src/common/theme/index.js b/modern/src/common/theme/index.js
index 02865c23..0cc999ad 100644
--- a/modern/src/common/theme/index.js
+++ b/modern/src/common/theme/index.js
@@ -1,12 +1,12 @@
-import { createTheme } from '@material-ui/core/styles';
+import { createTheme } from '@mui/material/styles';
import palette from './palette';
-import overrides from './overrides';
import dimensions from './dimensions';
+import components from './components';
const theme = createTheme({
palette,
- overrides,
dimensions,
+ components,
});
export default theme;
diff --git a/modern/src/common/theme/overrides.js b/modern/src/common/theme/overrides.js
deleted file mode 100644
index d1fe844c..00000000
--- a/modern/src/common/theme/overrides.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import dimensions from './dimensions';
-
-export default {
- MuiFormControl: {
- root: {
- marginTop: 5,
- marginBottom: 5,
- },
- },
- MuiInputLabel: {
- filled: {
- transform: 'translate(12px, 14px) scale(1)',
- '&$shrink': {
- transform: 'translate(12px, -14px) scale(0.72)',
- },
- },
- },
- MuiFilledInput: {
- root: {
- height: dimensions.inputHeight,
- borderRadius: dimensions.borderRadius,
- backgroundColor: 'rgba(0, 0, 0, 0.035)',
- },
- input: {
- height: dimensions.inputHeight,
- borderRadius: dimensions.borderRadius,
- paddingTop: '11.5px',
- paddingBottom: '11.5px',
- boxSizing: 'border-box',
- '&:-webkit-autofill': {
- WebkitBoxShadow: '0 0 0 100px #eeeeee inset',
- },
- },
- underline: {
- '&:before': {
- borderBottom: 'none',
- },
- '&:after': {
- borderBottom: 'none',
- },
- '&:hover:before': {
- borderBottom: 'none',
- },
- },
- },
- MuiSelect: {
- select: {
- borderRadius: dimensions.borderRadius,
- '&&:focus': {
- borderRadius: dimensions.borderRadius,
- },
- },
- },
- MuiButton: {
- root: {
- height: dimensions.inputHeight,
- marginTop: 5,
- marginBottom: 5,
- '&$disabled': {
- opacity: 0.4,
- color: undefined,
- },
- },
- contained: {
- '&$disabled': {
- opacity: 0.4,
- color: undefined,
- backgroundColor: undefined,
- },
- },
- },
- MuiFormHelperText: {
- root: {
- marginBottom: -10,
- },
- contained: {
- marginLeft: 12,
- },
- },
- MuiAutocomplete: {
- inputRoot: {
- '&.MuiFilledInput-root': {
- paddingTop: 0,
- },
- },
- },
-};
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 20:20:32 +0000