From f8276f756b6f43cad8d52fee1ef5af5d14de09f3 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Mon, 25 Mar 2024 02:08:05 +0200 Subject: [PATCH] Update Material-UI icons to MUI icons --- .../src/components/layout/ProfileButton.js | 8 +++--- frontend/src/components/layout/Sidebar.js | 16 +++++------ frontend/src/components/layout/TopBar.js | 2 +- frontend/src/features/about/AboutContainer.js | 22 +++++---------- .../about/releaseNotes/ReleaseNotesList.js | 23 ++++------------ .../about/system/AboutSystemComponent.js | 10 +++---- .../about/system/SystemVersionComponent.js | 13 +++------ .../machines/components/MachineAccordion.js | 27 ++++--------------- .../machines/components/ViewModeSelection.js | 17 +++--------- .../features/settings/SettingsContainer.js | 18 ++++--------- .../src/features/system/SystemContainer.js | 16 +++-------- .../user/profile/contact/ContactOptions.js | 20 +++++++------- 12 files changed, 59 insertions(+), 133 deletions(-) diff --git a/frontend/src/components/layout/ProfileButton.js b/frontend/src/components/layout/ProfileButton.js index 0061f34..17b39f8 100644 --- a/frontend/src/components/layout/ProfileButton.js +++ b/frontend/src/components/layout/ProfileButton.js @@ -1,9 +1,9 @@ import React, { useState } from "react"; import { IconButton, Menu, MenuItem, Typography, ListItemIcon } from "@material-ui/core"; -import AccountCircle from "@material-ui/icons/AccountCircle"; -import ExitToAppIcon from "@material-ui/icons/ExitToApp"; -import AccountBoxIcon from "@material-ui/icons/AccountBox"; -import SettingsIcon from "@material-ui/icons/Settings"; +import AccountCircle from "@mui/icons-material/AccountCircle"; +import ExitToAppIcon from "@mui/icons-material/ExitToApp"; +import AccountBoxIcon from "@mui/icons-material/AccountBox"; +import SettingsIcon from "@mui/icons-material/Settings"; import { useNavigate } from "react-router-dom"; import { useTuitioClient } from "@flare/tuitio-client-react"; import { useToast } from "../../hooks"; diff --git a/frontend/src/components/layout/Sidebar.js b/frontend/src/components/layout/Sidebar.js index ed1889c..78ba6a4 100644 --- a/frontend/src/components/layout/Sidebar.js +++ b/frontend/src/components/layout/Sidebar.js @@ -3,15 +3,15 @@ import PropTypes from "prop-types"; import clsx from "clsx"; import { makeStyles, useTheme } from "@material-ui/core/styles"; import { Drawer, List, Divider, IconButton, ListItemIcon, ListItemText } from "@material-ui/core"; -import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; -import ChevronRightIcon from "@material-ui/icons/ChevronRight"; +import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; +import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import ListItem from "@material-ui/core/ListItem"; -import BuildIcon from "@material-ui/icons/Build"; -import DnsIcon from "@material-ui/icons/Dns"; -import DeviceHubIcon from "@material-ui/icons/DeviceHub"; -import SettingsIcon from "@material-ui/icons/Settings"; -import DashboardIcon from "@material-ui/icons/Dashboard"; -import FeaturedPlayListIcon from "@material-ui/icons/FeaturedPlayList"; +import BuildIcon from "@mui/icons-material/Build"; +import DnsIcon from "@mui/icons-material/Dns"; +import DeviceHubIcon from "@mui/icons-material/DeviceHub"; +import SettingsIcon from "@mui/icons-material/Settings"; +import DashboardIcon from "@mui/icons-material/Dashboard"; +import FeaturedPlayListIcon from "@mui/icons-material/FeaturedPlayList"; import { useNavigate } from "react-router-dom"; import { useTranslation } from "react-i18next"; import styles from "./styles"; diff --git a/frontend/src/components/layout/TopBar.js b/frontend/src/components/layout/TopBar.js index b065e81..6247989 100644 --- a/frontend/src/components/layout/TopBar.js +++ b/frontend/src/components/layout/TopBar.js @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import clsx from "clsx"; import { makeStyles } from "@material-ui/core/styles"; import { AppBar, Toolbar, Typography, IconButton } from "@material-ui/core"; -import MenuIcon from "@material-ui/icons/Menu"; +import MenuIcon from "@mui/icons-material/Menu"; import ProfileButton from "./ProfileButton"; import LightDarkToggle from "./LightDarkToggle"; import SensitiveInfoToggle from "./SensitiveInfoToggle"; diff --git a/frontend/src/features/about/AboutContainer.js b/frontend/src/features/about/AboutContainer.js index a5b8ed9..b778c99 100644 --- a/frontend/src/features/about/AboutContainer.js +++ b/frontend/src/features/about/AboutContainer.js @@ -1,8 +1,8 @@ import React, { useState, useMemo } from "react"; import PageTitle from "../../components/common/PageTitle"; -import BubbleChartIcon from "@material-ui/icons/BubbleChart"; -import NotesIcon from "@material-ui/icons/Notes"; -import TimelineIcon from "@material-ui/icons/Timeline"; +import BubbleChartIcon from "@mui/icons-material/BubbleChart"; +import NotesIcon from "@mui/icons-material/Notes"; +import TimelineIcon from "@mui/icons-material/Timeline"; import { useTranslation } from "react-i18next"; import AboutSystemContainer from "./system/AboutSystemContainer"; import ReleaseNotesContainer from "./releaseNotes/ReleaseNotesContainer"; @@ -33,24 +33,14 @@ const AboutContainer = () => { const [tab, setTab] = useState(NavigationTabs.SYSTEM); const { t } = useTranslation(); - const navigationTabs = useMemo( - () => tabs.map(z => ({ ...z, tooltip: t(z.code) })), - [t] - ); + const navigationTabs = useMemo(() => tabs.map(z => ({ ...z, tooltip: t(z.code) })), [t]); return ( <> - - } - /> + } /> {tab === NavigationTabs.SYSTEM && } {tab === NavigationTabs.RELEASE_NOTES && } - {tab === NavigationTabs.TIMELINE && ( - - )} + {tab === NavigationTabs.TIMELINE && } ); }; diff --git a/frontend/src/features/about/releaseNotes/ReleaseNotesList.js b/frontend/src/features/about/releaseNotes/ReleaseNotesList.js index 1d03cb1..b46c03d 100644 --- a/frontend/src/features/about/releaseNotes/ReleaseNotesList.js +++ b/frontend/src/features/about/releaseNotes/ReleaseNotesList.js @@ -1,11 +1,7 @@ import React, { useState } from "react"; import PropTypes from "prop-types"; -import { - Accordion, - AccordionSummary, - AccordionDetails -} from "@material-ui/core"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import { Accordion, AccordionSummary, AccordionDetails } from "@material-ui/core"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ReleaseNoteSummary from "./ReleaseNoteSummary"; import ReleaseNote from "./ReleaseNote"; @@ -29,18 +25,9 @@ const ReleaseNotesList = ({ releases }) => { <> {releases.map(release => { return ( - - } - id={`panel-${release.version}-header`} - > - + + } id={`panel-${release.version}-header`}> + diff --git a/frontend/src/features/about/system/AboutSystemComponent.js b/frontend/src/features/about/system/AboutSystemComponent.js index ad826d7..4c0ad72 100644 --- a/frontend/src/features/about/system/AboutSystemComponent.js +++ b/frontend/src/features/about/system/AboutSystemComponent.js @@ -7,7 +7,7 @@ import CardContent from "@material-ui/core/CardContent"; import Button from "@material-ui/core/Button"; import Typography from "@material-ui/core/Typography"; import { useTranslation } from "react-i18next"; -import OpenInNewIcon from "@material-ui/icons/OpenInNew"; +import OpenInNewIcon from "@mui/icons-material/OpenInNew"; const useStyles = makeStyles(theme => ({ bullet: { @@ -51,12 +51,8 @@ const AboutSystemComponent = ({ handleOpenInNewTab }) => { {t("About.System.Description.Title")} - - {t("About.System.Description.FirstPhrase")} - - - {t("About.System.Description.SecondPhrase")} - + {t("About.System.Description.FirstPhrase")} + {t("About.System.Description.SecondPhrase")} {bullet} diff --git a/frontend/src/features/about/system/SystemVersionComponent.js b/frontend/src/features/about/system/SystemVersionComponent.js index 5968a2e..0e8a261 100644 --- a/frontend/src/features/about/system/SystemVersionComponent.js +++ b/frontend/src/features/about/system/SystemVersionComponent.js @@ -1,16 +1,11 @@ import React, { useMemo, useEffect, useState } from "react"; import PropTypes from "prop-types"; import { makeStyles } from "@material-ui/core/styles"; -import { - List, - ListItem, - ListItemText, - ListItemAvatar -} from "@material-ui/core"; +import { List, ListItem, ListItemText, ListItemAvatar } from "@material-ui/core"; import Avatar from "@material-ui/core/Avatar"; -import WebAssetIcon from "@material-ui/icons/WebAsset"; -import DeveloperBoardIcon from "@material-ui/icons/DeveloperBoard"; -import SettingsInputSvideoIcon from "@material-ui/icons/SettingsInputSvideo"; +import WebAssetIcon from "@mui/icons-material/WebAsset"; +import DeveloperBoardIcon from "@mui/icons-material/DeveloperBoard"; +import SettingsInputSvideoIcon from "@mui/icons-material/SettingsInputSvideo"; import { useTranslation } from "react-i18next"; import packageData from "../../../../package.json"; import Paper from "@material-ui/core/Paper"; diff --git a/frontend/src/features/machines/components/MachineAccordion.js b/frontend/src/features/machines/components/MachineAccordion.js index 42ede53..81284fc 100644 --- a/frontend/src/features/machines/components/MachineAccordion.js +++ b/frontend/src/features/machines/components/MachineAccordion.js @@ -1,12 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; -import { - Accordion, - AccordionSummary, - AccordionDetails, - Grid -} from "@material-ui/core"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import { Accordion, AccordionSummary, AccordionDetails, Grid } from "@material-ui/core"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import withStyles from "@material-ui/core/styles/withStyles"; import MachineCollapsedContent from "./common/MachineCollapsedContent"; import { DataLabel } from "../../../components/common"; @@ -67,31 +62,19 @@ const MachineAccordion = ({ machine, actions, logs, addLog }) => { - + - + - + ); diff --git a/frontend/src/features/machines/components/ViewModeSelection.js b/frontend/src/features/machines/components/ViewModeSelection.js index 40d3ba2..f2bfa93 100644 --- a/frontend/src/features/machines/components/ViewModeSelection.js +++ b/frontend/src/features/machines/components/ViewModeSelection.js @@ -1,7 +1,7 @@ import React, { useState, useEffect, useCallback } from "react"; import PropTypes from "prop-types"; -import TableChartIcon from "@material-ui/icons/TableChart"; -import ViewListIcon from "@material-ui/icons/ViewList"; +import TableChartIcon from "@mui/icons-material/TableChart"; +import ViewListIcon from "@mui/icons-material/ViewList"; import ToggleButton from "@material-ui/lab/ToggleButton"; import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; import { Tooltip } from "@material-ui/core"; @@ -44,17 +44,8 @@ const ViewModeSelection = ({ initialMode, callback }) => { useEffect(() => callback && callback(state.mode), [callback, state.mode]); return ( - - + + diff --git a/frontend/src/features/settings/SettingsContainer.js b/frontend/src/features/settings/SettingsContainer.js index 153533b..656afef 100644 --- a/frontend/src/features/settings/SettingsContainer.js +++ b/frontend/src/features/settings/SettingsContainer.js @@ -1,7 +1,7 @@ import React, { useState, useMemo } from "react"; -import BubbleChartIcon from "@material-ui/icons/BubbleChart"; -import BrushIcon from "@material-ui/icons/Brush"; -import NotificationsIcon from "@material-ui/icons/Notifications"; +import BubbleChartIcon from "@mui/icons-material/BubbleChart"; +import BrushIcon from "@mui/icons-material/Brush"; +import NotificationsIcon from "@mui/icons-material/Notifications"; import { useTranslation } from "react-i18next"; import PageTitle from "../../components/common/PageTitle"; import NavigationButtons from "../../components/common/NavigationButtons"; @@ -34,19 +34,11 @@ const SettingsContainer = () => { const [tab, setTab] = useState(NavigationTabs.SYSTEM); const { t } = useTranslation(); - const navigationTabs = useMemo( - () => tabs.map(z => ({ ...z, tooltip: t(z.code) })), - [t] - ); + const navigationTabs = useMemo(() => tabs.map(z => ({ ...z, tooltip: t(z.code) })), [t]); return ( <> - - } - /> + } /> {tab === NavigationTabs.SYSTEM && } {tab === NavigationTabs.APPEARANCE && } {tab === NavigationTabs.NOTIFICATIONS && } diff --git a/frontend/src/features/system/SystemContainer.js b/frontend/src/features/system/SystemContainer.js index ff19551..cdf8f84 100644 --- a/frontend/src/features/system/SystemContainer.js +++ b/frontend/src/features/system/SystemContainer.js @@ -1,6 +1,6 @@ import React, { useState, useMemo } from "react"; -import CategoryIcon from "@material-ui/icons/Category"; -import GrainIcon from "@material-ui/icons/Grain"; +import CategoryIcon from "@mui/icons-material/Category"; +import GrainIcon from "@mui/icons-material/Grain"; import { useTranslation } from "react-i18next"; import PageTitle from "../../components/common/PageTitle"; import NavigationButtons from "../../components/common/NavigationButtons"; @@ -27,19 +27,11 @@ const SystemContainer = () => { const [tab, setTab] = useState(NavigationTabs.MAIN_SERVICES); const { t } = useTranslation(); - const navigationTabs = useMemo( - () => tabs.map(z => ({ ...z, tooltip: t(z.code) })), - [t] - ); + const navigationTabs = useMemo(() => tabs.map(z => ({ ...z, tooltip: t(z.code) })), [t]); return ( <> - - } - /> + } /> {tab === NavigationTabs.MAIN_SERVICES && } {tab === NavigationTabs.AGENTS && } diff --git a/frontend/src/features/user/profile/contact/ContactOptions.js b/frontend/src/features/user/profile/contact/ContactOptions.js index 7509981..d1849fa 100644 --- a/frontend/src/features/user/profile/contact/ContactOptions.js +++ b/frontend/src/features/user/profile/contact/ContactOptions.js @@ -3,16 +3,16 @@ import PropTypes from "prop-types"; import { useTranslation } from "react-i18next"; import { Grid } from "@material-ui/core"; import ContactOptionList from "./ContactOptionList"; -import BusinessCenterIcon from "@material-ui/icons/BusinessCenter"; -import EmailIcon from "@material-ui/icons/Email"; -import PhoneAndroidIcon from "@material-ui/icons/PhoneAndroid"; -import LanguageIcon from "@material-ui/icons/Language"; -import LinkedInIcon from "@material-ui/icons/LinkedIn"; -import GitHubIcon from "@material-ui/icons/GitHub"; -import RedditIcon from "@material-ui/icons/Reddit"; -import BookIcon from "@material-ui/icons/Book"; -import MenuBookIcon from "@material-ui/icons/MenuBook"; -import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; +import BusinessCenterIcon from "@mui/icons-material/BusinessCenter"; +import EmailIcon from "@mui/icons-material/Email"; +import PhoneAndroidIcon from "@mui/icons-material/PhoneAndroid"; +import LanguageIcon from "@mui/icons-material/Language"; +import LinkedInIcon from "@mui/icons-material/LinkedIn"; +import GitHubIcon from "@mui/icons-material/GitHub"; +import RedditIcon from "@mui/icons-material/Reddit"; +import BookIcon from "@mui/icons-material/Book"; +import MenuBookIcon from "@mui/icons-material/MenuBook"; +import FileCopyOutlinedIcon from "@mui/icons-material/FileCopyOutlined"; import { useClipboard } from "../../../../hooks"; const icons = {