Update MUI to v5

package.json

@@ -29,9 +29,12 @@
     ]
   },
   "dependencies": {
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "4.0.0-alpha.58",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.2",
+    "@mui/lab": "^5.0.0-alpha.158",
+    "@mui/material": "^5.15.2",
+    "@mui/styles": "^5.15.2",
     "@openstreetmap/id-tagging-schema": "^6.1.0",
     "@sentry/browser": "^6.5.1",
     "@sentry/node": "^6.5.1",

pages/_app.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import App from 'next/app';
 import Head from 'next/head';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import CssBaseline from '@mui/material/CssBaseline';
 import nextCookies from 'next-cookies';
 import { UserThemeProvider } from '../src/helpers/theme';
 import { GlobalStyle } from '../src/helpers/GlobalStyle';

pages/_document.tsx

@@ -6,7 +6,7 @@ import Document, {
   Main,
   NextScript,
 } from 'next/document';
-import { ServerStyleSheets } from '@material-ui/core/styles';
+import { ServerStyleSheets } from '@mui/styles';
 import { ServerStyleSheet } from 'styled-components';
 import type { DocumentContext } from 'next/dist/shared/lib/utils';
 import { getServerIntl } from '../src/services/intlServer';

src/components/App/Loading.tsx

@@ -1,7 +1,7 @@
-import LinearProgress from '@material-ui/core/LinearProgress';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import Router from 'next/router';
+import { LinearProgress } from '@mui/material';
 import { isDesktop, useBoolState } from '../helpers';
 
 const Wrapper = styled.div`

src/components/FeaturePanel/Climbing/ClimbingDialog.tsx

@@ -1,13 +1,8 @@
 import React, { useRef } from 'react';
 import styled from 'styled-components';
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-} from '@material-ui/core';
-import AddIcon from '@material-ui/icons/Add';
+import AddIcon from '@mui/icons-material/Add';
 import Router from 'next/router';
+import { Dialog, DialogContent, DialogActions, Button } from '@mui/material';
 import { ClimbingView } from './ClimbingView';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import { ClimbingDialogHeader } from './ClimbingDialogHeader';

src/components/FeaturePanel/Climbing/ClimbingDialogHeader.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import Router from 'next/router';
 import styled from 'styled-components';
-import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-import TuneIcon from '@material-ui/icons/Tune';
+import CloseIcon from '@mui/icons-material/Close';
+import TuneIcon from '@mui/icons-material/Tune';
+import { AppBar, Toolbar, Typography, IconButton } from '@mui/material';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import { ClimbingSettings } from './ClimbingSettings';
 import { PhotoLink } from './PhotoLink';

src/components/FeaturePanel/Climbing/ClimbingPanel.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Button, CircularProgress } from '@material-ui/core';
 import Router from 'next/router';
-import ZoomInIcon from '@material-ui/icons/ZoomIn';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import { CircularProgress, Button } from '@mui/material';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import { PanelScrollbars, PanelWrapper } from '../../utils/PanelHelpers';
 import { RoutesLayer } from './Editor/RoutesLayer';
@@ -16,11 +16,11 @@ import { StarButton } from '../ImageSection/StarButton';
 import { OsmError } from '../OsmError';
 import { Properties } from '../Properties/Properties';
 import { PoiDescription } from '../ImageSection/PoiDescription';
+import { ImageSlider } from '../ImagePane/ImageSlider';
+import { ClimbingParentLink } from '../ParentLink';
 import { RouteDistribution } from './RouteDistribution';
 import { YellowedBadge } from './YellowedBadge';
-import { ClimbingParentLink } from '../ParentLink';
 import { getFeaturePhotos } from './utils/photo';
-import { ImageSlider } from '../ImagePane/ImageSlider';
 
 const ThumbnailContainer = styled.div<{ height: number }>`
   width: 100%;

src/components/FeaturePanel/Climbing/ClimbingSettings.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Dialog,
   DialogTitle,
@@ -7,8 +8,7 @@ import {
   ListItemText,
   Switch,
   Slider,
-} from '@material-ui/core';
-import React from 'react';
+} from '@mui/material';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import { GradeSystemSelect } from './GradeSystemSelect';
 

src/components/FeaturePanel/Climbing/ClimbingView.tsx

@@ -1,21 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import SplitPane from 'react-split-pane';
-import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
-import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
-import { CircularProgress, IconButton, useTheme } from '@material-ui/core';
-
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import { CircularProgress, IconButton, useTheme } from '@mui/material';
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import { RouteList } from './RouteList/RouteList';
 import { RoutesEditor } from './Editor/RoutesEditor';
 import { getCommonsImageUrl } from '../../../services/images/getWikiImage';
 import { Guide } from './Guide';
 import { ControlPanel } from './Editor/ControlPanel';
-import { useScrollShadow } from './utils/useScrollShadow';
+import { useFeatureContext } from '../../utils/FeatureContext';
 import { RouteDistribution } from './RouteDistribution';
 import { getFeaturePhotos } from './utils/photo';
-import { useFeatureContext } from '../../utils/FeatureContext';
+import { useScrollShadow } from './utils/useScrollShadow';
 
 const Container = styled.div`
   position: relative;

src/components/FeaturePanel/Climbing/Editor/ControlPanel.tsx

@@ -1,7 +1,7 @@
-import { IconButton } from '@material-ui/core';
-import UndoIcon from '@material-ui/icons/Undo';
+import UndoIcon from '@mui/icons-material/Undo';
 import React from 'react';
 import styled from 'styled-components';
+import { IconButton } from '@mui/material';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 
 const Container = styled.div`

src/components/FeaturePanel/Climbing/Editor/PathWithBorder.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import styled from 'styled-components';
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@mui/material';
 import { useConfig } from '../config';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 import { getDifficultyColor } from '../utils/routeGrade';

src/components/FeaturePanel/Climbing/Editor/PointMenu.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
+
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
+import CloseIcon from '@mui/icons-material/Close';
+import CheckIcon from '@mui/icons-material/Check';
+import DeleteIcon from '@mui/icons-material/Delete';
 import {
+  Popover,
   DialogTitle,
-  Divider,
-  ListItemIcon,
-  MenuItem,
   MenuList,
-  Popover,
+  MenuItem,
+  ListItemIcon,
   Typography,
-} from '@material-ui/core';
-import RemoveCircleIcon from '@material-ui/icons/RemoveCircle';
-import CloseIcon from '@material-ui/icons/Close';
-import CheckIcon from '@material-ui/icons/Check';
-import DeleteIcon from '@material-ui/icons/Delete';
+  Divider,
+} from '@mui/material';
 import { PointType } from '../types';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 

src/components/FeaturePanel/Climbing/Editor/RouteFloatingMenu.tsx

@@ -1,18 +1,19 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import CheckIcon from '@material-ui/icons/Check';
-import AddLocationIcon from '@material-ui/icons/AddLocation';
-import DeleteIcon from '@material-ui/icons/Delete';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import CheckIcon from '@mui/icons-material/Check';
+import AddLocationIcon from '@mui/icons-material/AddLocation';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
 import {
-  Button,
-  ButtonGroup,
   Dialog,
-  DialogActions,
+  DialogTitle,
   DialogContent,
   DialogContentText,
-  DialogTitle,
-} from '@material-ui/core';
+  DialogActions,
+  Button,
+  ButtonGroup,
+} from '@mui/material';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 import { PointType } from '../types';
 

src/components/FeaturePanel/Climbing/GradeSystemSelect.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { MenuItem, Select } from '@material-ui/core';
+import { Select, MenuItem } from '@mui/material';
 import { GradeSystem } from './types';
 import { gradeSystem } from './utils/gradeData';
 

src/components/FeaturePanel/Climbing/Guide.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { Alert } from '@material-ui/lab';
-import { Button, Snackbar } from '@material-ui/core';
+
+import { Button, Snackbar, Alert } from '@mui/material';
 import { t } from '../../../services/intl';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import { RouteNumber } from './RouteNumber';

src/components/FeaturePanel/Climbing/RouteDifficultyBadge.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { GradeSystem, RouteDifficulty } from './types';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import {

src/components/FeaturePanel/Climbing/RouteDifficultySelect.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 import { GradeSystem, RouteDifficulty } from './types';
 import { GradeSystemSelect } from './GradeSystemSelect';
 import { useClimbingContext } from './contexts/ClimbingContext';

src/components/FeaturePanel/Climbing/RouteList/ExpandedRow.tsx

@@ -1,20 +1,20 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
+
+import DeleteIcon from '@mui/icons-material/Delete';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import AddIcon from '@mui/icons-material/Add';
 import {
+  List,
+  ListItem,
+  TextField,
   Button,
   Dialog,
-  DialogActions,
+  DialogTitle,
   DialogContent,
   DialogContentText,
-  DialogTitle,
-  List,
-  ListItem,
-  TextField,
-} from '@material-ui/core';
-
-import DeleteIcon from '@material-ui/icons/Delete';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
-import AddIcon from '@material-ui/icons/Add';
+  DialogActions,
+} from '@mui/material';
 import { RouteDifficultySelect } from '../RouteDifficultySelect';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 import { RouteInDifferentPhotos } from './RouteInDifferentPhotos';

src/components/FeaturePanel/Climbing/RouteList/MyTicks.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import DeleteIcon from '@material-ui/icons/Delete';
-import { Button, FormControl, MenuItem, Select } from '@material-ui/core';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { format } from 'date-fns';
+import { FormControl, Select, MenuItem, Button } from '@mui/material';
 import {
   findTicks,
   onTickDelete,

src/components/FeaturePanel/Climbing/RouteList/RouteList.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Button, ButtonGroup } from '@material-ui/core';
-import EditIcon from '@material-ui/icons/Edit';
+import EditIcon from '@mui/icons-material/Edit';
+import { Button, ButtonGroup } from '@mui/material';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 import { RouteListDndContent } from './RouteListDndContent';
 import { addElementToArray, deleteFromArray } from '../utils/array';

src/components/FeaturePanel/Climbing/RouteList/RouteListDndContent.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import React, { useEffect, useState } from 'react';
-import DragIndicatorIcon from '@material-ui/icons/DragIndicator';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 import { RenderListRow } from './RouteListRow';
 

src/components/FeaturePanel/Climbing/RouteList/RouteListRow.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { IconButton, TextField, Tooltip } from '@material-ui/core';
 import { debounce } from 'lodash';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import CheckIcon from '@material-ui/icons/Check';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import CheckIcon from '@mui/icons-material/Check';
+import { TextField, Tooltip, IconButton } from '@mui/material';
 import { ClimbingRoute } from '../types';
 import { useClimbingContext } from '../contexts/ClimbingContext';
 import { emptyRoute } from '../utils/emptyRoute';

src/components/FeaturePanel/Climbing/RouteNumber.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { useRouteNumberColors } from './utils/useRouteNumberColors';
 import { isTicked } from '../../../services/ticks';
 

src/components/FeaturePanel/Climbing/ShowFullscreen.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import ZoomInIcon from '@material-ui/icons/ZoomIn';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
 
 import { Size } from './types';
 

src/components/FeaturePanel/Climbing/YellowedBadge.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import CheckIcon from '@material-ui/icons/Check';
+import CheckIcon from '@mui/icons-material/Check';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import { isTicked } from '../../../services/ticks';
 import { getShortId } from '../../../services/helpers';

src/components/FeaturePanel/Climbing/config.ts

@@ -1,4 +1,4 @@
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@mui/material';
 import { useClimbingContext } from './contexts/ClimbingContext';
 
 export const useConfig = () => {
@@ -21,8 +21,8 @@ export const useConfig = () => {
     anchorBorderColor: borderColor,
     anchorBorderColorSelected: inactiveColor,
 
-    pathBorderWidth: 6 / photoZoom.scale,
+    pathBorderWidth: 5.1 / photoZoom.scale,
     pathBorderOpacity: 1,
-    pathStrokeWidth: 4 / photoZoom.scale,
+    pathStrokeWidth: 3.5 / photoZoom.scale,
   };
 };

src/components/FeaturePanel/Climbing/useGetHandleSave.tsx

@@ -4,9 +4,9 @@ import { useFeatureContext } from '../../utils/FeatureContext';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import { Change, editCrag } from '../../../services/osmApiAuth';
 import { invertedBoltCodeMap } from './utils/boltCodes';
-import { getFeaturePhotoKeys } from './utils/photo';
 import { getOsmTagFromGradeSystem } from './utils/routeGrade';
 import { useSnackbar } from '../../utils/SnackbarContext';
+import { getFeaturePhotoKeys } from './utils/photo';
 
 const WIKIMEDIA_COMMONS = 'wikimedia_commons';