- {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]
?