({
icon: {
@@ -102,4 +103,4 @@ const mapDispatchToProps = (dispatch: any) => {
}
}
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton) as any)
diff --git a/app/src/components/Layout/SearchBar.tsx b/app/src/components/Layout/SearchBar.tsx
index ba3dffe..1e3a205 100644
--- a/app/src/components/Layout/SearchBar.tsx
+++ b/app/src/components/Layout/SearchBar.tsx
@@ -1,12 +1,13 @@
import React, { useCallback, useState, useRef } from 'react'
import ClearAdornment from '../helper/ClearAdornment'
-import Search from '@material-ui/icons/Search'
+import Search from '@mui/icons-material/Search'
import { AppState } from '../../reducers'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
-import { InputBase } from '@material-ui/core'
+import { InputBase } from '@mui/material'
import { settingsActions } from '../../actions'
-import { fade, Theme, withStyles } from '@material-ui/core/styles'
+import { alpha as fade, Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler'
import { KeyCodes } from '../../utils/KeyCodes'
@@ -142,4 +143,4 @@ const styles = (theme: Theme) => ({
},
})
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SearchBar))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SearchBar) as any)
diff --git a/app/src/components/Layout/TitleBar.tsx b/app/src/components/Layout/TitleBar.tsx
index ed031b6..ab4c973 100644
--- a/app/src/components/Layout/TitleBar.tsx
+++ b/app/src/components/Layout/TitleBar.tsx
@@ -1,15 +1,17 @@
import * as React from 'react'
-import CloudOff from '@material-ui/icons/CloudOff'
+import CloudOff from '@mui/icons-material/CloudOff'
import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
-import Menu from '@material-ui/icons/Menu'
+const ConnectionHealthIndicatorAny = ConnectionHealthIndicator as any
+import Menu from '@mui/icons-material/Menu'
import PauseButton from './PauseButton'
import SearchBar from './SearchBar'
-import { AppBar, Button, IconButton, Toolbar, Typography } from '@material-ui/core'
+import { AppBar, Button, IconButton, Toolbar, Typography } from '@mui/material'
import { AppState } from '../../reducers'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { connectionActions, globalActions, settingsActions } from '../../actions'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
const styles = (theme: Theme) => ({
title: {
@@ -75,12 +77,12 @@ class TitleBar extends React.PureComponent
{
-
+
)
diff --git a/app/src/components/LoginDialog.tsx b/app/src/components/LoginDialog.tsx
index f0c9bfe..7490323 100644
--- a/app/src/components/LoginDialog.tsx
+++ b/app/src/components/LoginDialog.tsx
@@ -1,5 +1,5 @@
import * as React from 'react'
-import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Typography } from '@material-ui/core'
+import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Typography } from '@mui/material'
interface LoginDialogProps {
open: boolean
@@ -17,7 +17,7 @@ export function LoginDialog(props: LoginDialogProps) {
}
return (
-