Update webpack and leaflet

src/components/App.js

@@ -9,11 +9,7 @@ import throttle from "lodash/throttle";
 
 import type { Config, Control, Topics } from "config/flowtypes";
 
-import {
-  ThemeProvider, withStyles
-} from "@mui/styles";
-import { createTheme } from "@mui/material/styles";
-import * as Colors from "@mui/material/colors";
+import { withStyles } from "@mui/styles";
 import Snackbar from "@mui/material/Snackbar";
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
@@ -206,18 +202,6 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
   }
 }
 
-const generateTheme = (config: Config) =>
-  createTheme({
-    palette: {
-      primary: Colors[config.space.color]
-    }
-  });
 
-export default (props: AppProps) => {
-  const StyledApp = withStyles(App.styles)(App);
-  return (
-    <ThemeProvider theme={generateTheme(props.config)}>
-      <StyledApp {...props} />
-    </ThemeProvider>
-  );
-};
+
+export default withStyles(App.styles)(App);

src/components/ControlMap.js

@@ -1,6 +1,6 @@
 // @flow
 import React from "react";
-import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
+import { MapContainer, ImageOverlay, Marker, LayersControl } from "react-leaflet";
 import { CRS, point, divIcon } from "leaflet";
 import map from "lodash/map";
 import filter from "lodash/filter";
@@ -45,7 +45,9 @@ const renderMarker = (props: ControlMapProps) =>
       {({ state }) => (
         <Marker position={convertPoint(control.position)}
           icon={createLeafletIcon(control, state)}
-          onClick={() => props.onChangeControl(control)}
+          eventHandlers={{
+            click: () => props.onChangeControl(control)
+          }}
         >
         </Marker>
       )}
@@ -118,13 +120,13 @@ const renderLayers = (props: ControlMapProps) => (
 );
 
 const ControlMap = (props: ControlMapProps) => (
-  <Map center={center(props)}
+  <MapContainer center={center(props)}
     zoom={props.zoom}
     crs={CRS.Simple}
     leaflet={{}}>
     {renderMarkers(props)}
     {renderLayers(props)}
-  </Map>
+  </MapContainer>
 );
 
 export default ControlMap;

src/index.jsx

@@ -2,11 +2,18 @@
 import "core-js/stable";
 import "regenerator-runtime/runtime";
 import "../node_modules/leaflet/dist/leaflet.css";
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
 
 import React from "react";
 import ReactDOM from "react-dom";
 
 import App from "components/App";
+import { createTheme } from "@mui/material/styles";
+import { ThemeProvider } from "@mui/styles";
+import * as Colors from "@mui/material/colors";
 
 import "../css/styles.css";
 
@@ -16,6 +23,21 @@ const config: Config = window.config;
 
 document.title = `${config.space.name} Map`;
 
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: Colors[config.space.color][500]
+    },
+    secondary: {
+      main: Colors.orange[500]
+    }
+  }
+});
+
 // $FlowFixMe
 const contentElement: Element = document.getElementById("content");
-ReactDOM.render(<App config={config} />, contentElement);
+ReactDOM.render((
+  <ThemeProvider theme={theme}>
+    <App config={config} />
+  </ThemeProvider>
+), contentElement);