diff options
Diffstat (limited to 'modern')
21 files changed, 63 insertions, 306 deletions
diff --git a/modern/src/settings/AccumulatorsPage.jsx b/modern/src/settings/AccumulatorsPage.jsx index 5067e4fd..1c9b6e65 100644 --- a/modern/src/settings/AccumulatorsPage.jsx +++ b/modern/src/settings/AccumulatorsPage.jsx @@ -10,7 +10,6 @@ import { TextField, Button, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; @@ -18,31 +17,11 @@ import SettingsMenu from './components/SettingsMenu'; import { useCatch } from '../reactHelper'; import { useAttributePreference } from '../common/util/preferences'; import { distanceFromMeters, distanceToMeters, distanceUnitString } from '../common/util/converter'; - -const useStyles = makeStyles((theme) => ({ - container: { - marginTop: theme.spacing(2), - }, - buttons: { - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), - display: 'flex', - justifyContent: 'space-evenly', - '& > *': { - flexBasis: '33%', - }, - }, - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const AccumulatorsPage = () => { const navigate = useNavigate(); - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const distanceUnit = useAttributePreference('distanceUnit'); diff --git a/modern/src/settings/CalendarPage.jsx b/modern/src/settings/CalendarPage.jsx index b7dcdd04..8a3dc986 100644 --- a/modern/src/settings/CalendarPage.jsx +++ b/modern/src/settings/CalendarPage.jsx @@ -5,7 +5,6 @@ import TextField from '@mui/material/TextField'; import { Accordion, AccordionSummary, AccordionDetails, Typography, FormControl, InputLabel, Select, MenuItem, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { DropzoneArea } from 'react-mui-dropzone'; import EditItemView from './components/EditItemView'; @@ -15,6 +14,7 @@ import SettingsMenu from './components/SettingsMenu'; import { prefixString } from '../common/util/stringUtils'; import { calendarsActions } from '../store'; import { useCatch } from '../reactHelper'; +import useSettingsStyles from './common/useSettingsStyles'; const formatCalendarTime = (time) => { const tzid = Intl.DateTimeFormat().resolvedOptions().timeZone; @@ -61,17 +61,8 @@ const simpleCalendar = () => window.btoa([ 'END:VCALENDAR', ].join('\n')); -const useStyles = makeStyles((theme) => ({ - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); - const CalendarPage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const dispatch = useDispatch(); const t = useTranslation(); diff --git a/modern/src/settings/CommandDevicePage.jsx b/modern/src/settings/CommandDevicePage.jsx index ed802bfa..b3144cd0 100644 --- a/modern/src/settings/CommandDevicePage.jsx +++ b/modern/src/settings/CommandDevicePage.jsx @@ -8,7 +8,6 @@ import { Container, Button, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation } from '../common/components/LocalizationProvider'; import BaseCommandView from './components/BaseCommandView'; @@ -17,31 +16,11 @@ import PageLayout from '../common/components/PageLayout'; import SettingsMenu from './components/SettingsMenu'; import { useCatch } from '../reactHelper'; import { useRestriction } from '../common/util/permissions'; - -const useStyles = makeStyles((theme) => ({ - container: { - marginTop: theme.spacing(2), - }, - buttons: { - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), - display: 'flex', - justifyContent: 'space-evenly', - '& > *': { - flexBasis: '33%', - }, - }, - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const CommandDevicePage = () => { const navigate = useNavigate(); - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const { id } = useParams(); diff --git a/modern/src/settings/CommandGroupPage.jsx b/modern/src/settings/CommandGroupPage.jsx index e2ba3946..e55a235d 100644 --- a/modern/src/settings/CommandGroupPage.jsx +++ b/modern/src/settings/CommandGroupPage.jsx @@ -16,37 +16,16 @@ import { Checkbox, TextField, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import SettingsMenu from './components/SettingsMenu'; import { useCatch } from '../reactHelper'; - -const useStyles = makeStyles((theme) => ({ - container: { - marginTop: theme.spacing(2), - }, - buttons: { - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), - display: 'flex', - justifyContent: 'space-evenly', - '& > *': { - flexBasis: '33%', - }, - }, - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const CommandDevicePage = () => { const navigate = useNavigate(); - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const { id } = useParams(); diff --git a/modern/src/settings/CommandPage.jsx b/modern/src/settings/CommandPage.jsx index 1d788610..e65ecd76 100644 --- a/modern/src/settings/CommandPage.jsx +++ b/modern/src/settings/CommandPage.jsx @@ -2,24 +2,15 @@ import React, { useState } from 'react'; import { Accordion, AccordionSummary, AccordionDetails, Typography, TextField, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import { useTranslation } from '../common/components/LocalizationProvider'; import BaseCommandView from './components/BaseCommandView'; import SettingsMenu from './components/SettingsMenu'; - -const useStyles = makeStyles((theme) => ({ - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const CommandPage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const [item, setItem] = useState(); diff --git a/modern/src/settings/ComputedAttributePage.jsx b/modern/src/settings/ComputedAttributePage.jsx index 3bae8231..f179a78d 100644 --- a/modern/src/settings/ComputedAttributePage.jsx +++ b/modern/src/settings/ComputedAttributePage.jsx @@ -14,7 +14,6 @@ import { Button, Snackbar, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import { useTranslation } from '../common/components/LocalizationProvider'; @@ -23,20 +22,12 @@ import SettingsMenu from './components/SettingsMenu'; import SelectField from '../common/components/SelectField'; import { useCatch } from '../reactHelper'; import { snackBarDurationLongMs } from '../common/util/duration'; +import useSettingsStyles from './common/useSettingsStyles'; const allowedProperties = ['valid', 'latitude', 'longitude', 'altitude', 'speed', 'course', 'address', 'accuracy']; -const useStyles = makeStyles((theme) => ({ - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); - const ComputedAttributePage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const positionAttributes = usePositionAttributes(t); diff --git a/modern/src/settings/DeviceConnectionsPage.jsx b/modern/src/settings/DeviceConnectionsPage.jsx index 88d47872..e6565058 100644 --- a/modern/src/settings/DeviceConnectionsPage.jsx +++ b/modern/src/settings/DeviceConnectionsPage.jsx @@ -7,7 +7,6 @@ import { Typography, Container, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import LinkField from '../common/components/LinkField'; import { useTranslation } from '../common/components/LocalizationProvider'; @@ -15,21 +14,10 @@ import SettingsMenu from './components/SettingsMenu'; import { formatNotificationTitle } from '../common/util/formatter'; import PageLayout from '../common/components/PageLayout'; import useFeatures from '../common/util/useFeatures'; - -const useStyles = makeStyles((theme) => ({ - container: { - marginTop: theme.spacing(2), - }, - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const DeviceConnectionsPage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const { id } = useParams(); diff --git a/modern/src/settings/DevicePage.jsx b/modern/src/settings/DevicePage.jsx index d8a30cbf..ae8c9bf3 100644 --- a/modern/src/settings/DevicePage.jsx +++ b/modern/src/settings/DevicePage.jsx @@ -9,7 +9,6 @@ import { Checkbox, TextField, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { DropzoneArea } from 'react-mui-dropzone'; import EditItemView from './components/EditItemView'; @@ -23,18 +22,10 @@ import SettingsMenu from './components/SettingsMenu'; import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes'; import { useCatch } from '../reactHelper'; import useQuery from '../common/util/useQuery'; - -const useStyles = makeStyles((theme) => ({ - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const DevicePage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const admin = useAdministrator(); diff --git a/modern/src/settings/DriverPage.jsx b/modern/src/settings/DriverPage.jsx index 83d1f88f..5f70a44a 100644 --- a/modern/src/settings/DriverPage.jsx +++ b/modern/src/settings/DriverPage.jsx @@ -3,24 +3,15 @@ import TextField from '@mui/material/TextField'; import { Accordion, AccordionSummary, AccordionDetails, Typography, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesAccordion from './components/EditAttributesAccordion'; import { useTranslation } from '../common/components/LocalizationProvider'; import SettingsMenu from './components/SettingsMenu'; - -const useStyles = makeStyles((theme) => ({ - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const DriverPage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const [item, setItem] = useState(); diff --git a/modern/src/settings/GeofencePage.jsx b/modern/src/settings/GeofencePage.jsx index b6c516a1..93b23c7e 100644 --- a/modern/src/settings/GeofencePage.jsx +++ b/modern/src/settings/GeofencePage.jsx @@ -3,7 +3,6 @@ import { useDispatch } from 'react-redux'; import { Accordion, AccordionSummary, AccordionDetails, Typography, TextField, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesAccordion from './components/EditAttributesAccordion'; @@ -12,18 +11,10 @@ import useGeofenceAttributes from '../common/attributes/useGeofenceAttributes'; import SettingsMenu from './components/SettingsMenu'; import SelectField from '../common/components/SelectField'; import { geofencesActions } from '../store'; - -const useStyles = makeStyles((theme) => ({ - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const GeofencePage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const dispatch = useDispatch(); const t = useTranslation(); diff --git a/modern/src/settings/GroupConnectionsPage.jsx b/modern/src/settings/GroupConnectionsPage.jsx index 8ea3b88e..498bb709 100644 --- a/modern/src/settings/GroupConnectionsPage.jsx +++ b/modern/src/settings/GroupConnectionsPage.jsx @@ -7,7 +7,6 @@ import { Typography, Container, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import LinkField from '../common/components/LinkField'; import { useTranslation } from '../common/components/LocalizationProvider'; @@ -15,21 +14,10 @@ import SettingsMenu from './components/SettingsMenu'; import { formatNotificationTitle } from '../common/util/formatter'; import PageLayout from '../common/components/PageLayout'; import useFeatures from '../common/util/useFeatures'; - -const useStyles = makeStyles((theme) => ({ - container: { - marginTop: theme.spacing(2), - }, - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const GroupConnectionsPage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const { id } = useParams(); diff --git a/modern/src/settings/GroupPage.jsx b/modern/src/settings/GroupPage.jsx index c4ca867d..d21d0e5a 100644 --- a/modern/src/settings/GroupPage.jsx +++ b/modern/src/settings/GroupPage.jsx @@ -5,7 +5,6 @@ import TextField from '@mui/material/TextField'; import { Accordion, AccordionSummary, AccordionDetails, Typography, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import EditItemView from './components/EditItemView'; import EditAttributesAccordion from './components/EditAttributesAccordion'; @@ -16,18 +15,10 @@ import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttri import useGroupAttributes from '../common/attributes/useGroupAttributes'; import { useCatch } from '../reactHelper'; import { groupsActions } from '../store'; - -const useStyles = makeStyles((theme) => ({ - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const GroupPage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const dispatch = useDispatch(); const t = useTranslation(); diff --git a/modern/src/settings/MaintenancePage.jsx b/modern/src/settings/MaintenancePage.jsx index eb4946a7..420e2b82 100644 --- a/modern/src/settings/MaintenancePage.jsx +++ b/modern/src/settings/MaintenancePage.jsx @@ -10,7 +10,6 @@ import { MenuItem, Select, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { prefixString } from '../common/util/stringUtils'; import EditItemView from './components/EditItemView'; @@ -22,18 +21,10 @@ import { import { useTranslation } from '../common/components/LocalizationProvider'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; import SettingsMenu from './components/SettingsMenu'; - -const useStyles = makeStyles((theme) => ({ - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const MaintenancePage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const positionAttributes = usePositionAttributes(t); diff --git a/modern/src/settings/NotificationPage.jsx b/modern/src/settings/NotificationPage.jsx index fdefedaf..978d940c 100644 --- a/modern/src/settings/NotificationPage.jsx +++ b/modern/src/settings/NotificationPage.jsx @@ -10,7 +10,6 @@ import { FormGroup, Button, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation, useTranslationKeys } from '../common/components/LocalizationProvider'; import EditItemView from './components/EditItemView'; @@ -18,18 +17,10 @@ import { prefixString, unprefixString } from '../common/util/stringUtils'; import SelectField from '../common/components/SelectField'; import SettingsMenu from './components/SettingsMenu'; import { useCatch } from '../reactHelper'; - -const useStyles = makeStyles((theme) => ({ - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const NotificationPage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const [item, setItem] = useState(); diff --git a/modern/src/settings/PreferencesPage.jsx b/modern/src/settings/PreferencesPage.jsx index bd96b140..676bd58b 100644 --- a/modern/src/settings/PreferencesPage.jsx +++ b/modern/src/settings/PreferencesPage.jsx @@ -5,7 +5,6 @@ import { useNavigate } from 'react-router-dom'; import { Accordion, AccordionSummary, AccordionDetails, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, FormGroup, InputAdornment, IconButton, OutlinedInput, Autocomplete, TextField, createFilterOptions, Button, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import CachedIcon from '@mui/icons-material/Cached'; import ContentCopyIcon from '@mui/icons-material/ContentCopy'; @@ -20,6 +19,7 @@ import useMapOverlays from '../map/overlay/useMapOverlays'; import { useCatch } from '../reactHelper'; import { sessionActions } from '../store'; import { useRestriction } from '../common/util/permissions'; +import useSettingsStyles from './common/useSettingsStyles'; const deviceFields = [ { id: 'name', name: 'sharedName' }, @@ -29,33 +29,8 @@ const deviceFields = [ { id: 'contact', name: 'deviceContact' }, ]; -const useStyles = makeStyles((theme) => ({ - container: { - marginTop: theme.spacing(2), - }, - buttons: { - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), - display: 'flex', - justifyContent: 'space-evenly', - '& > *': { - flexBasis: '33%', - }, - }, - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, - tokenActions: { - display: 'flex', - flexDirection: 'column', - }, -})); - const PreferencesPage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const dispatch = useDispatch(); const navigate = useNavigate(); const t = useTranslation(); @@ -334,7 +309,7 @@ const PreferencesPage = () => { value={token || ''} endAdornment={( <InputAdornment position="end"> - <div className={classes.tokenActions}> + <div className={classes.verticalActions}> <IconButton size="small" edge="end" onClick={generateToken} disabled={!!token}> <CachedIcon fontSize="small" /> </IconButton> diff --git a/modern/src/settings/ServerPage.jsx b/modern/src/settings/ServerPage.jsx index 07ce2dad..7a3a1bbe 100644 --- a/modern/src/settings/ServerPage.jsx +++ b/modern/src/settings/ServerPage.jsx @@ -16,7 +16,6 @@ import { MenuItem, FormGroup, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; @@ -33,30 +32,10 @@ import { useCatch } from '../reactHelper'; import useServerAttributes from '../common/attributes/useServerAttributes'; import useMapStyles from '../map/core/useMapStyles'; import { map } from '../map/core/MapView'; - -const useStyles = makeStyles((theme) => ({ - container: { - marginTop: theme.spacing(2), - }, - buttons: { - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), - display: 'flex', - justifyContent: 'space-evenly', - '& > *': { - flexBasis: '33%', - }, - }, - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const ServerPage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const navigate = useNavigate(); const dispatch = useDispatch(); const t = useTranslation(); diff --git a/modern/src/settings/UserConnectionsPage.jsx b/modern/src/settings/UserConnectionsPage.jsx index 80de8835..b7500ebf 100644 --- a/modern/src/settings/UserConnectionsPage.jsx +++ b/modern/src/settings/UserConnectionsPage.jsx @@ -7,28 +7,16 @@ import { Typography, Container, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import LinkField from '../common/components/LinkField'; import { useTranslation } from '../common/components/LocalizationProvider'; import SettingsMenu from './components/SettingsMenu'; import { formatNotificationTitle } from '../common/util/formatter'; import PageLayout from '../common/components/PageLayout'; - -const useStyles = makeStyles((theme) => ({ - container: { - marginTop: theme.spacing(2), - }, - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const UserConnectionsPage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const { id } = useParams(); diff --git a/modern/src/settings/UserPage.jsx b/modern/src/settings/UserPage.jsx index d9a608ef..02312a86 100644 --- a/modern/src/settings/UserPage.jsx +++ b/modern/src/settings/UserPage.jsx @@ -38,18 +38,10 @@ import useQuery from '../common/util/useQuery'; import { useCatch } from '../reactHelper'; import useMapStyles from '../map/core/useMapStyles'; import { map } from '../map/core/MapView'; - -const useStyles = makeStyles((theme) => ({ - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from './common/useSettingsStyles'; const UserPage = () => { - const classes = useStyles(); + const classes = useSettingsStyles(); const navigate = useNavigate(); const dispatch = useDispatch(); const t = useTranslation(); diff --git a/modern/src/settings/common/useSettingsStyles.js b/modern/src/settings/common/useSettingsStyles.js index 396af232..b276e0b7 100644 --- a/modern/src/settings/common/useSettingsStyles.js +++ b/modern/src/settings/common/useSettingsStyles.js @@ -8,4 +8,26 @@ export default makeStyles((theme) => ({ width: '1%', paddingRight: theme.spacing(1), }, + container: { + marginTop: theme.spacing(2), + }, + buttons: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + display: 'flex', + justifyContent: 'space-evenly', + '& > *': { + flexBasis: '33%', + }, + }, + details: { + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(2), + paddingBottom: theme.spacing(3), + }, + verticalActions: { + display: 'flex', + flexDirection: 'column', + }, })); diff --git a/modern/src/settings/components/EditAttributesAccordion.jsx b/modern/src/settings/components/EditAttributesAccordion.jsx index 214ddb0e..4d4ae254 100644 --- a/modern/src/settings/components/EditAttributesAccordion.jsx +++ b/modern/src/settings/components/EditAttributesAccordion.jsx @@ -15,7 +15,6 @@ import { Typography, AccordionDetails, } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import CloseIcon from '@mui/icons-material/Close'; import AddIcon from '@mui/icons-material/Add'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; @@ -26,21 +25,10 @@ import { distanceFromMeters, distanceToMeters, distanceUnitString, speedFromKnots, speedToKnots, speedUnitString, volumeFromLiters, volumeToLiters, volumeUnitString, } from '../../common/util/converter'; import useFeatures from '../../common/util/useFeatures'; - -const useStyles = makeStyles((theme) => ({ - removeButton: { - marginRight: theme.spacing(1.5), - }, - details: { - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }, -})); +import useSettingsStyles from '../common/useSettingsStyles'; const EditAttributesAccordion = ({ attribute, attributes, setAttributes, definitions, focusAttribute }) => { - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const features = useFeatures(); diff --git a/modern/src/settings/components/EditItemView.jsx b/modern/src/settings/components/EditItemView.jsx index d45855dd..61bc4161 100644 --- a/modern/src/settings/components/EditItemView.jsx +++ b/modern/src/settings/components/EditItemView.jsx @@ -1,37 +1,18 @@ import React from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import makeStyles from '@mui/styles/makeStyles'; import { Container, Button, Accordion, AccordionDetails, AccordionSummary, Skeleton, Typography, TextField, } from '@mui/material'; import { useCatch, useEffectAsync } from '../../reactHelper'; import { useTranslation } from '../../common/components/LocalizationProvider'; import PageLayout from '../../common/components/PageLayout'; - -const useStyles = makeStyles((theme) => ({ - container: { - marginTop: theme.spacing(2), - }, - buttons: { - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), - display: 'flex', - justifyContent: 'space-evenly', - '& > *': { - flexBasis: '33%', - }, - }, - details: { - display: 'flex', - flexDirection: 'column', - }, -})); +import useSettingsStyles from '../common/useSettingsStyles'; const EditItemView = ({ children, endpoint, item, setItem, defaultItem, validate, onItemSaved, menu, breadcrumbs, }) => { const navigate = useNavigate(); - const classes = useStyles(); + const classes = useSettingsStyles(); const t = useTranslation(); const { id } = useParams(); |