From fae4f1bc0b169e815a2b0cc896dcda22aa7dc2c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= Date: Thu, 6 Jun 2024 06:44:43 +0200 Subject: [PATCH] Update MUI to v5 (#218) --- package.json | 9 +- pages/_app.tsx | 2 +- pages/_document.tsx | 2 +- src/components/App/Loading.tsx | 2 +- .../FeaturePanel/Climbing/ClimbingDialog.tsx | 9 +- .../Climbing/ClimbingDialogHeader.tsx | 6 +- .../FeaturePanel/Climbing/ClimbingPanel.tsx | 8 +- .../Climbing/ClimbingSettings.tsx | 4 +- .../FeaturePanel/Climbing/ClimbingView.tsx | 11 +- .../Climbing/Editor/ControlPanel.tsx | 4 +- .../Climbing/Editor/PathWithBorder.tsx | 2 +- .../Climbing/Editor/PointMenu.tsx | 19 +- .../Climbing/Editor/RouteFloatingMenu.tsx | 19 +- .../Climbing/GradeSystemSelect.tsx | 2 +- .../FeaturePanel/Climbing/Guide.tsx | 4 +- .../Climbing/RouteDifficultyBadge.tsx | 2 +- .../Climbing/RouteDifficultySelect.tsx | 2 +- .../Climbing/RouteList/ExpandedRow.tsx | 20 +- .../Climbing/RouteList/MyTicks.tsx | 4 +- .../Climbing/RouteList/RouteList.tsx | 4 +- .../RouteList/RouteListDndContent.tsx | 2 +- .../Climbing/RouteList/RouteListRow.tsx | 6 +- .../FeaturePanel/Climbing/RouteNumber.tsx | 2 +- .../FeaturePanel/Climbing/ShowFullscreen.tsx | 2 +- .../FeaturePanel/Climbing/YellowedBadge.tsx | 2 +- .../FeaturePanel/Climbing/config.ts | 6 +- .../Climbing/useGetHandleSave.tsx | 2 +- .../FeaturePanel/Climbing/utils/routeGrade.ts | 6 +- .../Climbing/utils/useRouteNumberColors.tsx | 2 +- src/components/FeaturePanel/Coordinates.tsx | 13 +- src/components/FeaturePanel/EditButton.tsx | 9 +- .../FeaturePanel/EditDialog/EditDialog.tsx | 18 +- .../EditDialog/FeatureTypeSelect.tsx | 2 +- .../EditDialog/MajorKeysEditor.tsx | 6 +- .../EditDialog/OtherTagsEditor.tsx | 9 +- .../EditDialog/SuccessContent.tsx | 24 +- .../FeaturePanel/EditDialog/components.tsx | 13 +- .../FeaturePanel/FeatureDescription.tsx | 17 +- src/components/FeaturePanel/FeaturePanel.tsx | 63 +- src/components/FeaturePanel/Gallery.tsx | 58 ++ .../ImageSection/FeatureImage.tsx | 3 +- .../ImageSection/ImageSection.tsx | 4 +- .../FeaturePanel/ImageSection/StarButton.tsx | 6 +- .../FeaturePanel/ImageSection/utils.tsx | 2 +- .../FeaturePanel/MemberFeatures.tsx | 4 +- src/components/FeaturePanel/Members.tsx | 2 +- src/components/FeaturePanel/ObjectsAround.tsx | 2 +- src/components/FeaturePanel/OsmError.tsx | 6 +- src/components/FeaturePanel/ParentLink.tsx | 2 +- .../FeaturePanel/Properties/Properties.tsx | 2 +- .../FeaturePanel/Properties/helpers.tsx | 6 +- .../PublicTransport/PublicTransport.tsx | 2 +- .../FeaturePanel/helpers/EditIconButton.tsx | 19 +- .../FeaturePanel/helpers/Subheading.tsx | 2 +- .../FeaturePanel/helpers/ToggleButton.tsx | 8 +- .../renderers/FoodHygieneRatingScheme.tsx | 5 +- .../renderers/OpeningHoursRenderer.tsx | 2 +- .../FeaturePanel/renderers/PhoneRenderer.tsx | 2 +- .../renderers/WebsiteRenderer.tsx | 2 +- .../FeaturePreview/FeaturePreview.tsx | 4 +- .../HomepagePanel/HomepagePanel.tsx | 10 +- .../HomepagePanel/InstallDialog.tsx | 24 +- .../LayerSwitcher/LayerSwitcher.tsx | 4 +- .../LayerSwitcher/LayerSwitcherContent.tsx | 7 +- src/components/LayerSwitcher/Overlays.tsx | 8 +- src/components/LayerSwitcher/helpers.tsx | 16 +- src/components/LayerSwitcher/osmappLayers.tsx | 12 +- src/components/Map/Map.tsx | 5 +- .../Map/MapFooter/ClimbingLegend.tsx | 4 +- src/components/Map/MapFooter/MapDataLink.tsx | 54 ++ src/components/Map/MapFooter/MapFooter.tsx | 8 +- src/components/Map/TopMenu/HamburgerMenu.tsx | 22 +- src/components/Map/TopMenu/LangSwitcher.tsx | 4 +- src/components/Map/TopMenu/LoginIcon.tsx | 4 +- .../SearchBox/AutocompleteInput.tsx | 14 +- src/components/SearchBox/SearchBox.tsx | 7 +- .../SearchBox/renderOptionFactory.tsx | 18 +- src/components/helpers.tsx | 2 +- src/components/utils/ClosePanelButton.tsx | 4 +- src/components/utils/MapStateContext.tsx | 4 +- src/components/utils/PanelHelpers.tsx | 2 +- src/components/utils/SnackbarContext.tsx | 3 +- src/helpers/getPageContext.ts | 15 +- src/helpers/theme.tsx | 23 +- src/locales/cs.js | 2 +- types.d.ts | 51 ++ yarn.lock | 541 ++++++++++++------ 87 files changed, 859 insertions(+), 491 deletions(-) create mode 100644 src/components/FeaturePanel/Gallery.tsx create mode 100644 src/components/Map/MapFooter/MapDataLink.tsx create mode 100644 types.d.ts diff --git a/package.json b/package.json index b9565d9ac..2f1a7272c 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index 7fc253931..f3833dc22 100644 --- a/pages/_app.tsx +++ b/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'; diff --git a/pages/_document.tsx b/pages/_document.tsx index 4487202be..1c1bb5676 100644 --- a/pages/_document.tsx +++ b/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'; diff --git a/src/components/App/Loading.tsx b/src/components/App/Loading.tsx index 69f601048..72d3452da 100644 --- a/src/components/App/Loading.tsx +++ b/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` diff --git a/src/components/FeaturePanel/Climbing/ClimbingDialog.tsx b/src/components/FeaturePanel/Climbing/ClimbingDialog.tsx index cddfe2602..f62f94050 100644 --- a/src/components/FeaturePanel/Climbing/ClimbingDialog.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/ClimbingDialogHeader.tsx b/src/components/FeaturePanel/Climbing/ClimbingDialogHeader.tsx index 153eed856..24334e392 100644 --- a/src/components/FeaturePanel/Climbing/ClimbingDialogHeader.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx b/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx index ec7fa32e0..6a0a29986 100644 --- a/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx +++ b/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%; diff --git a/src/components/FeaturePanel/Climbing/ClimbingSettings.tsx b/src/components/FeaturePanel/Climbing/ClimbingSettings.tsx index fdac158d8..9d92d1132 100644 --- a/src/components/FeaturePanel/Climbing/ClimbingSettings.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/ClimbingView.tsx b/src/components/FeaturePanel/Climbing/ClimbingView.tsx index 1443a9472..29641c9a0 100644 --- a/src/components/FeaturePanel/Climbing/ClimbingView.tsx +++ b/src/components/FeaturePanel/Climbing/ClimbingView.tsx @@ -1,10 +1,9 @@ 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'; @@ -12,10 +11,10 @@ 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; diff --git a/src/components/FeaturePanel/Climbing/Editor/ControlPanel.tsx b/src/components/FeaturePanel/Climbing/Editor/ControlPanel.tsx index bd4f4a7ec..afb110682 100644 --- a/src/components/FeaturePanel/Climbing/Editor/ControlPanel.tsx +++ b/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` diff --git a/src/components/FeaturePanel/Climbing/Editor/PathWithBorder.tsx b/src/components/FeaturePanel/Climbing/Editor/PathWithBorder.tsx index 5f65416e3..d6105fc3e 100644 --- a/src/components/FeaturePanel/Climbing/Editor/PathWithBorder.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/Editor/PointMenu.tsx b/src/components/FeaturePanel/Climbing/Editor/PointMenu.tsx index 2ea72b7de..207646354 100644 --- a/src/components/FeaturePanel/Climbing/Editor/PointMenu.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/Editor/RouteFloatingMenu.tsx b/src/components/FeaturePanel/Climbing/Editor/RouteFloatingMenu.tsx index cebcc64d9..7a2084715 100644 --- a/src/components/FeaturePanel/Climbing/Editor/RouteFloatingMenu.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/GradeSystemSelect.tsx b/src/components/FeaturePanel/Climbing/GradeSystemSelect.tsx index 3d9b5b219..308d384f7 100644 --- a/src/components/FeaturePanel/Climbing/GradeSystemSelect.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/Guide.tsx b/src/components/FeaturePanel/Climbing/Guide.tsx index 6d9a8bf4d..8b69b13b3 100644 --- a/src/components/FeaturePanel/Climbing/Guide.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/RouteDifficultyBadge.tsx b/src/components/FeaturePanel/Climbing/RouteDifficultyBadge.tsx index 26dda22be..8627e9cd9 100644 --- a/src/components/FeaturePanel/Climbing/RouteDifficultyBadge.tsx +++ b/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 { diff --git a/src/components/FeaturePanel/Climbing/RouteDifficultySelect.tsx b/src/components/FeaturePanel/Climbing/RouteDifficultySelect.tsx index 19c59eba6..3dd0afe87 100644 --- a/src/components/FeaturePanel/Climbing/RouteDifficultySelect.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/RouteList/ExpandedRow.tsx b/src/components/FeaturePanel/Climbing/RouteList/ExpandedRow.tsx index 8476f3478..0425f4b03 100644 --- a/src/components/FeaturePanel/Climbing/RouteList/ExpandedRow.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/RouteList/MyTicks.tsx b/src/components/FeaturePanel/Climbing/RouteList/MyTicks.tsx index 467f5395d..a9b91bf6d 100644 --- a/src/components/FeaturePanel/Climbing/RouteList/MyTicks.tsx +++ b/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, diff --git a/src/components/FeaturePanel/Climbing/RouteList/RouteList.tsx b/src/components/FeaturePanel/Climbing/RouteList/RouteList.tsx index 2cf536f77..3d2530157 100644 --- a/src/components/FeaturePanel/Climbing/RouteList/RouteList.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/RouteList/RouteListDndContent.tsx b/src/components/FeaturePanel/Climbing/RouteList/RouteListDndContent.tsx index ff54d48af..9bfc9f112 100644 --- a/src/components/FeaturePanel/Climbing/RouteList/RouteListDndContent.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/RouteList/RouteListRow.tsx b/src/components/FeaturePanel/Climbing/RouteList/RouteListRow.tsx index 1dd864382..0de208220 100644 --- a/src/components/FeaturePanel/Climbing/RouteList/RouteListRow.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/RouteNumber.tsx b/src/components/FeaturePanel/Climbing/RouteNumber.tsx index 55f915567..26a11a548 100644 --- a/src/components/FeaturePanel/Climbing/RouteNumber.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/ShowFullscreen.tsx b/src/components/FeaturePanel/Climbing/ShowFullscreen.tsx index 31260bb65..eef33e3da 100644 --- a/src/components/FeaturePanel/Climbing/ShowFullscreen.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/YellowedBadge.tsx b/src/components/FeaturePanel/Climbing/YellowedBadge.tsx index fea2f54d4..2587b9ec2 100644 --- a/src/components/FeaturePanel/Climbing/YellowedBadge.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/config.ts b/src/components/FeaturePanel/Climbing/config.ts index 09c1439a4..ca4204c9c 100644 --- a/src/components/FeaturePanel/Climbing/config.ts +++ b/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, }; }; diff --git a/src/components/FeaturePanel/Climbing/useGetHandleSave.tsx b/src/components/FeaturePanel/Climbing/useGetHandleSave.tsx index 49f044afc..372cba15c 100644 --- a/src/components/FeaturePanel/Climbing/useGetHandleSave.tsx +++ b/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'; diff --git a/src/components/FeaturePanel/Climbing/utils/routeGrade.ts b/src/components/FeaturePanel/Climbing/utils/routeGrade.ts index 077d08f7a..92a71fe3a 100644 --- a/src/components/FeaturePanel/Climbing/utils/routeGrade.ts +++ b/src/components/FeaturePanel/Climbing/utils/routeGrade.ts @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import { GradeSystem, GradeTable, RouteDifficulty } from '../types'; import { gradeColors, gradeSystem, gradeTableString } from './gradeData'; @@ -56,7 +56,7 @@ export const getDifficultyColor = ( const DEFAULT_COLOR = '#555'; if (!difficulty) return DEFAULT_COLOR; const theme = useTheme(); - const { type } = theme.palette; + const { mode } = theme.palette; const uiaaGrade = difficulty.gradeSystem !== 'uiaa' ? convertGrade( @@ -66,7 +66,7 @@ export const getDifficultyColor = ( difficulty.grade, ) : difficulty.grade; - return gradeColors[uiaaGrade]?.[type] || DEFAULT_COLOR; + return gradeColors[uiaaGrade]?.[mode] || DEFAULT_COLOR; }; export const getRouteGrade = ( diff --git a/src/components/FeaturePanel/Climbing/utils/useRouteNumberColors.tsx b/src/components/FeaturePanel/Climbing/utils/useRouteNumberColors.tsx index 77f3ece8a..86d5269c7 100644 --- a/src/components/FeaturePanel/Climbing/utils/useRouteNumberColors.tsx +++ b/src/components/FeaturePanel/Climbing/utils/useRouteNumberColors.tsx @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; type RouteNumberColorsParams = { isSelected?: boolean; diff --git a/src/components/FeaturePanel/Coordinates.tsx b/src/components/FeaturePanel/Coordinates.tsx index 41010d1c2..d88a1329e 100644 --- a/src/components/FeaturePanel/Coordinates.tsx +++ b/src/components/FeaturePanel/Coordinates.tsx @@ -1,10 +1,11 @@ import React, { forwardRef } from 'react'; -import IconButton from '@material-ui/core/IconButton'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import ExpandLessIcon from '@material-ui/icons/ExpandLess'; + import styled from 'styled-components'; -import { Divider, Menu, MenuItem } from '@material-ui/core'; -import OpenInNewIcon from '@material-ui/icons/OpenInNew'; + +import { MenuItem, IconButton, Menu, Divider } from '@mui/material'; +import ExpandLessIcon from '@mui/icons-material/ExpandLess'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import { useMapStateContext } from '../utils/MapStateContext'; import { isMobileDevice, useBoolState } from '../helpers'; import { useFeatureContext } from '../utils/FeatureContext'; @@ -30,7 +31,7 @@ const StyledMenuItem = styled(MenuItem)` const StyledToggleButton = styled(IconButton)` position: absolute !important; - margin: -10px 0 0 -10px !important; + margin: -5px 0 0 0 !important; svg { font-size: 17px; diff --git a/src/components/FeaturePanel/EditButton.tsx b/src/components/FeaturePanel/EditButton.tsx index f41aaf5df..ac44f7248 100644 --- a/src/components/FeaturePanel/EditButton.tsx +++ b/src/components/FeaturePanel/EditButton.tsx @@ -1,8 +1,7 @@ -import Button from '@material-ui/core/Button'; -import EditIcon from '@material-ui/icons/Edit'; -import AddLocationIcon from '@material-ui/icons/AddLocation'; +import { Box, Button } from '@mui/material'; +import EditIcon from '@mui/icons-material/Edit'; +import AddLocationIcon from '@mui/icons-material/AddLocation'; import React from 'react'; -import { Box } from '@material-ui/core'; import { t } from '../../services/intl'; import { useOsmAuthContext } from '../utils/OsmAuthContext'; import { useEditDialogContext } from './helpers/EditDialogContext'; @@ -19,7 +18,7 @@ export const EditButton = ({ isAddPlace, isUndelete }) => { const { open } = useEditDialogContext(); return ( - +