From d625a003b80510785a76550da22e40a125c8bfd0 Mon Sep 17 00:00:00 2001
From: nimbleghost <132819643+nimbleghost@users.noreply.github.com>
Date: Wed, 24 May 2023 12:25:20 +0200
Subject: [PATCH] Use esm mui imports for Vite compatibility

See: https://github.com/mui/material-ui/issues/31835#issuecomment-1153393901
---
 web/src/components/Account.jsx            | 24 ++++++++--------
 web/src/components/ActionBar.jsx          | 10 +------
 web/src/components/App.jsx                |  5 +---
 web/src/components/AttachmentIcon.jsx     |  2 +-
 web/src/components/AvatarBox.jsx          |  3 +-
 web/src/components/DialogFooter.jsx       |  4 +--
 web/src/components/EmojiPicker.jsx        |  7 +----
 web/src/components/ErrorBoundary.jsx      |  3 +-
 web/src/components/Login.jsx              |  7 +----
 web/src/components/Messaging.jsx          |  5 +---
 web/src/components/Navigation.jsx         | 33 +++++++++++++--------
 web/src/components/Notifications.jsx      | 25 +++++++++++-----
 web/src/components/Preferences.jsx        | 22 +++++++-------
 web/src/components/PublishDialog.jsx      | 30 ++++++++++++-------
 web/src/components/ReserveDialogs.jsx     | 25 +++++++++-------
 web/src/components/ReserveIcons.jsx       |  2 +-
 web/src/components/ReserveTopicSelect.jsx |  5 +---
 web/src/components/Signup.jsx             |  7 +----
 web/src/components/SubscribeDialog.jsx    | 20 ++++++++-----
 web/src/components/SubscriptionPopup.jsx  | 24 ++++++++++------
 web/src/components/UpgradeDialog.jsx      | 35 ++++++++++++++---------
 web/src/components/styles.js              |  4 +--
 22 files changed, 160 insertions(+), 142 deletions(-)

diff --git a/web/src/components/Account.jsx b/web/src/components/Account.jsx
index 535ccbc..1901edf 100644
--- a/web/src/components/Account.jsx
+++ b/web/src/components/Account.jsx
@@ -21,28 +21,28 @@ import {
   TableHead,
   TableRow,
   useMediaQuery,
+  Tooltip,
+  Typography,
+  Container,
+  Card,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  IconButton,
+  MenuItem,
+  DialogContentText,
 } from "@mui/material";
-import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
 import EditIcon from "@mui/icons-material/Edit";
-import Container from "@mui/material/Container";
-import Card from "@mui/material/Card";
-import Button from "@mui/material/Button";
 import { Trans, useTranslation } from "react-i18next";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import TextField from "@mui/material/TextField";
-import IconButton from "@mui/material/IconButton";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import i18n from "i18next";
 import humanizeDuration from "humanize-duration";
 import CelebrationIcon from "@mui/icons-material/Celebration";
 import CloseIcon from "@mui/icons-material/Close";
 import { ContentCopy, Public } from "@mui/icons-material";
-import MenuItem from "@mui/material/MenuItem";
-import DialogContentText from "@mui/material/DialogContentText";
 import AddIcon from "@mui/icons-material/Add";
 import routes from "./routes";
 import { formatBytes, formatShortDate, formatShortDateTime, openUrl } from "../app/utils";
diff --git a/web/src/components/ActionBar.jsx b/web/src/components/ActionBar.jsx
index c9853df..798efb4 100644
--- a/web/src/components/ActionBar.jsx
+++ b/web/src/components/ActionBar.jsx
@@ -1,22 +1,14 @@
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import IconButton from "@mui/material/IconButton";
+import { AppBar, Toolbar, IconButton, Typography, Box, MenuItem, Button, Divider, ListItemIcon } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
-import Typography from "@mui/material/Typography";
 import * as React from "react";
 import { useState } from "react";
-import Box from "@mui/material/Box";
 import { useLocation, useNavigate } from "react-router-dom";
-import MenuItem from "@mui/material/MenuItem";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import NotificationsOffIcon from "@mui/icons-material/NotificationsOff";
 import { useTranslation } from "react-i18next";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
 import { Logout, Person, Settings } from "@mui/icons-material";
-import ListItemIcon from "@mui/material/ListItemIcon";
 import session from "../app/Session";
 import logo from "../img/ntfy.svg";
 import subscriptionManager from "../app/SubscriptionManager";
diff --git a/web/src/components/App.jsx b/web/src/components/App.jsx
index 607d125..ef6596b 100644
--- a/web/src/components/App.jsx
+++ b/web/src/components/App.jsx
@@ -1,12 +1,9 @@
 import * as React from "react";
 import { createContext, Suspense, useContext, useEffect, useState, useMemo } from "react";
-import Box from "@mui/material/Box";
+import { Box, Toolbar, CssBaseline, Backdrop, CircularProgress } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
-import Toolbar from "@mui/material/Toolbar";
 import { useLiveQuery } from "dexie-react-hooks";
 import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom";
-import { Backdrop, CircularProgress } from "@mui/material";
 import { AllSubscriptions, SingleSubscription } from "./Notifications";
 import theme from "./theme";
 import Navigation from "./Navigation";
diff --git a/web/src/components/AttachmentIcon.jsx b/web/src/components/AttachmentIcon.jsx
index 4d4e428..9a2581e 100644
--- a/web/src/components/AttachmentIcon.jsx
+++ b/web/src/components/AttachmentIcon.jsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import Box from "@mui/material/Box";
+import { Box } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import fileDocument from "../img/file-document.svg";
 import fileImage from "../img/file-image.svg";
diff --git a/web/src/components/AvatarBox.jsx b/web/src/components/AvatarBox.jsx
index 470fcae..1037868 100644
--- a/web/src/components/AvatarBox.jsx
+++ b/web/src/components/AvatarBox.jsx
@@ -1,6 +1,5 @@
 import * as React from "react";
-import { Avatar } from "@mui/material";
-import Box from "@mui/material/Box";
+import { Avatar, Box } from "@mui/material";
 import logo from "../img/ntfy-filled.svg";
 
 const AvatarBox = (props) => (
diff --git a/web/src/components/DialogFooter.jsx b/web/src/components/DialogFooter.jsx
index 2ddd7fb..bcaf4cf 100644
--- a/web/src/components/DialogFooter.jsx
+++ b/web/src/components/DialogFooter.jsx
@@ -1,7 +1,5 @@
 import * as React from "react";
-import Box from "@mui/material/Box";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogActions from "@mui/material/DialogActions";
+import { Box, DialogContentText, DialogActions } from "@mui/material";
 
 const DialogFooter = (props) => (
   <Box
diff --git a/web/src/components/EmojiPicker.jsx b/web/src/components/EmojiPicker.jsx
index da8d436..7dead7f 100644
--- a/web/src/components/EmojiPicker.jsx
+++ b/web/src/components/EmojiPicker.jsx
@@ -1,12 +1,7 @@
 import * as React from "react";
 import { useRef, useState } from "react";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import TextField from "@mui/material/TextField";
-import { ClickAwayListener, Fade, InputAdornment, styled } from "@mui/material";
-import IconButton from "@mui/material/IconButton";
+import { Typography, Box, TextField, ClickAwayListener, Fade, InputAdornment, styled, IconButton, Popper } from "@mui/material";
 import { Close } from "@mui/icons-material";
-import Popper from "@mui/material/Popper";
 import { useTranslation } from "react-i18next";
 import { splitNoEmpty } from "../app/utils";
 import { rawEmojis } from "../app/emojis";
diff --git a/web/src/components/ErrorBoundary.jsx b/web/src/components/ErrorBoundary.jsx
index ef5d918..44f7616 100644
--- a/web/src/components/ErrorBoundary.jsx
+++ b/web/src/components/ErrorBoundary.jsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import StackTrace from "stacktrace-js";
-import { CircularProgress, Link } from "@mui/material";
-import Button from "@mui/material/Button";
+import { CircularProgress, Link, Button } from "@mui/material";
 import { Trans, withTranslation } from "react-i18next";
 
 class ErrorBoundaryImpl extends React.Component {
diff --git a/web/src/components/Login.jsx b/web/src/components/Login.jsx
index 57cf16e..489eee0 100644
--- a/web/src/components/Login.jsx
+++ b/web/src/components/Login.jsx
@@ -1,14 +1,9 @@
 import * as React from "react";
 import { useState } from "react";
-import Typography from "@mui/material/Typography";
+import { Typography, TextField, Button, Box, IconButton, InputAdornment } from "@mui/material";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
 import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import IconButton from "@mui/material/IconButton";
-import { InputAdornment } from "@mui/material";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
 import accountApi from "../app/AccountApi";
 import AvatarBox from "./AvatarBox";
diff --git a/web/src/components/Messaging.jsx b/web/src/components/Messaging.jsx
index cf91bbb..27e08dc 100644
--- a/web/src/components/Messaging.jsx
+++ b/web/src/components/Messaging.jsx
@@ -1,11 +1,8 @@
 import * as React from "react";
 import { useState } from "react";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import TextField from "@mui/material/TextField";
+import { Paper, IconButton, TextField, Portal, Snackbar } from "@mui/material";
 import SendIcon from "@mui/icons-material/Send";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import { Portal, Snackbar } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import PublishDialog from "./PublishDialog";
 import api from "../app/Api";
diff --git a/web/src/components/Navigation.jsx b/web/src/components/Navigation.jsx
index 6047c1c..8cbefec 100644
--- a/web/src/components/Navigation.jsx
+++ b/web/src/components/Navigation.jsx
@@ -1,26 +1,35 @@
-import Drawer from "@mui/material/Drawer";
+import {
+  Drawer,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+  Divider,
+  List,
+  Alert,
+  AlertTitle,
+  Badge,
+  CircularProgress,
+  Link,
+  ListSubheader,
+  Portal,
+  Tooltip,
+  Button,
+  Typography,
+  Box,
+  IconButton,
+} from "@mui/material";
 import * as React from "react";
 import { useContext, useState } from "react";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
 import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
 import Person from "@mui/icons-material/Person";
-import ListItemText from "@mui/material/ListItemText";
-import Toolbar from "@mui/material/Toolbar";
-import Divider from "@mui/material/Divider";
-import List from "@mui/material/List";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AddIcon from "@mui/icons-material/Add";
-import { Alert, AlertTitle, Badge, CircularProgress, Link, ListSubheader, Portal, Tooltip } from "@mui/material";
-import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
 import { useLocation, useNavigate } from "react-router-dom";
 import { ChatBubble, MoreVert, NotificationsOffOutlined, Send } from "@mui/icons-material";
-import Box from "@mui/material/Box";
 import ArticleIcon from "@mui/icons-material/Article";
 import { Trans, useTranslation } from "react-i18next";
 import CelebrationIcon from "@mui/icons-material/Celebration";
-import IconButton from "@mui/material/IconButton";
 import SubscribeDialog from "./SubscribeDialog";
 import { openUrl, topicDisplayName, topicUrl } from "../app/utils";
 import routes from "./routes";
diff --git a/web/src/components/Notifications.jsx b/web/src/components/Notifications.jsx
index fd246c4..7d4da06 100644
--- a/web/src/components/Notifications.jsx
+++ b/web/src/components/Notifications.jsx
@@ -1,15 +1,26 @@
-import Container from "@mui/material/Container";
-import { ButtonBase, CardActions, CardContent, CircularProgress, Fade, Link, Modal, Snackbar, Stack, Tooltip } from "@mui/material";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
+import {
+  Container,
+  ButtonBase,
+  CardActions,
+  CardContent,
+  CircularProgress,
+  Fade,
+  Link,
+  Modal,
+  Snackbar,
+  Stack,
+  Tooltip,
+  Card,
+  Typography,
+  IconButton,
+  Box,
+  Button,
+} from "@mui/material";
 import * as React from "react";
 import { useEffect, useState } from "react";
-import IconButton from "@mui/material/IconButton";
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import { useLiveQuery } from "dexie-react-hooks";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { Trans, useTranslation } from "react-i18next";
 import { useOutletContext } from "react-router-dom";
diff --git a/web/src/components/Preferences.jsx b/web/src/components/Preferences.jsx
index cdd8ed5..4afc0f8 100644
--- a/web/src/components/Preferences.jsx
+++ b/web/src/components/Preferences.jsx
@@ -15,22 +15,22 @@ import {
   TableRow,
   Tooltip,
   useMediaQuery,
+  Typography,
+  IconButton,
+  Container,
+  TextField,
+  MenuItem,
+  Card,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
 } from "@mui/material";
-import Typography from "@mui/material/Typography";
 import EditIcon from "@mui/icons-material/Edit";
 import CloseIcon from "@mui/icons-material/Close";
-import IconButton from "@mui/material/IconButton";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
-import Container from "@mui/material/Container";
-import TextField from "@mui/material/TextField";
-import MenuItem from "@mui/material/MenuItem";
-import Card from "@mui/material/Card";
-import Button from "@mui/material/Button";
 import { useLiveQuery } from "dexie-react-hooks";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import DialogActions from "@mui/material/DialogActions";
 import { useTranslation } from "react-i18next";
 import { Info } from "@mui/icons-material";
 import { useOutletContext } from "react-router-dom";
diff --git a/web/src/components/PublishDialog.jsx b/web/src/components/PublishDialog.jsx
index 6a89aef..4800286 100644
--- a/web/src/components/PublishDialog.jsx
+++ b/web/src/components/PublishDialog.jsx
@@ -1,17 +1,27 @@
 import * as React from "react";
 import { useContext, useEffect, useRef, useState } from "react";
-import { Checkbox, Chip, FormControl, FormControlLabel, InputLabel, Link, Select, Tooltip, useMediaQuery } from "@mui/material";
-import TextField from "@mui/material/TextField";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
+import {
+  Checkbox,
+  Chip,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  Link,
+  Select,
+  Tooltip,
+  useMediaQuery,
+  TextField,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  Button,
+  Typography,
+  IconButton,
+  MenuItem,
+  Box,
+} from "@mui/material";
 import InsertEmoticonIcon from "@mui/icons-material/InsertEmoticon";
 import { Close } from "@mui/icons-material";
-import MenuItem from "@mui/material/MenuItem";
-import Box from "@mui/material/Box";
 import { Trans, useTranslation } from "react-i18next";
 import priority1 from "../img/priority-1.svg";
 import priority2 from "../img/priority-2.svg";
diff --git a/web/src/components/ReserveDialogs.jsx b/web/src/components/ReserveDialogs.jsx
index a4264cc..3dc370e 100644
--- a/web/src/components/ReserveDialogs.jsx
+++ b/web/src/components/ReserveDialogs.jsx
@@ -1,16 +1,21 @@
 import * as React from "react";
 import { useState } from "react";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import { Alert, FormControl, Select, useMediaQuery } from "@mui/material";
+import {
+  Button,
+  TextField,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Alert,
+  FormControl,
+  Select,
+  useMediaQuery,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
 import { useTranslation } from "react-i18next";
-import MenuItem from "@mui/material/MenuItem";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
 import { Check, DeleteForever } from "@mui/icons-material";
 import theme from "./theme";
 import { validTopic } from "../app/utils";
diff --git a/web/src/components/ReserveIcons.jsx b/web/src/components/ReserveIcons.jsx
index f9787f7..95f6f47 100644
--- a/web/src/components/ReserveIcons.jsx
+++ b/web/src/components/ReserveIcons.jsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Lock, Public } from "@mui/icons-material";
-import Box from "@mui/material/Box";
+import { Box } from "@mui/material";
 
 export const PermissionReadWrite = React.forwardRef((props, ref) => <PermissionInternal icon={Public} ref={ref} {...props} />);
 
diff --git a/web/src/components/ReserveTopicSelect.jsx b/web/src/components/ReserveTopicSelect.jsx
index 83ac069..39ae5df 100644
--- a/web/src/components/ReserveTopicSelect.jsx
+++ b/web/src/components/ReserveTopicSelect.jsx
@@ -1,9 +1,6 @@
 import * as React from "react";
-import { FormControl, Select } from "@mui/material";
+import { FormControl, Select, MenuItem, ListItemIcon, ListItemText } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import MenuItem from "@mui/material/MenuItem";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
 import { PermissionDenyAll, PermissionRead, PermissionReadWrite, PermissionWrite } from "./ReserveIcons";
 import { Permission } from "../app/AccountApi";
 
diff --git a/web/src/components/Signup.jsx b/web/src/components/Signup.jsx
index 116ebe7..3b82cd6 100644
--- a/web/src/components/Signup.jsx
+++ b/web/src/components/Signup.jsx
@@ -1,14 +1,9 @@
 import * as React from "react";
 import { useState } from "react";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
+import { TextField, Button, Box, Typography, InputAdornment, IconButton } from "@mui/material";
 import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import { InputAdornment } from "@mui/material";
-import IconButton from "@mui/material/IconButton";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
 import accountApi from "../app/AccountApi";
 import AvatarBox from "./AvatarBox";
diff --git a/web/src/components/SubscribeDialog.jsx b/web/src/components/SubscribeDialog.jsx
index aae48e5..0f1cec1 100644
--- a/web/src/components/SubscribeDialog.jsx
+++ b/web/src/components/SubscribeDialog.jsx
@@ -1,12 +1,18 @@
 import * as React from "react";
 import { useContext, useState } from "react";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import { Autocomplete, Checkbox, FormControlLabel, FormGroup, useMediaQuery } from "@mui/material";
+import {
+  Button,
+  TextField,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Autocomplete,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  useMediaQuery,
+} from "@mui/material";
 import { useTranslation } from "react-i18next";
 import theme from "./theme";
 import api from "../app/Api";
diff --git a/web/src/components/SubscriptionPopup.jsx b/web/src/components/SubscriptionPopup.jsx
index 7e747e4..01d8af4 100644
--- a/web/src/components/SubscriptionPopup.jsx
+++ b/web/src/components/SubscriptionPopup.jsx
@@ -1,16 +1,22 @@
 import * as React from "react";
 import { useContext, useState } from "react";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import { Chip, InputAdornment, Portal, Snackbar, useMediaQuery } from "@mui/material";
+import {
+  Button,
+  TextField,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Chip,
+  InputAdornment,
+  Portal,
+  Snackbar,
+  useMediaQuery,
+  MenuItem,
+  IconButton,
+} from "@mui/material";
 import { useTranslation } from "react-i18next";
-import MenuItem from "@mui/material/MenuItem";
 import { useNavigate } from "react-router-dom";
-import IconButton from "@mui/material/IconButton";
 import { Clear } from "@mui/icons-material";
 import theme from "./theme";
 import subscriptionManager from "../app/SubscriptionManager";
diff --git a/web/src/components/UpgradeDialog.jsx b/web/src/components/UpgradeDialog.jsx
index c3def5b..a554f1f 100644
--- a/web/src/components/UpgradeDialog.jsx
+++ b/web/src/components/UpgradeDialog.jsx
@@ -1,21 +1,30 @@
 import * as React from "react";
 import { useContext, useEffect, useState } from "react";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import { Alert, CardActionArea, CardContent, Chip, Link, ListItem, Switch, useMediaQuery } from "@mui/material";
-import Button from "@mui/material/Button";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Alert,
+  CardActionArea,
+  CardContent,
+  Chip,
+  Link,
+  ListItem,
+  Switch,
+  useMediaQuery,
+  Button,
+  Card,
+  Typography,
+  List,
+  ListItemIcon,
+  ListItemText,
+  Box,
+  DialogContentText,
+  DialogActions,
+} from "@mui/material";
 import { Trans, useTranslation } from "react-i18next";
-import List from "@mui/material/List";
 import { Check, Close } from "@mui/icons-material";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import Box from "@mui/material/Box";
 import { NavLink } from "react-router-dom";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogActions from "@mui/material/DialogActions";
 import { UnauthorizedError } from "../app/errors";
 import { formatBytes, formatNumber, formatPrice, formatShortDate } from "../app/utils";
 import { AccountContext } from "./App";
diff --git a/web/src/components/styles.js b/web/src/components/styles.js
index 3ebc9a9..edcfb46 100644
--- a/web/src/components/styles.js
+++ b/web/src/components/styles.js
@@ -1,6 +1,4 @@
-import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
-import { Backdrop, styled } from "@mui/material";
+import { Typography, Container, Backdrop, styled } from "@mui/material";
 import theme from "./theme";
 
 export const Paragraph = styled(Typography)({