From e05c9adf2b6f191740caa916776f88c4e71b02e9 Mon Sep 17 00:00:00 2001 From: dotrongkhang2000 <76832829+dotrongkhang2000@users.noreply.github.com> Date: Wed, 23 Mar 2022 06:09:27 +0700 Subject: [PATCH] [NEU-156] Upgrade to MUI v5 (#836) Co-authored-by: Quang Lam --- package.json | 21 +- src/components/add-workspace/app-card.js | 59 ++- src/components/add-workspace/empty-state.js | 4 +- .../add-workspace/enhanced-dialog-title.js | 17 +- src/components/add-workspace/form.js | 33 +- src/components/add-workspace/home.js | 16 +- src/components/add-workspace/index.js | 14 +- src/components/add-workspace/no-connection.js | 8 +- src/components/add-workspace/search-box.js | 16 +- .../add-workspace/submit-app-card.js | 12 +- src/components/app-lock/index.js | 25 +- src/components/app-wrapper.js | 57 +- src/components/auth/index.js | 6 +- src/components/display-media/index.js | 14 +- src/components/go-to-url/index.js | 6 +- src/components/license-registration/index.js | 14 +- src/components/main/draggable-region.js | 2 +- src/components/main/find-in-page.js | 8 +- src/components/main/index.js | 16 +- src/components/main/mac-title-bar.js | 9 +- src/components/main/navigation-bar.js | 29 +- src/components/main/rating-button.js | 4 +- src/components/main/sidebar.js | 23 +- src/components/main/tab-bar/index.js | 9 +- src/components/main/tab-bar/tab.js | 6 +- src/components/main/workspace-selector.js | 24 +- src/components/notifications/index.js | 59 +-- src/components/open-url-with/index.js | 16 +- src/components/preferences/index.js | 60 +-- .../dialog-open-source-notices.js | 6 +- .../preferences/section-about/index.js | 10 +- .../section-about/list-item-about.js | 10 +- .../section-about/list-item-updates.js | 12 +- .../section-account-licensing/index.js | 10 +- .../section-app-lock/dialog-app-lock.js | 30 +- .../preferences/section-app-lock/index.js | 20 +- .../preferences/section-auto-reload/index.js | 18 +- .../preferences/section-autofill/index.js | 2 +- .../preferences/section-badge/index.js | 10 +- .../preferences/section-contents/index.js | 14 +- .../preferences/section-dark-reader/index.js | 22 +- .../preferences/section-developers/index.js | 14 +- .../preferences/section-downloads/index.js | 14 +- .../preferences/section-exit/index.js | 10 +- .../preferences/section-extensions/index.js | 2 +- .../list-item-extensions.js | 30 +- .../section-fonts/dialog-customize-fonts.js | 18 +- .../preferences/section-fonts/index.js | 16 +- .../preferences/section-hardware/index.js | 12 +- .../preferences/section-hibernation/index.js | 18 +- .../preferences/section-home/index.js | 8 +- .../preferences/section-labs/index.js | 10 +- .../dialog-spellcheck-languages.js | 20 +- .../preferences/section-language/index.js | 14 +- .../section-link-handling/index.js | 14 +- .../list-item-open-protocol-url.js | 10 +- .../section-location-permissions/index.js | 2 +- .../preferences/section-mode/index.js | 12 +- .../preferences/section-more-apps/index.js | 12 +- .../preferences/section-network/index.js | 8 +- .../preferences/section-never-saved/index.js | 4 +- .../section-notifications/index.js | 25 +- .../preferences/section-permissions/index.js | 4 +- .../section-popup-windows/index.js | 12 +- .../preferences/section-privacy/index.js | 14 +- .../preferences/section-reset/index.js | 8 +- .../section-saved-passwords/index.js | 9 +- .../preferences/section-search/index.js | 12 +- .../preferences/section-system/index.js | 18 +- .../list-item-default-browser.js | 9 +- .../list-item-default-calendar-app.js | 9 +- .../list-item-default-mail-client.js | 9 +- .../preferences/section-tabs/index.js | 10 +- .../preferences/section-telemetry/index.js | 12 +- .../preferences/section-theme/index.js | 18 +- .../preferences/section-throttling/index.js | 10 +- .../preferences/section-titlebar/index.js | 12 +- .../preferences/section-tray/index.js | 2 +- .../section-tray/list-item-tray.js | 10 +- .../preferences/section-view/index.js | 18 +- .../preferences/section-window/index.js | 12 +- .../section-window/list-item-shortcut.js | 20 +- .../preferences/section-workspaces/index.js | 24 +- .../shared/dialog-code-injection/index.js | 14 +- .../shared/dialog-custom-user-agent/index.js | 10 +- .../shared/dialog-external-urls/index.js | 16 +- .../shared/dialog-internal-urls/index.js | 16 +- src/components/shared/dialog-proxy/index.js | 36 +- .../shared/dialog-refresh-interval/index.js | 20 +- .../shared/list-item-auth-status/index.js | 8 +- .../shared/navigation-buttons/index.js | 21 +- .../shared/snackbar-trigger/index.js | 4 +- .../shared/snackbar-trigger/inner.js | 2 +- .../shared/windows-title-bar/index.js | 17 +- src/components/workspace-preferences/index.js | 44 +- .../section-audio-video/index.js | 10 +- .../section-auto-reload/index.js | 12 +- .../section-badge/index.js | 12 +- .../section-contents/index.js | 14 +- .../section-dark-reader/index.js | 22 +- .../section-developers/index.js | 16 +- .../section-downloads/index.js | 16 +- .../section-link-handling/index.js | 16 +- .../section-network/index.js | 8 +- .../section-notifications/index.js | 14 +- .../dialog-edit-workspace.js | 14 +- .../section-workspace/index.js | 10 +- .../section-workspace/list-item-color.js | 14 +- .../section-workspace/list-item-icon.js | 24 +- src/constants/theme-colors.js | 2 +- yarn.lock | 491 +++++++++++------- 111 files changed, 1182 insertions(+), 997 deletions(-) diff --git a/package.json b/package.json index 21ac22782..96bfcf251 100755 --- a/package.json +++ b/package.json @@ -42,23 +42,26 @@ "@babel/preset-env": "7.16.11", "@babel/preset-react": "7.16.7", "@cliqz/adblocker-electron": "1.23.6", - "@date-io/date-fns": "1.3.13", "@elastic/app-search-javascript": "8.1.0", "@elastic/react-search-ui": "1.10.0", "@elastic/react-search-ui-views": "1.10.0", "@elastic/search-ui-app-search-connector": "1.10.0", "@electron/get": "1.14.1", "@electron/remote": "2.0.8", + "@emotion/react": "11.8.2", + "@emotion/styled": "11.8.1", "@fontsource/roboto": "4.5.3", - "@material-ui/core": "4.12.3", - "@material-ui/icons": "4.11.2", - "@material-ui/lab": "4.0.0-alpha.60", - "@material-ui/pickers": "3.3.10", + "@mui/icons-material": "5.5.1", + "@mui/lab": "5.0.0-alpha.74", + "@mui/material": "5.5.2", + "@mui/styles": "5.5.1", "@sentry/electron": "3.0.4", + "@types/react": "17.0.41", + "@types/react-dom": "17.0.14", "ace-builds": "1.4.14", "amplitude-js": "8.17.0", "auto-launch": "5.0.5", - "babel-loader": "8.1.0", + "babel-loader": "8.2.4", "blueimp-md5": "2.19.0", "cheerio": "1.0.0-rc.10", "classnames": "2.3.1", @@ -102,13 +105,13 @@ "menubar": "9.1.1", "node-fetch": "2.6.7", "node-machine-id": "1.1.12", - "notistack": "1.0.10", + "notistack": "2.0.3", "prop-types": "15.8.1", "pupa": "2.1.1", - "react": "16.14.0", + "react": "17.0.2", "react-ace": "9.5.0", "react-app-rewired": "2.2.1", - "react-dom": "16.14.0", + "react-dom": "17.0.2", "react-redux": "7.2.6", "react-scripts": "5.0.0", "react-sortable-hoc": "2.0.0", diff --git a/src/components/add-workspace/app-card.js b/src/components/add-workspace/app-card.js index a5bde6a0f..a84d85fa6 100755 --- a/src/components/add-workspace/app-card.js +++ b/src/components/add-workspace/app-card.js @@ -2,15 +2,15 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; import React from 'react'; import { Menu, getCurrentWindow } from '@electron/remote'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; -import Paper from '@material-ui/core/Paper'; -import IconButton from '@material-ui/core/IconButton'; -import MoreVertIcon from '@material-ui/icons/MoreVert'; -import { makeStyles } from '@material-ui/core'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import Paper from '@mui/material/Paper'; +import IconButton from '@mui/material/IconButton'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; import { useDispatch } from 'react-redux'; @@ -22,8 +22,24 @@ import { requestCreateWorkspace, requestTrackAddWorkspace } from '../../senders' import { updateForm, updateMode } from '../../state/dialog-add-workspace/actions'; -const useStyles = makeStyles((theme) => ({ - card: { +const PREFIX = 'AppCard'; + +const classes = { + card: `${PREFIX}-card`, + appName: `${PREFIX}-appName`, + appUrl: `${PREFIX}-appUrl`, + paperIcon: `${PREFIX}-paperIcon`, + actionContainer: `${PREFIX}-actionContainer`, + actionButton: `${PREFIX}-actionButton`, + infoContainer: `${PREFIX}-infoContainer`, +}; + +const StyledPaper = styled(Paper)(( + { + theme, + }, +) => ({ + [`&.${classes.card}`]: { width: '100%', boxSizing: 'border-box', paddingLeft: theme.spacing(1), @@ -33,36 +49,42 @@ const useStyles = makeStyles((theme) => ({ alignItems: 'center', height: 52, marginTop: theme.spacing(1), - border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', + border: theme.palette.mode === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', }, - appName: { + + [`& .${classes.appName}`]: { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', fontWeight: 500, }, - appUrl: { + + [`& .${classes.appUrl}`]: { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }, - paperIcon: { + + [`& .${classes.paperIcon}`]: { width: 40, height: 40, borderRadius: 8, - border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', + border: theme.palette.mode === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', }, - actionContainer: { + + [`& .${classes.actionContainer}`]: { display: 'flex', flexDirection: 'row', alignItems: 'center', paddingLeft: theme.spacing(1), }, - actionButton: { + + [`& .${classes.actionButton}`]: { minWidth: 'auto', marginLeft: theme.spacing(1), }, - infoContainer: { + + [`& .${classes.infoContainer}`]: { display: 'flex', flexDirection: 'column', justifyContent: 'center', @@ -83,11 +105,10 @@ const AppCard = (props) => { url, } = props; - const classes = useStyles(); const dispatch = useDispatch(); return ( - + {name} { Add - + ); }; diff --git a/src/components/add-workspace/empty-state.js b/src/components/add-workspace/empty-state.js index a51b9b211..d4f12105a 100755 --- a/src/components/add-workspace/empty-state.js +++ b/src/components/add-workspace/empty-state.js @@ -4,8 +4,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core'; +import Typography from '@mui/material/Typography'; +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles(() => ({ root: { diff --git a/src/components/add-workspace/enhanced-dialog-title.js b/src/components/add-workspace/enhanced-dialog-title.js index 49d48f93e..6dbcaf26c 100644 --- a/src/components/add-workspace/enhanced-dialog-title.js +++ b/src/components/add-workspace/enhanced-dialog-title.js @@ -4,11 +4,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import MuiDialogTitle from '@material-ui/core/DialogTitle'; -import IconButton from '@material-ui/core/IconButton'; -import CloseIcon from '@material-ui/icons/Close'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core'; +import MuiDialogTitle from '@mui/material/DialogTitle'; +import IconButton from '@mui/material/IconButton'; +import CloseIcon from '@mui/icons-material/Close'; +import Typography from '@mui/material/Typography'; +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ root: { @@ -31,7 +31,12 @@ const EnhancedDialogTitle = ({ children, onClose }) => ( {children} {onClose ? ( - + ) : null} diff --git a/src/components/add-workspace/form.js b/src/components/add-workspace/form.js index 4336f21e3..ba5a402f2 100644 --- a/src/components/add-workspace/form.js +++ b/src/components/add-workspace/form.js @@ -6,19 +6,19 @@ import classnames from 'classnames'; import Color from 'color'; import { dialog, getCurrentWindow } from '@electron/remote'; -import Button from '@material-ui/core/Button'; -import TextField from '@material-ui/core/TextField'; -import Typography from '@material-ui/core/Typography'; -import FormGroup from '@material-ui/core/FormGroup'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Checkbox from '@material-ui/core/Checkbox'; -import Divider from '@material-ui/core/Divider'; -import Badge from '@material-ui/core/Badge'; -import { makeStyles } from '@material-ui/core'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; +import FormGroup from '@mui/material/FormGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import Divider from '@mui/material/Divider'; +import Badge from '@mui/material/Badge'; +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; -import CheckIcon from '@material-ui/icons/Check'; +import CheckIcon from '@mui/icons-material/Check'; import getAvatarText from '../../helpers/get-avatar-text'; import getMailtoUrl from '../../helpers/get-mailto-url'; @@ -105,7 +105,7 @@ const useStyles = makeStyles((theme) => ({ fontWeight: 400, textTransform: 'uppercase', userSelect: 'none', - boxShadow: theme.palette.type === 'dark' ? 'none' : '0 0 1px 1px rgba(0, 0, 0, 0.12)', + boxShadow: theme.palette.mode === 'dark' ? 'none' : '0 0 1px 1px rgba(0, 0, 0, 0.12)', overflow: 'hidden', cursor: 'pointer', }, @@ -133,8 +133,8 @@ const useStyles = makeStyles((theme) => ({ width: '100%', }, textAvatar: { - background: theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black, - color: theme.palette.getContrastText(theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black), + background: theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black, + color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black), }, buttonBot: { marginTop: theme.spacing(1), @@ -423,7 +423,12 @@ const AddWorkspaceCustom = () => { - diff --git a/src/components/add-workspace/home.js b/src/components/add-workspace/home.js index 2337bad9c..28dfdabb6 100644 --- a/src/components/add-workspace/home.js +++ b/src/components/add-workspace/home.js @@ -7,11 +7,11 @@ import AppSearchAPIConnector from '@elastic/search-ui-app-search-connector'; import { SearchProvider, WithSearch, Paging } from '@elastic/react-search-ui'; import '@elastic/react-search-ui-views/lib/styles/styles.css'; -import Grid from '@material-ui/core/Grid'; -import Typography from '@material-ui/core/Typography'; -import SearchIcon from '@material-ui/icons/Search'; -import CircularProgress from '@material-ui/core/CircularProgress'; -import { makeStyles } from '@material-ui/core'; +import Grid from '@mui/material/Grid'; +import Typography from '@mui/material/Typography'; +import SearchIcon from '@mui/icons-material/Search'; +import CircularProgress from '@mui/material/CircularProgress'; +import makeStyles from '@mui/styles/makeStyles'; import getStaticGlobal from '../../helpers/get-static-global'; import isMas from '../../helpers/is-mas'; @@ -218,7 +218,7 @@ const Home = () => { > Your query did not match any apps in our database. - + @@ -237,11 +237,11 @@ const Home = () => { icon={app.icon_filled.raw} icon128={app.icon_filled_128.raw} requireInstanceUrl={app.require_instance_url - && app.require_instance_url.raw === 1} + && app.require_instance_url.raw === 1} /> ))} - + diff --git a/src/components/add-workspace/index.js b/src/components/add-workspace/index.js index 78062c213..59399950a 100644 --- a/src/components/add-workspace/index.js +++ b/src/components/add-workspace/index.js @@ -5,14 +5,14 @@ import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import { makeStyles } from '@material-ui/core/styles'; -import BottomNavigation from '@material-ui/core/BottomNavigation'; -import BottomNavigationAction from '@material-ui/core/BottomNavigationAction'; -import Paper from '@material-ui/core/Paper'; +import makeStyles from '@mui/styles/makeStyles'; +import BottomNavigation from '@mui/material/BottomNavigation'; +import BottomNavigationAction from '@mui/material/BottomNavigationAction'; +import Paper from '@mui/material/Paper'; -import ViewListIcon from '@material-ui/icons/ViewList'; -import CreateIcon from '@material-ui/icons/Create'; -import MoreVertIcon from '@material-ui/icons/MoreVert'; +import ViewListIcon from '@mui/icons-material/ViewList'; +import CreateIcon from '@mui/icons-material/Create'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; import getWorkspaceFriendlyName from '../../helpers/get-workspace-friendly-name'; diff --git a/src/components/add-workspace/no-connection.js b/src/components/add-workspace/no-connection.js index f99e9f225..620a96470 100755 --- a/src/components/add-workspace/no-connection.js +++ b/src/components/add-workspace/no-connection.js @@ -4,10 +4,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Button from '@material-ui/core/Button'; -import ErrorIcon from '@material-ui/icons/Error'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core/styles'; +import Button from '@mui/material/Button'; +import ErrorIcon from '@mui/icons-material/Error'; +import Typography from '@mui/material/Typography'; +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles(() => ({ root: { diff --git a/src/components/add-workspace/search-box.js b/src/components/add-workspace/search-box.js index 9d11d95ea..bfb86dd84 100644 --- a/src/components/add-workspace/search-box.js +++ b/src/components/add-workspace/search-box.js @@ -9,14 +9,14 @@ import { SearchBox as AppSearchSearchBox, } from '@elastic/react-search-ui'; -import Tooltip from '@material-ui/core/Tooltip'; -import IconButton from '@material-ui/core/IconButton'; -import Paper from '@material-ui/core/Paper'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core'; +import Tooltip from '@mui/material/Tooltip'; +import IconButton from '@mui/material/IconButton'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; +import makeStyles from '@mui/styles/makeStyles'; -import CloseIcon from '@material-ui/icons/Close'; -import RefreshIcon from '@material-ui/icons/Refresh'; +import CloseIcon from '@mui/icons-material/Close'; +import RefreshIcon from '@mui/icons-material/Refresh'; const useStyles = makeStyles((theme) => ({ toolbarSearchContainer: { @@ -137,6 +137,7 @@ const SearchBox = () => { debounce: 0, shouldClearFilters: false, })} + size="large" > @@ -160,6 +161,7 @@ const SearchBox = () => { }); }} disabled={isLoading} + size="large" > diff --git a/src/components/add-workspace/submit-app-card.js b/src/components/add-workspace/submit-app-card.js index ff9357d9c..dd4404a15 100755 --- a/src/components/add-workspace/submit-app-card.js +++ b/src/components/add-workspace/submit-app-card.js @@ -3,11 +3,11 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import Grid from '@material-ui/core/Grid'; -import Typography from '@material-ui/core/Typography'; -import Paper from '@material-ui/core/Paper'; -import AddCircleIcon from '@material-ui/icons/AddCircle'; -import { makeStyles } from '@material-ui/core'; +import Grid from '@mui/material/Grid'; +import Typography from '@mui/material/Typography'; +import Paper from '@mui/material/Paper'; +import AddCircleIcon from '@mui/icons-material/AddCircle'; +import makeStyles from '@mui/styles/makeStyles'; import { requestOpenInBrowser } from '../../senders'; @@ -20,7 +20,7 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', cursor: 'pointer', color: theme.palette.text.primary, - border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', + border: theme.palette.mode === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', '&:hover, &:focus': { backgroundColor: theme.palette.action.selected, }, diff --git a/src/components/app-lock/index.js b/src/components/app-lock/index.js index 723d4819b..1ddb8e81e 100644 --- a/src/components/app-lock/index.js +++ b/src/components/app-lock/index.js @@ -4,20 +4,20 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ import React, { useState, useEffect } from 'react'; -import TextField from '@material-ui/core/TextField'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import IconButton from '@material-ui/core/IconButton'; -import Typography from '@material-ui/core/Typography'; -import Link from '@material-ui/core/Link'; -import Fab from '@material-ui/core/Fab'; -import Tooltip from '@material-ui/core/Tooltip'; -import Button from '@material-ui/core/Button'; +import TextField from '@mui/material/TextField'; +import InputAdornment from '@mui/material/InputAdornment'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import Link from '@mui/material/Link'; +import Fab from '@mui/material/Fab'; +import Tooltip from '@mui/material/Tooltip'; +import Button from '@mui/material/Button'; -import VisibilityIcon from '@material-ui/icons/Visibility'; -import VisibilityOffIcon from '@material-ui/icons/VisibilityOff'; -import LockIcon from '@material-ui/icons/Lock'; +import VisibilityIcon from '@mui/icons-material/Visibility'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; +import LockIcon from '@mui/icons-material/Lock'; -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; @@ -184,6 +184,7 @@ const AppLock = () => { aria-label={revealPassword ? 'Hide Password' : 'Reveal Password'} onClick={() => setRevealPassword(!revealPassword)} onMouseDown={() => setRevealPassword(!revealPassword)} + size="large" > {revealPassword ? : } diff --git a/src/components/app-wrapper.js b/src/components/app-wrapper.js index d1e903e08..95604dbfa 100644 --- a/src/components/app-wrapper.js +++ b/src/components/app-wrapper.js @@ -4,17 +4,20 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ThemeProvider as MuiThemeProvider, createTheme } from '@material-ui/core/styles'; -import blue from '@material-ui/core/colors/blue'; -import red from '@material-ui/core/colors/pink'; -import grey from '@material-ui/core/colors/grey'; +import { + ThemeProvider as MuiThemeProvider, + StyledEngineProvider, + createTheme, + adaptV4Theme, +} from '@mui/material/styles'; +// or @mui/lab/Adapter{Dayjs,Luxon,Moment} or any valid date-io adapter +import AdapterDateFns from '@mui/lab/AdapterDateFns'; +import LocalizationProvider from '@mui/lab/LocalizationProvider'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import { MuiPickersUtilsProvider } from '@material-ui/pickers'; +import CssBaseline from '@mui/material/CssBaseline'; import { useSelector } from 'react-redux'; -import DateFnsUtils from '@date-io/date-fns'; - +import { blue, pink as red, grey } from '@mui/material/colors'; import getStaticGlobal from '../helpers/get-static-global'; import WindowsTitleBar from './shared/windows-title-bar'; @@ -31,7 +34,7 @@ const AppWrapper = ({ children }) => { fontSize: 13.5, }, palette: { - type: shouldUseDarkColors ? 'dark' : 'light', + mode: shouldUseDarkColors ? 'dark' : 'light', primary: { light: blue[300], main: blue[600], @@ -51,28 +54,30 @@ const AppWrapper = ({ children }) => { }; } - const theme = createTheme(themeObj); + const theme = createTheme(adaptV4Theme(themeObj)); const showWindowsTitleBar = window.process.platform !== 'darwin' && !isFullScreen && !getStaticGlobal('useSystemTitleBar'); return ( - - - -
- {showWindowsTitleBar && } -
- {locked ? : children} + + + + +
+ {showWindowsTitleBar && } +
+ {locked ? : children} +
-
- - + + + ); }; diff --git a/src/components/auth/index.js b/src/components/auth/index.js index 2e706c4e1..6d6133e5a 100644 --- a/src/components/auth/index.js +++ b/src/components/auth/index.js @@ -4,9 +4,9 @@ import React from 'react'; import { getCurrentWindow } from '@electron/remote'; -import Button from '@material-ui/core/Button'; -import TextField from '@material-ui/core/TextField'; -import { makeStyles } from '@material-ui/core'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; diff --git a/src/components/display-media/index.js b/src/components/display-media/index.js index 1c58a7583..941809d20 100644 --- a/src/components/display-media/index.js +++ b/src/components/display-media/index.js @@ -4,13 +4,13 @@ import React, { useEffect, useState } from 'react'; import { ipcRenderer } from 'electron'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import ListSubheader from '@material-ui/core/ListSubheader'; -import Divider from '@material-ui/core/Divider'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import ListSubheader from '@mui/material/ListSubheader'; +import Divider from '@mui/material/Divider'; +import Typography from '@mui/material/Typography'; +import makeStyles from '@mui/styles/makeStyles'; import { getDesktopCapturerSourcesAsync } from '../../invokers'; diff --git a/src/components/go-to-url/index.js b/src/components/go-to-url/index.js index 7b206bb85..8274b267e 100644 --- a/src/components/go-to-url/index.js +++ b/src/components/go-to-url/index.js @@ -6,9 +6,9 @@ import { getCurrentWindow } from '@electron/remote'; import { useDispatch, useSelector } from 'react-redux'; -import Button from '@material-ui/core/Button'; -import TextField from '@material-ui/core/TextField'; -import { makeStyles } from '@material-ui/core'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import makeStyles from '@mui/styles/makeStyles'; import { updateForm, go } from '../../state/dialog-go-to-url/actions'; diff --git a/src/components/license-registration/index.js b/src/components/license-registration/index.js index 73b99e201..6687e71a4 100644 --- a/src/components/license-registration/index.js +++ b/src/components/license-registration/index.js @@ -4,12 +4,14 @@ import React from 'react'; import { getCurrentWindow } from '@electron/remote'; -import Button from '@material-ui/core/Button'; -import TextField from '@material-ui/core/TextField'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogActions from '@material-ui/core/DialogActions'; -import { makeStyles, Typography } from '@material-ui/core'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogActions from '@mui/material/DialogActions'; +import { Typography } from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; diff --git a/src/components/main/draggable-region.js b/src/components/main/draggable-region.js index c2d065e59..c4bc81287 100644 --- a/src/components/main/draggable-region.js +++ b/src/components/main/draggable-region.js @@ -5,7 +5,7 @@ import React from 'react'; import classnames from 'classnames'; -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; const useStyles = makeStyles(() => ({ diff --git a/src/components/main/find-in-page.js b/src/components/main/find-in-page.js index 80a7c7358..4c48d15a5 100644 --- a/src/components/main/find-in-page.js +++ b/src/components/main/find-in-page.js @@ -4,10 +4,10 @@ import React, { useCallback, useEffect, useRef } from 'react'; import { ipcRenderer } from 'electron'; -import Button from '@material-ui/core/Button'; -import TextField from '@material-ui/core/TextField'; -import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/core'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; diff --git a/src/components/main/index.js b/src/components/main/index.js index d29702e99..c001b3504 100644 --- a/src/components/main/index.js +++ b/src/components/main/index.js @@ -4,12 +4,12 @@ import React from 'react'; import classnames from 'classnames'; -import { makeStyles } from '@material-ui/core/styles'; +import makeStyles from '@mui/styles/makeStyles'; import 'simplebar/dist/simplebar.min.css'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import { useSelector } from 'react-redux'; @@ -79,7 +79,7 @@ const useStyles = makeStyles((theme) => ({ width: 150, position: 'absolute', top: window.process.platform === 'darwin' ? 50 : 60, - backgroundImage: `url('${theme.palette.type === 'dark' ? arrowWhite : arrowBlack}')`, + backgroundImage: `url('${theme.palette.mode === 'dark' ? arrowWhite : arrowBlack}')`, backgroundSize: '150px 202px', }, arrowWithNavBar: { @@ -104,22 +104,22 @@ const useStyles = makeStyles((theme) => ({ display: 'inline-block', height: 36, width: 36, - background: theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black, + background: theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black, borderRadius: 4, - color: theme.palette.getContrastText(theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black), + color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black), lineHeight: '36px', textAlign: 'center', fontWeight: 400, textTransform: 'uppercase', marginLeft: theme.spacing(1), marginRight: theme.spacing(1), - border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', + border: theme.palette.mode === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', fontSize: '24px', }, inlineBlock: { display: 'inline-block', fontSize: '18px', - color: theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black, + color: theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black, whiteSpace: 'nowrap', }, tip: { diff --git a/src/components/main/mac-title-bar.js b/src/components/main/mac-title-bar.js index 1283862f8..e79a5e2ed 100644 --- a/src/components/main/mac-title-bar.js +++ b/src/components/main/mac-title-bar.js @@ -6,8 +6,9 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import { systemPreferences, getCurrentWindow } from '@electron/remote'; -import { makeStyles } from '@material-ui/core/styles'; -import { alpha } from '@material-ui/core/styles/colorManipulator'; +import { alpha } from '@mui/material/styles'; + +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; @@ -34,7 +35,7 @@ const useStyles = makeStyles((theme) => { if (props.themeColor != null) { return themeColors[props.themeColor][900]; } - return theme.palette.type === 'dark' ? '#2a2b2c' : '#efefef'; + return theme.palette.mode === 'dark' ? '#2a2b2c' : '#efefef'; }, borderBottom: '1px solid', borderBottomColor: theme.palette.divider, @@ -48,7 +49,7 @@ const useStyles = makeStyles((theme) => { if (props.themeColor != null) { return alpha(theme.palette.getContrastText(themeColors[props.themeColor][900]), 0.7); } - return theme.palette.type === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'rgb(77, 77, 77)'; + return theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'rgb(77, 77, 77)'; }, fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', fontWeight: 500, diff --git a/src/components/main/navigation-bar.js b/src/components/main/navigation-bar.js index a9cbb1186..2ef345076 100644 --- a/src/components/main/navigation-bar.js +++ b/src/components/main/navigation-bar.js @@ -6,19 +6,20 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { ipcRenderer } from 'electron'; -import { makeStyles } from '@material-ui/core/styles'; -import { alpha } from '@material-ui/core/styles/colorManipulator'; +import { alpha } from '@mui/material/styles'; -import SvgIcon from '@material-ui/core/SvgIcon'; -import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; -import IconButton from '@material-ui/core/IconButton'; -import InputBase from '@material-ui/core/InputBase'; +import makeStyles from '@mui/styles/makeStyles'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import NotificationsPausedIcon from '@material-ui/icons/NotificationsPaused'; -import SettingsIcon from '@material-ui/icons/SettingsSharp'; -import VolumeUpIcon from '@material-ui/icons/VolumeUp'; -import VolumeOffIcon from '@material-ui/icons/VolumeOff'; +import SvgIcon from '@mui/material/SvgIcon'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import IconButton from '@mui/material/IconButton'; +import InputBase from '@mui/material/InputBase'; + +import NotificationsIcon from '@mui/icons-material/Notifications'; +import NotificationsPausedIcon from '@mui/icons-material/NotificationsPaused'; +import SettingsIcon from '@mui/icons-material/SettingsSharp'; +import VolumeUpIcon from '@mui/icons-material/VolumeUp'; +import VolumeOffIcon from '@mui/icons-material/VolumeOff'; import { useDispatch, useSelector } from 'react-redux'; @@ -105,7 +106,7 @@ const useStyles = makeStyles((theme) => ({ if (props.themeColor != null) { return themeColors[props.themeColor][900]; } - return theme.palette.type === 'dark' ? theme.palette.background.default : theme.palette.grey[200]; + return theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.grey[200]; }, color: (props) => { if (props.themeColor != null) { @@ -231,6 +232,7 @@ const NavigationBar = ({ dispatch(updateAddressBarInfo(processedUrl, false)); requestLoadUrl(processedUrl); }} + size="large" > @@ -300,6 +302,7 @@ const NavigationBar = ({ root: classes.iconButton, disabled: classes.iconButtonDisabled, }} + size="large" > {shouldPauseNotifications ? @@ -313,6 +316,7 @@ const NavigationBar = ({ root: classes.iconButton, disabled: classes.iconButtonDisabled, }} + size="large" > {muteApp ? @@ -332,6 +336,7 @@ const NavigationBar = ({ requestShowPreferencesWindow(); } }} + size="large" > diff --git a/src/components/main/rating-button.js b/src/components/main/rating-button.js index 2096e06ec..ca30c227d 100644 --- a/src/components/main/rating-button.js +++ b/src/components/main/rating-button.js @@ -5,9 +5,9 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { dialog, getCurrentWindow } from '@electron/remote'; -import IconButton from '@material-ui/core/IconButton'; +import IconButton from '@mui/material/IconButton'; -import ThumbsUpIcon from '@material-ui/icons/ThumbUp'; +import ThumbsUpIcon from '@mui/icons-material/ThumbUp'; import { useSelector } from 'react-redux'; diff --git a/src/components/main/sidebar.js b/src/components/main/sidebar.js index 62f960aee..6a3212bca 100644 --- a/src/components/main/sidebar.js +++ b/src/components/main/sidebar.js @@ -6,21 +6,22 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { Menu, getCurrentWindow } from '@electron/remote'; -import { makeStyles } from '@material-ui/core/styles'; -import { alpha } from '@material-ui/core/styles/colorManipulator'; +import { alpha } from '@mui/material/styles'; + +import makeStyles from '@mui/styles/makeStyles'; import SimpleBar from 'simplebar-react'; import 'simplebar/dist/simplebar.min.css'; -import IconButton from '@material-ui/core/IconButton'; -import SvgIcon from '@material-ui/core/SvgIcon'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import IconButton from '@mui/material/IconButton'; +import SvgIcon from '@mui/material/SvgIcon'; +import CircularProgress from '@mui/material/CircularProgress'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import NotificationsPausedIcon from '@material-ui/icons/NotificationsPaused'; -import SettingsIcon from '@material-ui/icons/Settings'; -import VolumeUpIcon from '@material-ui/icons/VolumeUp'; -import VolumeOffIcon from '@material-ui/icons/VolumeOff'; +import NotificationsIcon from '@mui/icons-material/Notifications'; +import NotificationsPausedIcon from '@mui/icons-material/NotificationsPaused'; +import SettingsIcon from '@mui/icons-material/Settings'; +import VolumeUpIcon from '@mui/icons-material/VolumeUp'; +import VolumeOffIcon from '@mui/icons-material/VolumeOff'; import { useSelector } from 'react-redux'; @@ -170,7 +171,7 @@ const useStyles = makeStyles((theme) => { if (props.themeColor != null) { return alpha(theme.palette.getContrastText(themeColors[props.themeColor][900]), 0.7); } - return theme.palette.type === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'rgb(77, 77, 77)'; + return theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.7)' : 'rgb(77, 77, 77)'; }, }, }; diff --git a/src/components/main/tab-bar/index.js b/src/components/main/tab-bar/index.js index c19a4018c..c8e02b5c4 100644 --- a/src/components/main/tab-bar/index.js +++ b/src/components/main/tab-bar/index.js @@ -4,9 +4,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { IconButton, makeStyles } from '@material-ui/core'; +import { IconButton } from '@mui/material'; -import AddIcon from '@material-ui/icons/Add'; +import makeStyles from '@mui/styles/makeStyles'; + +import AddIcon from '@mui/icons-material/Add'; import { useSelector } from 'react-redux'; @@ -27,7 +29,7 @@ const useStyles = makeStyles((theme) => ({ if (props.themeColor != null) { return themeColors[props.themeColor][900]; } - return theme.palette.type === 'dark' ? theme.palette.background.default : theme.palette.grey[200]; + return theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.grey[200]; }, WebkitUserSelect: 'none', WebkitAppRegion: 'drag', @@ -91,6 +93,7 @@ const TabBar = ({ themeColor }) => { requestAddWorkspaceTab(activeWorkspaceId)} className={classes.iconButton} + size="large" > diff --git a/src/components/main/tab-bar/tab.js b/src/components/main/tab-bar/tab.js index 172f74615..735a7c9b7 100644 --- a/src/components/main/tab-bar/tab.js +++ b/src/components/main/tab-bar/tab.js @@ -5,9 +5,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { IconButton, makeStyles } from '@material-ui/core'; +import { IconButton } from '@mui/material'; -import CloseIcon from '@material-ui/icons/Close'; +import makeStyles from '@mui/styles/makeStyles'; + +import CloseIcon from '@mui/icons-material/Close'; import themeColors from '../../../constants/theme-colors'; diff --git a/src/components/main/workspace-selector.js b/src/components/main/workspace-selector.js index 61612c2d0..312c237ba 100644 --- a/src/components/main/workspace-selector.js +++ b/src/components/main/workspace-selector.js @@ -6,14 +6,14 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import Color from 'color'; -import { makeStyles } from '@material-ui/core/styles'; +import makeStyles from '@mui/styles/makeStyles'; -import Badge from '@material-ui/core/Badge'; -import Avatar from '@material-ui/core/Avatar'; -import SvgIcon from '@material-ui/core/SvgIcon'; +import Badge from '@mui/material/Badge'; +import Avatar from '@mui/material/Avatar'; +import SvgIcon from '@mui/material/SvgIcon'; -import NotificationsOffIcon from '@material-ui/icons/NotificationsOff'; -import VolumeOffIcon from '@material-ui/icons/VolumeOff'; +import NotificationsOffIcon from '@mui/icons-material/NotificationsOff'; +import VolumeOffIcon from '@mui/icons-material/VolumeOff'; import { useSelector } from 'react-redux'; @@ -75,7 +75,7 @@ const useStyles = makeStyles((theme) => ({ if (props.themeColor != null) { return theme.palette.getContrastText(themeColors[props.themeColor][800]); } - if (theme.palette.type === 'dark') { + if (theme.palette.mode === 'dark') { return theme.palette.common.white; } return theme.palette.common.black; @@ -100,7 +100,7 @@ const useStyles = makeStyles((theme) => ({ fontWeight: 400, textTransform: 'uppercase', border: (props) => { - if (props.themeColor != null || theme.palette.type === 'dark') { + if (props.themeColor != null || theme.palette.mode === 'dark') { return 'none'; } return '1px solid rgba(0, 0, 0, 0.12)'; @@ -117,7 +117,7 @@ const useStyles = makeStyles((theme) => ({ if (props.themeColor != null) { return theme.palette.getContrastText(themeColors[props.themeColor][800]); } - return theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black; + return theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black; }, color: (props) => { if (props.themeColor != null) { @@ -125,7 +125,7 @@ const useStyles = makeStyles((theme) => ({ theme.palette.getContrastText(themeColors[props.themeColor][800]), ); } - return theme.palette.type === 'dark' ? theme.palette.common.black : theme.palette.common.white; + return theme.palette.mode === 'dark' ? theme.palette.common.black : theme.palette.common.white; }, }, transparentAvatar: { @@ -326,7 +326,7 @@ const WorkspaceSelector = ({ badgeContent={(() => { if (hibernated) { return ( - + @@ -336,7 +336,7 @@ const WorkspaceSelector = ({ if (disableAudio || disableNotifications) { return ( - + {disableNotifications && ( )} diff --git a/src/components/notifications/index.js b/src/components/notifications/index.js index f36af5d13..7c29e3d96 100644 --- a/src/components/notifications/index.js +++ b/src/components/notifications/index.js @@ -4,18 +4,17 @@ import React from 'react'; import { Menu, getCurrentWindow } from '@electron/remote'; -import ListSubheader from '@material-ui/core/ListSubheader'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import Divider from '@material-ui/core/Divider'; -import { makeStyles } from '@material-ui/core'; +import ListSubheader from '@mui/material/ListSubheader'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import Divider from '@mui/material/Divider'; +import DateTimePicker from '@mui/lab/DateTimePicker'; +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; - -import { DateTimePicker } from '@material-ui/pickers'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import { format, isTomorrow, isToday, @@ -221,15 +220,28 @@ const DialogPauseNotifications = () => { - - { - requestShowPreferencesWindow('notifications'); - getCurrentWindow().close(); - }} - /> - + dispatch(updateShowDateTimePicker(true))} + onClose={() => dispatch(updateShowDateTimePicker(false))} + disablePast + showTodayButton + // eslint-disable-next-line react/jsx-props-no-spreading + renderInput={() => ( + + { + requestShowPreferencesWindow('notifications'); + getCurrentWindow().close(); + }} + /> + + )} + /> ); }; @@ -237,17 +249,6 @@ const DialogPauseNotifications = () => { return ( <> {renderList()} - dispatch(updateShowDateTimePicker(true))} - onClose={() => dispatch(updateShowDateTimePicker(false))} - className={classes.hidden} - disablePast - showTodayButton - /> ); }; diff --git a/src/components/open-url-with/index.js b/src/components/open-url-with/index.js index 1505ab4ae..3709d103c 100644 --- a/src/components/open-url-with/index.js +++ b/src/components/open-url-with/index.js @@ -4,18 +4,18 @@ import React, { useState } from 'react'; import { getCurrentWindow } from '@electron/remote'; -import { makeStyles } from '@material-ui/core/styles'; +import makeStyles from '@mui/styles/makeStyles'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import Divider from '@material-ui/core/Divider'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Checkbox from '@material-ui/core/Checkbox'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import Divider from '@mui/material/Divider'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; import { useSelector } from 'react-redux'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import getWorkspacesAsList from '../../helpers/get-workspaces-as-list'; import getMailtoUrl from '../../helpers/get-mailto-url'; diff --git a/src/components/preferences/index.js b/src/components/preferences/index.js index cbb6ddc8f..fa0705abe 100644 --- a/src/components/preferences/index.js +++ b/src/components/preferences/index.js @@ -3,37 +3,37 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React, { useState } from 'react'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import Typography from '@material-ui/core/Typography'; -import Paper from '@material-ui/core/Paper'; -import SvgIcon from '@material-ui/core/SvgIcon'; -import Alert from '@material-ui/lab/Alert'; -import AlertTitle from '@material-ui/lab/AlertTitle'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import Typography from '@mui/material/Typography'; +import Paper from '@mui/material/Paper'; +import SvgIcon from '@mui/material/SvgIcon'; +import Alert from '@mui/material/Alert'; +import AlertTitle from '@mui/material/AlertTitle'; -import AssessmentIcon from '@material-ui/icons/Assessment'; -import AssignmentIcon from '@material-ui/icons/Assignment'; -import CachedIcon from '@material-ui/icons/Cached'; -import CheckCircleIcon from '@material-ui/icons/CheckCircle'; -import CodeIcon from '@material-ui/icons/Code'; -import InfoIcon from '@material-ui/icons/Info'; -import LinkIcon from '@material-ui/icons/Link'; -import LocationOnIcon from '@material-ui/icons/LocationOn'; -import LockIcon from '@material-ui/icons/Lock'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import PaletteIcon from '@material-ui/icons/Palette'; -import PermCameraMicIcon from '@material-ui/icons/PermCameraMic'; -import RotateLeftIcon from '@material-ui/icons/RotateLeft'; -import RouterIcon from '@material-ui/icons/Router'; -import SaveAltIcon from '@material-ui/icons/SaveAlt'; -import SecurityIcon from '@material-ui/icons/Security'; -import ViewListIcon from '@material-ui/icons/ViewList'; -import WebAssetIcon from '@material-ui/icons/WebAsset'; -import WidgetsIcon from '@material-ui/icons/Widgets'; +import AssessmentIcon from '@mui/icons-material/Assessment'; +import AssignmentIcon from '@mui/icons-material/Assignment'; +import CachedIcon from '@mui/icons-material/Cached'; +import CheckCircleIcon from '@mui/icons-material/CheckCircle'; +import CodeIcon from '@mui/icons-material/Code'; +import InfoIcon from '@mui/icons-material/Info'; +import LinkIcon from '@mui/icons-material/Link'; +import LocationOnIcon from '@mui/icons-material/LocationOn'; +import LockIcon from '@mui/icons-material/Lock'; +import NotificationsIcon from '@mui/icons-material/Notifications'; +import PaletteIcon from '@mui/icons-material/Palette'; +import PermCameraMicIcon from '@mui/icons-material/PermCameraMic'; +import RotateLeftIcon from '@mui/icons-material/RotateLeft'; +import RouterIcon from '@mui/icons-material/Router'; +import SaveAltIcon from '@mui/icons-material/SaveAlt'; +import SecurityIcon from '@mui/icons-material/Security'; +import ViewListIcon from '@mui/icons-material/ViewList'; +import WebAssetIcon from '@mui/icons-material/WebAsset'; +import WidgetsIcon from '@mui/icons-material/Widgets'; -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; import isMas from '../../helpers/is-mas'; import isAppx from '../../helpers/is-appx'; @@ -98,7 +98,7 @@ const useStyles = makeStyles((theme) => ({ paper: { marginTop: theme.spacing(0.5), marginBottom: theme.spacing(3), - border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', + border: theme.palette.mode === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', }, sidebar: { width: 220, diff --git a/src/components/preferences/section-about/dialog-open-source-notices.js b/src/components/preferences/section-about/dialog-open-source-notices.js index 449902829..08d2602a6 100644 --- a/src/components/preferences/section-about/dialog-open-source-notices.js +++ b/src/components/preferences/section-about/dialog-open-source-notices.js @@ -4,10 +4,10 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import makeStyles from '@mui/styles/makeStyles'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; const useStyles = makeStyles((theme) => ({ dialogContent: { diff --git a/src/components/preferences/section-about/index.js b/src/components/preferences/section-about/index.js index 97fe0b613..6582347a5 100644 --- a/src/components/preferences/section-about/index.js +++ b/src/components/preferences/section-about/index.js @@ -3,12 +3,12 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React, { useState } from 'react'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import isAppx from '../../../helpers/is-appx'; import isMas from '../../../helpers/is-mas'; diff --git a/src/components/preferences/section-about/list-item-about.js b/src/components/preferences/section-about/list-item-about.js index 3e5450876..837fe3516 100644 --- a/src/components/preferences/section-about/list-item-about.js +++ b/src/components/preferences/section-about/list-item-about.js @@ -5,11 +5,11 @@ import React from 'react'; import { app } from '@electron/remote'; -import ListItem from '@material-ui/core/ListItem'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Link from '@material-ui/core/Link'; -import { makeStyles } from '@material-ui/core'; +import ListItem from '@mui/material/ListItem'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Link from '@mui/material/Link'; +import makeStyles from '@mui/styles/makeStyles'; import getStaticGlobal from '../../../helpers/get-static-global'; import isStandalone from '../../../helpers/is-standalone'; diff --git a/src/components/preferences/section-about/list-item-updates.js b/src/components/preferences/section-about/list-item-updates.js index 18e972793..26291b8e0 100644 --- a/src/components/preferences/section-about/list-item-updates.js +++ b/src/components/preferences/section-about/list-item-updates.js @@ -3,13 +3,13 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; -import Divider from '@material-ui/core/Divider'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; +import Divider from '@mui/material/Divider'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-account-licensing/index.js b/src/components/preferences/section-account-licensing/index.js index 51a20a75d..764684a6a 100644 --- a/src/components/preferences/section-account-licensing/index.js +++ b/src/components/preferences/section-account-licensing/index.js @@ -3,12 +3,12 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React, { useState, useEffect } from 'react'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-app-lock/dialog-app-lock.js b/src/components/preferences/section-app-lock/dialog-app-lock.js index 8054c7956..ea042040d 100644 --- a/src/components/preferences/section-app-lock/dialog-app-lock.js +++ b/src/components/preferences/section-app-lock/dialog-app-lock.js @@ -5,23 +5,23 @@ import React, { useState } from 'react'; import { systemPreferences } from '@electron/remote'; -import Button from '@material-ui/core/Button'; -import TextField from '@material-ui/core/TextField'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogActions from '@material-ui/core/DialogActions'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import IconButton from '@material-ui/core/IconButton'; -import Typography from '@material-ui/core/Typography'; -import Link from '@material-ui/core/Link'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Switch from '@material-ui/core/Switch'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogActions from '@mui/material/DialogActions'; +import InputAdornment from '@mui/material/InputAdornment'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import Link from '@mui/material/Link'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Switch from '@mui/material/Switch'; -import VisibilityIcon from '@material-ui/icons/Visibility'; -import VisibilityOffIcon from '@material-ui/icons/VisibilityOff'; +import VisibilityIcon from '@mui/icons-material/Visibility'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; @@ -139,6 +139,7 @@ const DialogAppLock = () => { aria-label={revealPassword ? 'Hide Password' : 'Reveal Password'} onClick={() => setRevealPassword(!revealPassword)} onMouseDown={() => setRevealPassword(!revealPassword)} + size="large" > {revealPassword ? : } @@ -172,6 +173,7 @@ const DialogAppLock = () => { aria-label={revealPassword ? 'Hide Password' : 'Reveal Password'} onClick={() => setRevealPassword(!revealPassword)} onMouseDown={() => setRevealPassword(!revealPassword)} + size="large" > {revealPassword ? : } diff --git a/src/components/preferences/section-app-lock/index.js b/src/components/preferences/section-app-lock/index.js index ce6f0f82a..fc40e18b9 100644 --- a/src/components/preferences/section-app-lock/index.js +++ b/src/components/preferences/section-app-lock/index.js @@ -4,19 +4,19 @@ import React, { useEffect, useState } from 'react'; import { systemPreferences } from '@electron/remote'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import Divider from '@material-ui/core/Divider'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import Switch from '@material-ui/core/Switch'; -import { makeStyles } from '@material-ui/core'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import Divider from '@mui/material/Divider'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import Switch from '@mui/material/Switch'; +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import checkLicense from '../../../helpers/check-license'; import getWorkspaceFriendlyName from '../../../helpers/get-workspace-friendly-name'; diff --git a/src/components/preferences/section-auto-reload/index.js b/src/components/preferences/section-auto-reload/index.js index 4c5cb50b3..4b20651cb 100644 --- a/src/components/preferences/section-auto-reload/index.js +++ b/src/components/preferences/section-auto-reload/index.js @@ -4,15 +4,15 @@ import React from 'react'; import classnames from 'classnames'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import Switch from '@material-ui/core/Switch'; -import { makeStyles } from '@material-ui/core'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import Switch from '@mui/material/Switch'; +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-autofill/index.js b/src/components/preferences/section-autofill/index.js index d0f279864..9b29c2207 100644 --- a/src/components/preferences/section-autofill/index.js +++ b/src/components/preferences/section-autofill/index.js @@ -9,7 +9,7 @@ import { ListItemSecondaryAction, ListItemText, Switch, -} from '@material-ui/core'; +} from '@mui/material'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-badge/index.js b/src/components/preferences/section-badge/index.js index 03babb2b4..f26167a8f 100644 --- a/src/components/preferences/section-badge/index.js +++ b/src/components/preferences/section-badge/index.js @@ -3,11 +3,11 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-contents/index.js b/src/components/preferences/section-contents/index.js index f1146b0d7..b1bb9712c 100644 --- a/src/components/preferences/section-contents/index.js +++ b/src/components/preferences/section-contents/index.js @@ -3,13 +3,13 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; -import Divider from '@material-ui/core/Divider'; -import { makeStyles } from '@material-ui/core'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; +import Divider from '@mui/material/Divider'; +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-dark-reader/index.js b/src/components/preferences/section-dark-reader/index.js index 050f308a2..39fc11d75 100644 --- a/src/components/preferences/section-dark-reader/index.js +++ b/src/components/preferences/section-dark-reader/index.js @@ -3,17 +3,17 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import Grid from '@material-ui/core/Grid'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Slider from '@material-ui/core/Slider'; -import Switch from '@material-ui/core/Switch'; -import Typography from '@material-ui/core/Typography'; -import Divider from '@material-ui/core/Divider'; +import Grid from '@mui/material/Grid'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Slider from '@mui/material/Slider'; +import Switch from '@mui/material/Switch'; +import Typography from '@mui/material/Typography'; +import Divider from '@mui/material/Divider'; -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; @@ -30,7 +30,7 @@ const useStyles = makeStyles((theme) => ({ paddingRight: theme.spacing(5), }, sliderTitleContainer: { - paddingTop: `${theme.spacing(1.5)}px !important`, + paddingTop: `${theme.spacing(1.5)} !important`, width: 100, }, sliderMarkLabel: { diff --git a/src/components/preferences/section-developers/index.js b/src/components/preferences/section-developers/index.js index 3b2be774f..7db6967f8 100644 --- a/src/components/preferences/section-developers/index.js +++ b/src/components/preferences/section-developers/index.js @@ -3,14 +3,14 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import Switch from '@material-ui/core/Switch'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import Switch from '@mui/material/Switch'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import { useDispatch, useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-downloads/index.js b/src/components/preferences/section-downloads/index.js index b4657e367..f5a8642c6 100644 --- a/src/components/preferences/section-downloads/index.js +++ b/src/components/preferences/section-downloads/index.js @@ -4,14 +4,14 @@ import React from 'react'; import { dialog, getCurrentWindow } from '@electron/remote'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-exit/index.js b/src/components/preferences/section-exit/index.js index d7d7e426b..ac16caf2a 100644 --- a/src/components/preferences/section-exit/index.js +++ b/src/components/preferences/section-exit/index.js @@ -3,11 +3,11 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-extensions/index.js b/src/components/preferences/section-extensions/index.js index 7b1db8565..761d5db04 100644 --- a/src/components/preferences/section-extensions/index.js +++ b/src/components/preferences/section-extensions/index.js @@ -3,7 +3,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import List from '@material-ui/core/List'; +import List from '@mui/material/List'; import ListItemExtensions from './list-item-extensions'; diff --git a/src/components/preferences/section-extensions/list-item-extensions.js b/src/components/preferences/section-extensions/list-item-extensions.js index b8e16f794..0f0b7b000 100644 --- a/src/components/preferences/section-extensions/list-item-extensions.js +++ b/src/components/preferences/section-extensions/list-item-extensions.js @@ -5,21 +5,21 @@ import React, { useState, useEffect, useMemo } from 'react'; import { uniqBy } from 'lodash'; import { app } from '@electron/remote'; -import Button from '@material-ui/core/Button'; - -import ListItem from '@material-ui/core/ListItem'; -import List from '@material-ui/core/List'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import ListItemAvatar from '@material-ui/core/ListItemAvatar'; -import Switch from '@material-ui/core/Switch'; -import Avatar from '@material-ui/core/Avatar'; -import InputLabel from '@material-ui/core/InputLabel'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import MenuItem from '@material-ui/core/MenuItem'; -import { makeStyles } from '@material-ui/core'; +import Button from '@mui/material/Button'; + +import ListItem from '@mui/material/ListItem'; +import List from '@mui/material/List'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import ListItemAvatar from '@mui/material/ListItemAvatar'; +import Switch from '@mui/material/Switch'; +import Avatar from '@mui/material/Avatar'; +import InputLabel from '@mui/material/InputLabel'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import MenuItem from '@mui/material/MenuItem'; +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-fonts/dialog-customize-fonts.js b/src/components/preferences/section-fonts/dialog-customize-fonts.js index f220bebc2..17c1420c6 100644 --- a/src/components/preferences/section-fonts/dialog-customize-fonts.js +++ b/src/components/preferences/section-fonts/dialog-customize-fonts.js @@ -4,16 +4,16 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; -import Button from '@material-ui/core/Button'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import Slider from '@material-ui/core/Slider'; +import Button from '@mui/material/Button'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import Slider from '@mui/material/Slider'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogActions from '@material-ui/core/DialogActions'; -import { makeStyles } from '@material-ui/core'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogActions from '@mui/material/DialogActions'; +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-fonts/index.js b/src/components/preferences/section-fonts/index.js index f7747f09d..1a57a9977 100644 --- a/src/components/preferences/section-fonts/index.js +++ b/src/components/preferences/section-fonts/index.js @@ -4,18 +4,18 @@ import React from 'react'; import classnames from 'classnames'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import Divider from '@material-ui/core/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import Divider from '@mui/material/Divider'; -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import { enqueueRequestRestartSnackbar, diff --git a/src/components/preferences/section-hardware/index.js b/src/components/preferences/section-hardware/index.js index ea855749a..ef4b79cc9 100644 --- a/src/components/preferences/section-hardware/index.js +++ b/src/components/preferences/section-hardware/index.js @@ -3,12 +3,12 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-hibernation/index.js b/src/components/preferences/section-hibernation/index.js index a388629f1..21e05b48a 100644 --- a/src/components/preferences/section-hibernation/index.js +++ b/src/components/preferences/section-hibernation/index.js @@ -3,16 +3,16 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import Divider from '@material-ui/core/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import Divider from '@mui/material/Divider'; -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-home/index.js b/src/components/preferences/section-home/index.js index 97ab738c8..fd572ea9b 100644 --- a/src/components/preferences/section-home/index.js +++ b/src/components/preferences/section-home/index.js @@ -4,11 +4,11 @@ import React from 'react'; import { dialog, getCurrentWindow } from '@electron/remote'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import getStaticGlobal from '../../../helpers/get-static-global'; import getUtmSource from '../../../helpers/get-utm-source'; diff --git a/src/components/preferences/section-labs/index.js b/src/components/preferences/section-labs/index.js index 05599527f..ab4b994f9 100644 --- a/src/components/preferences/section-labs/index.js +++ b/src/components/preferences/section-labs/index.js @@ -3,11 +3,11 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-language/dialog-spellcheck-languages.js b/src/components/preferences/section-language/dialog-spellcheck-languages.js index d240bf641..7cd88ce48 100644 --- a/src/components/preferences/section-language/dialog-spellcheck-languages.js +++ b/src/components/preferences/section-language/dialog-spellcheck-languages.js @@ -3,16 +3,16 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import Button from '@material-ui/core/Button'; -import Checkbox from '@material-ui/core/Checkbox'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogActions from '@material-ui/core/DialogActions'; -import { makeStyles } from '@material-ui/core'; +import Button from '@mui/material/Button'; +import Checkbox from '@mui/material/Checkbox'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogActions from '@mui/material/DialogActions'; +import makeStyles from '@mui/styles/makeStyles'; import { useDispatch, useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-language/index.js b/src/components/preferences/section-language/index.js index 13fe87fe5..6234eb36e 100644 --- a/src/components/preferences/section-language/index.js +++ b/src/components/preferences/section-language/index.js @@ -3,16 +3,16 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; import { useDispatch, useSelector } from 'react-redux'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import { enqueueRequestRestartSnackbar, diff --git a/src/components/preferences/section-link-handling/index.js b/src/components/preferences/section-link-handling/index.js index d20dab04f..1f642a663 100644 --- a/src/components/preferences/section-link-handling/index.js +++ b/src/components/preferences/section-link-handling/index.js @@ -3,14 +3,14 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; -import Divider from '@material-ui/core/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; +import Divider from '@mui/material/Divider'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import { useDispatch, useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-link-handling/list-item-open-protocol-url.js b/src/components/preferences/section-link-handling/list-item-open-protocol-url.js index e14d7b44c..b91f2129f 100644 --- a/src/components/preferences/section-link-handling/list-item-open-protocol-url.js +++ b/src/components/preferences/section-link-handling/list-item-open-protocol-url.js @@ -3,11 +3,11 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import { makeStyles } from '@material-ui/core'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-location-permissions/index.js b/src/components/preferences/section-location-permissions/index.js index cfa6d1838..1145e20d1 100644 --- a/src/components/preferences/section-location-permissions/index.js +++ b/src/components/preferences/section-location-permissions/index.js @@ -3,7 +3,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import List from '@material-ui/core/List'; +import List from '@mui/material/List'; import ListItemAuthStatus from '../../shared/list-item-auth-status'; diff --git a/src/components/preferences/section-mode/index.js b/src/components/preferences/section-mode/index.js index 2b08a9f85..bc626d127 100644 --- a/src/components/preferences/section-mode/index.js +++ b/src/components/preferences/section-mode/index.js @@ -3,12 +3,12 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import Grid from '@material-ui/core/Grid'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import Typography from '@material-ui/core/Typography'; -import Radio from '@material-ui/core/Radio'; -import { makeStyles } from '@material-ui/core'; +import Grid from '@mui/material/Grid'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import Typography from '@mui/material/Typography'; +import Radio from '@mui/material/Radio'; +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-more-apps/index.js b/src/components/preferences/section-more-apps/index.js index 983a6cccc..d18261efc 100644 --- a/src/components/preferences/section-more-apps/index.js +++ b/src/components/preferences/section-more-apps/index.js @@ -3,14 +3,14 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import Typography from '@material-ui/core/Typography'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import Typography from '@mui/material/Typography'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; -import { makeStyles } from '@material-ui/core'; +import makeStyles from '@mui/styles/makeStyles'; import isAppx from '../../../helpers/is-appx'; import isMas from '../../../helpers/is-mas'; diff --git a/src/components/preferences/section-network/index.js b/src/components/preferences/section-network/index.js index 852995ef9..03002ae37 100644 --- a/src/components/preferences/section-network/index.js +++ b/src/components/preferences/section-network/index.js @@ -3,13 +3,13 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; import { useDispatch, useSelector } from 'react-redux'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import { open as openDialogProxy } from '../../../state/dialog-proxy/actions'; diff --git a/src/components/preferences/section-never-saved/index.js b/src/components/preferences/section-never-saved/index.js index 7053dd721..eb942f8c7 100644 --- a/src/components/preferences/section-never-saved/index.js +++ b/src/components/preferences/section-never-saved/index.js @@ -15,9 +15,9 @@ import { TableCell, TableRow, Tooltip, -} from '@material-ui/core'; +} from '@mui/material'; -import ClearIcon from '@material-ui/icons/Clear'; +import ClearIcon from '@mui/icons-material/Clear'; import { requestSetPreference } from '../../../senders'; diff --git a/src/components/preferences/section-notifications/index.js b/src/components/preferences/section-notifications/index.js index 8e2e67a6f..0cfeb7998 100644 --- a/src/components/preferences/section-notifications/index.js +++ b/src/components/preferences/section-notifications/index.js @@ -4,19 +4,20 @@ import React from 'react'; import semver from 'semver'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; -import { makeStyles } from '@material-ui/core'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; +import TextField from '@mui/material/TextField'; +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; -import { TimePicker } from '@material-ui/pickers'; +import { TimePicker } from '@mui/lab'; import getStaticGlobal from '../../../helpers/get-static-global'; import getUtmSource from '../../../helpers/get-utm-source'; @@ -33,7 +34,7 @@ const useStyles = makeStyles((theme) => ({ paper: { marginTop: theme.spacing(0.5), marginBottom: theme.spacing(3), - border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', + border: theme.palette.mode === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)', }, timePickerContainer: { marginTop: theme.spacing(1), @@ -92,6 +93,8 @@ const SectionNotifications = () => { onClose={() => { window.preventClosingWindow = false; }} onOpen={() => { window.preventClosingWindow = true; }} disabled={!pauseNotificationsBySchedule} + // eslint-disable-next-line react/jsx-props-no-spreading + renderInput={(params) => } /> { onClose={() => { window.preventClosingWindow = false; }} onOpen={() => { window.preventClosingWindow = true; }} disabled={!pauseNotificationsBySchedule} + // eslint-disable-next-line react/jsx-props-no-spreading + renderInput={(params) => } />
( diff --git a/src/components/preferences/section-permissions/index.js b/src/components/preferences/section-permissions/index.js index 7b3d8413d..40a376669 100644 --- a/src/components/preferences/section-permissions/index.js +++ b/src/components/preferences/section-permissions/index.js @@ -3,8 +3,8 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import List from '@material-ui/core/List'; -import Divider from '@material-ui/core/Divider'; +import List from '@mui/material/List'; +import Divider from '@mui/material/Divider'; import ListItemAuthStatus from '../../shared/list-item-auth-status'; diff --git a/src/components/preferences/section-popup-windows/index.js b/src/components/preferences/section-popup-windows/index.js index 32eac349d..beb31df9f 100644 --- a/src/components/preferences/section-popup-windows/index.js +++ b/src/components/preferences/section-popup-windows/index.js @@ -3,12 +3,12 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; import { useSelector } from 'react-redux'; import { diff --git a/src/components/preferences/section-privacy/index.js b/src/components/preferences/section-privacy/index.js index 3bea01deb..f197a72a6 100644 --- a/src/components/preferences/section-privacy/index.js +++ b/src/components/preferences/section-privacy/index.js @@ -3,16 +3,16 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import Switch from '@material-ui/core/Switch'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import Switch from '@mui/material/Switch'; import { useSelector } from 'react-redux'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import getStaticGlobal from '../../../helpers/get-static-global'; diff --git a/src/components/preferences/section-reset/index.js b/src/components/preferences/section-reset/index.js index 5b80083c3..0c4b55fa7 100644 --- a/src/components/preferences/section-reset/index.js +++ b/src/components/preferences/section-reset/index.js @@ -5,11 +5,11 @@ import React from 'react'; import { dialog, getCurrentWindow } from '@electron/remote'; import { ipcRenderer } from 'electron'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import getWorkspaceFriendlyName from '../../../helpers/get-workspace-friendly-name'; diff --git a/src/components/preferences/section-saved-passwords/index.js b/src/components/preferences/section-saved-passwords/index.js index 594859ff1..38301f765 100644 --- a/src/components/preferences/section-saved-passwords/index.js +++ b/src/components/preferences/section-saved-passwords/index.js @@ -19,11 +19,11 @@ import { TableRow, TextField, Tooltip, -} from '@material-ui/core'; +} from '@mui/material'; -import ClearIcon from '@material-ui/icons/Clear'; -import VisibilityIcon from '@material-ui/icons/Visibility'; -import VisibilityOffIcon from '@material-ui/icons/VisibilityOff'; +import ClearIcon from '@mui/icons-material/Clear'; +import VisibilityIcon from '@mui/icons-material/Visibility'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; import getKeytarVaultName from '../../../helpers/get-keytar-vault-name'; import { @@ -115,6 +115,7 @@ const SectionSavedPassword = () => { }); }} edge="end" + size="large" > {revealPasswords[key] ? : } diff --git a/src/components/preferences/section-search/index.js b/src/components/preferences/section-search/index.js index d0e55b517..6e233abb9 100644 --- a/src/components/preferences/section-search/index.js +++ b/src/components/preferences/section-search/index.js @@ -3,12 +3,12 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import React from 'react'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import { makeStyles } from '@material-ui/core'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-system/index.js b/src/components/preferences/section-system/index.js index 8d377afed..65be17a32 100644 --- a/src/components/preferences/section-system/index.js +++ b/src/components/preferences/section-system/index.js @@ -4,15 +4,15 @@ import React from 'react'; import classnames from 'classnames'; -import Divider from '@material-ui/core/Divider'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; -import ListItemText from '@material-ui/core/ListItemText'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import Switch from '@material-ui/core/Switch'; -import { makeStyles } from '@material-ui/core'; +import Divider from '@mui/material/Divider'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import ListItemText from '@mui/material/ListItemText'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import Switch from '@mui/material/Switch'; +import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; diff --git a/src/components/preferences/section-system/list-item-default-browser.js b/src/components/preferences/section-system/list-item-default-browser.js index 710f6d932..bdd5f031f 100644 --- a/src/components/preferences/section-system/list-item-default-browser.js +++ b/src/components/preferences/section-system/list-item-default-browser.js @@ -4,11 +4,11 @@ import React, { useState, useEffect, useCallback } from 'react'; import { app } from '@electron/remote'; -import Button from '@material-ui/core/Button'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemText from '@material-ui/core/ListItemText'; +import Button from '@mui/material/Button'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import getStaticGlobal from '../../../helpers/get-static-global'; import isWindows10 from '../../../helpers/is-windows-10'; @@ -72,7 +72,6 @@ const ListItemDefaultBrowser = () => {