tudor.stanciu
/
network-resurrector
mirror of https://dev.azure.com/tstanciu94/NetworkResurrector/_git/NetworkResurrector
1
0
Fork 0
Code Issues 1 Packages Projects Releases Wiki Activity

Update Material-UI icons to MUI icons

master
Tudor Stanciu 2024-03-25 02:08:05 +02:00
parent d9501339c6
commit f8276f756b
12 changed files with 59 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/layout/ProfileButton.js
View File

@ -1,9 +1,9 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { IconButton, Menu, MenuItem, Typography, ListItemIcon } from "@material-ui/core"; import { IconButton, Menu, MenuItem, Typography, ListItemIcon } from "@material-ui/core";
import AccountCircle from "@material-ui/icons/AccountCircle"; import AccountCircle from "@mui/icons-material/AccountCircle";
import ExitToAppIcon from "@material-ui/icons/ExitToApp"; import ExitToAppIcon from "@mui/icons-material/ExitToApp";
import AccountBoxIcon from "@material-ui/icons/AccountBox"; import AccountBoxIcon from "@mui/icons-material/AccountBox";
import SettingsIcon from "@material-ui/icons/Settings"; import SettingsIcon from "@mui/icons-material/Settings";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useTuitioClient } from "@flare/tuitio-client-react"; import { useTuitioClient } from "@flare/tuitio-client-react";
import { useToast } from "../../hooks"; import { useToast } from "../../hooks";

16
frontend/src/components/layout/Sidebar.js
View File

@ -3,15 +3,15 @@ import PropTypes from "prop-types";
import clsx from "clsx"; import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core/styles"; import { makeStyles, useTheme } from "@material-ui/core/styles";
import { Drawer, List, Divider, IconButton, ListItemIcon, ListItemText } from "@material-ui/core"; import { Drawer, List, Divider, IconButton, ListItemIcon, ListItemText } from "@material-ui/core";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight"; import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ListItem from "@material-ui/core/ListItem"; import ListItem from "@material-ui/core/ListItem";
import BuildIcon from "@material-ui/icons/Build"; import BuildIcon from "@mui/icons-material/Build";
import DnsIcon from "@material-ui/icons/Dns"; import DnsIcon from "@mui/icons-material/Dns";
import DeviceHubIcon from "@material-ui/icons/DeviceHub"; import DeviceHubIcon from "@mui/icons-material/DeviceHub";
import SettingsIcon from "@material-ui/icons/Settings"; import SettingsIcon from "@mui/icons-material/Settings";
import DashboardIcon from "@material-ui/icons/Dashboard"; import DashboardIcon from "@mui/icons-material/Dashboard";
import FeaturedPlayListIcon from "@material-ui/icons/FeaturedPlayList"; import FeaturedPlayListIcon from "@mui/icons-material/FeaturedPlayList";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import styles from "./styles"; import styles from "./styles";

2
frontend/src/components/layout/TopBar.js
View File

@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import clsx from "clsx"; import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { AppBar, Toolbar, Typography, IconButton } from "@material-ui/core"; 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 ProfileButton from "./ProfileButton";
import LightDarkToggle from "./LightDarkToggle"; import LightDarkToggle from "./LightDarkToggle";
import SensitiveInfoToggle from "./SensitiveInfoToggle"; import SensitiveInfoToggle from "./SensitiveInfoToggle";

22
frontend/src/features/about/AboutContainer.js
View File

@ -1,8 +1,8 @@
import React, { useState, useMemo } from "react"; import React, { useState, useMemo } from "react";
import PageTitle from "../../components/common/PageTitle"; import PageTitle from "../../components/common/PageTitle";
import BubbleChartIcon from "@material-ui/icons/BubbleChart"; import BubbleChartIcon from "@mui/icons-material/BubbleChart";
import NotesIcon from "@material-ui/icons/Notes"; import NotesIcon from "@mui/icons-material/Notes";
import TimelineIcon from "@material-ui/icons/Timeline"; import TimelineIcon from "@mui/icons-material/Timeline";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import AboutSystemContainer from "./system/AboutSystemContainer"; import AboutSystemContainer from "./system/AboutSystemContainer";
import ReleaseNotesContainer from "./releaseNotes/ReleaseNotesContainer"; import ReleaseNotesContainer from "./releaseNotes/ReleaseNotesContainer";
@ -33,24 +33,14 @@ const AboutContainer = () => {
const [tab, setTab] = useState(NavigationTabs.SYSTEM); const [tab, setTab] = useState(NavigationTabs.SYSTEM);
const { t } = useTranslation(); const { t } = useTranslation();
const navigationTabs = useMemo( const navigationTabs = useMemo(() => tabs.map(z => ({ ...z, tooltip: t(z.code) })), [t]);
() => tabs.map(z => ({ ...z, tooltip: t(z.code) })),
[t]
);
return ( return (
<> <>
<PageTitle <PageTitle text={t(tab)} navigation={<NavigationButtons tabs={navigationTabs} onTabChange={setTab} />} />
text={t(tab)}
navigation={
<NavigationButtons tabs={navigationTabs} onTabChange={setTab} />
}
/>
{tab === NavigationTabs.SYSTEM && <AboutSystemContainer />} {tab === NavigationTabs.SYSTEM && <AboutSystemContainer />}
{tab === NavigationTabs.RELEASE_NOTES && <ReleaseNotesContainer />} {tab === NavigationTabs.RELEASE_NOTES && <ReleaseNotesContainer />}
{tab === NavigationTabs.TIMELINE && ( {tab === NavigationTabs.TIMELINE && <ReleaseNotesContainer view="timeline" />}
<ReleaseNotesContainer view="timeline" />
)}
</> </>
); );
}; };

23
frontend/src/features/about/releaseNotes/ReleaseNotesList.js
View File

@ -1,11 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { import { Accordion, AccordionSummary, AccordionDetails } from "@material-ui/core";
Accordion, import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
AccordionSummary,
AccordionDetails
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ReleaseNoteSummary from "./ReleaseNoteSummary"; import ReleaseNoteSummary from "./ReleaseNoteSummary";
import ReleaseNote from "./ReleaseNote"; import ReleaseNote from "./ReleaseNote";
@ -29,18 +25,9 @@ const ReleaseNotesList = ({ releases }) => {
<> <>
{releases.map(release => { {releases.map(release => {
return ( return (
<Accordion <Accordion key={release.version} onChange={handleToggle(release.version)}>
key={release.version} <AccordionSummary expandIcon={<ExpandMoreIcon />} id={`panel-${release.version}-header`}>
onChange={handleToggle(release.version)} <ReleaseNoteSummary releaseNote={release} collapsed={isCollapsed(release.version)} />
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
id={`panel-${release.version}-header`}
>
<ReleaseNoteSummary
releaseNote={release}
collapsed={isCollapsed(release.version)}
/>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<ReleaseNote releaseNote={release} /> <ReleaseNote releaseNote={release} />

10
frontend/src/features/about/system/AboutSystemComponent.js
View File

@ -7,7 +7,7 @@ import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import OpenInNewIcon from "@material-ui/icons/OpenInNew"; import OpenInNewIcon from "@mui/icons-material/OpenInNew";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
bullet: { bullet: {
@ -51,12 +51,8 @@ const AboutSystemComponent = ({ handleOpenInNewTab }) => {
<Typography variant="h5" gutterBottom> <Typography variant="h5" gutterBottom>
{t("About.System.Description.Title")} {t("About.System.Description.Title")}
</Typography> </Typography>
<Typography color="textSecondary"> <Typography color="textSecondary">{t("About.System.Description.FirstPhrase")}</Typography>
{t("About.System.Description.FirstPhrase")} <Typography color="textSecondary">{t("About.System.Description.SecondPhrase")}</Typography>
</Typography>
<Typography color="textSecondary">
{t("About.System.Description.SecondPhrase")}
</Typography>
<Typography className={classes.service} color="textSecondary"> <Typography className={classes.service} color="textSecondary">
{bullet} {bullet}

13
frontend/src/features/about/system/SystemVersionComponent.js
View File

@ -1,16 +1,11 @@
import React, { useMemo, useEffect, useState } from "react"; import React, { useMemo, useEffect, useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { import { List, ListItem, ListItemText, ListItemAvatar } from "@material-ui/core";
List,
ListItem,
ListItemText,
ListItemAvatar
} from "@material-ui/core";
import Avatar from "@material-ui/core/Avatar"; import Avatar from "@material-ui/core/Avatar";
import WebAssetIcon from "@material-ui/icons/WebAsset"; import WebAssetIcon from "@mui/icons-material/WebAsset";
import DeveloperBoardIcon from "@material-ui/icons/DeveloperBoard"; import DeveloperBoardIcon from "@mui/icons-material/DeveloperBoard";
import SettingsInputSvideoIcon from "@material-ui/icons/SettingsInputSvideo"; import SettingsInputSvideoIcon from "@mui/icons-material/SettingsInputSvideo";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import packageData from "../../../../package.json"; import packageData from "../../../../package.json";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";

27
frontend/src/features/machines/components/MachineAccordion.js
View File

@ -1,12 +1,7 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { import { Accordion, AccordionSummary, AccordionDetails, Grid } from "@material-ui/core";
Accordion, import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
AccordionSummary,
AccordionDetails,
Grid
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import withStyles from "@material-ui/core/styles/withStyles"; import withStyles from "@material-ui/core/styles/withStyles";
import MachineCollapsedContent from "./common/MachineCollapsedContent"; import MachineCollapsedContent from "./common/MachineCollapsedContent";
import { DataLabel } from "../../../components/common"; import { DataLabel } from "../../../components/common";
@ -67,31 +62,19 @@ const MachineAccordion = ({ machine, actions, logs, addLog }) => {
<Grid container className={classes.panel}> <Grid container className={classes.panel}>
<Grid item xs={11}> <Grid item xs={11}>
<Grid container> <Grid container>
<GridCell <GridCell label={t("Machine.FullName")} value={machine.fullMachineName} />
label={t("Machine.FullName")}
value={machine.fullMachineName}
/>
<GridCell label={t("Machine.Name")} value={machine.machineName} /> <GridCell label={t("Machine.Name")} value={machine.machineName} />
<GridCell label={t("Machine.IP")} value={machine.iPv4Address} /> <GridCell label={t("Machine.IP")} value={machine.iPv4Address} />
<GridCell label={t("Machine.MAC")} value={machine.macAddress} /> <GridCell label={t("Machine.MAC")} value={machine.macAddress} />
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={1} style={{ textAlign: "right" }}> <Grid item xs={1} style={{ textAlign: "right" }}>
<ActionsGroup <ActionsGroup className={classes.actions} machine={machine} actions={actions} addLog={addLog} />
className={classes.actions}
machine={machine}
actions={actions}
addLog={addLog}
/>
</Grid> </Grid>
</Grid> </Grid>
</IconLeftAccordionSummary> </IconLeftAccordionSummary>
<AccordionDetails> <AccordionDetails>
<MachineCollapsedContent <MachineCollapsedContent description={machine.description} logs={logs} style={{ width: "100%" }} />
description={machine.description}
logs={logs}
style={{ width: "100%" }}
/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
); );

17
frontend/src/features/machines/components/ViewModeSelection.js
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect, useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import TableChartIcon from "@material-ui/icons/TableChart"; import TableChartIcon from "@mui/icons-material/TableChart";
import ViewListIcon from "@material-ui/icons/ViewList"; import ViewListIcon from "@mui/icons-material/ViewList";
import ToggleButton from "@material-ui/lab/ToggleButton"; import ToggleButton from "@material-ui/lab/ToggleButton";
import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
import { Tooltip } from "@material-ui/core"; import { Tooltip } from "@material-ui/core";
@ -44,17 +44,8 @@ const ViewModeSelection = ({ initialMode, callback }) => {
useEffect(() => callback && callback(state.mode), [callback, state.mode]); useEffect(() => callback && callback(state.mode), [callback, state.mode]);
return ( return (
<ToggleButtonGroup <ToggleButtonGroup size="small" value={state.mode} exclusive onChange={handleViewModeSelection}>
size="small" <ToggleButton value={ViewModes.TABLE} aria-label="table view mode" disabled={state.mode === ViewModes.TABLE}>
value={state.mode}
exclusive
onChange={handleViewModeSelection}
>
<ToggleButton
value={ViewModes.TABLE}
aria-label="table view mode"
disabled={state.mode === ViewModes.TABLE}
>
<Tooltip title={t("ViewModes.Table")}> <Tooltip title={t("ViewModes.Table")}>
<TableChartIcon /> <TableChartIcon />
</Tooltip> </Tooltip>

18
frontend/src/features/settings/SettingsContainer.js
View File

@ -1,7 +1,7 @@
import React, { useState, useMemo } from "react"; import React, { useState, useMemo } from "react";
import BubbleChartIcon from "@material-ui/icons/BubbleChart"; import BubbleChartIcon from "@mui/icons-material/BubbleChart";
import BrushIcon from "@material-ui/icons/Brush"; import BrushIcon from "@mui/icons-material/Brush";
import NotificationsIcon from "@material-ui/icons/Notifications"; import NotificationsIcon from "@mui/icons-material/Notifications";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import PageTitle from "../../components/common/PageTitle"; import PageTitle from "../../components/common/PageTitle";
import NavigationButtons from "../../components/common/NavigationButtons"; import NavigationButtons from "../../components/common/NavigationButtons";
@ -34,19 +34,11 @@ const SettingsContainer = () => {
const [tab, setTab] = useState(NavigationTabs.SYSTEM); const [tab, setTab] = useState(NavigationTabs.SYSTEM);
const { t } = useTranslation(); const { t } = useTranslation();
const navigationTabs = useMemo( const navigationTabs = useMemo(() => tabs.map(z => ({ ...z, tooltip: t(z.code) })), [t]);
() => tabs.map(z => ({ ...z, tooltip: t(z.code) })),
[t]
);
return ( return (
<> <>
<PageTitle <PageTitle text={t(tab)} navigation={<NavigationButtons tabs={navigationTabs} onTabChange={setTab} />} />
text={t(tab)}
navigation={
<NavigationButtons tabs={navigationTabs} onTabChange={setTab} />
}
/>
{tab === NavigationTabs.SYSTEM && <SystemContainer />} {tab === NavigationTabs.SYSTEM && <SystemContainer />}
{tab === NavigationTabs.APPEARANCE && <AppearanceContainer />} {tab === NavigationTabs.APPEARANCE && <AppearanceContainer />}
{tab === NavigationTabs.NOTIFICATIONS && <NotificationsContainer />} {tab === NavigationTabs.NOTIFICATIONS && <NotificationsContainer />}

16
frontend/src/features/system/SystemContainer.js
View File

@ -1,6 +1,6 @@
import React, { useState, useMemo } from "react"; import React, { useState, useMemo } from "react";
import CategoryIcon from "@material-ui/icons/Category"; import CategoryIcon from "@mui/icons-material/Category";
import GrainIcon from "@material-ui/icons/Grain"; import GrainIcon from "@mui/icons-material/Grain";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import PageTitle from "../../components/common/PageTitle"; import PageTitle from "../../components/common/PageTitle";
import NavigationButtons from "../../components/common/NavigationButtons"; import NavigationButtons from "../../components/common/NavigationButtons";
@ -27,19 +27,11 @@ const SystemContainer = () => {
const [tab, setTab] = useState(NavigationTabs.MAIN_SERVICES); const [tab, setTab] = useState(NavigationTabs.MAIN_SERVICES);
const { t } = useTranslation(); const { t } = useTranslation();
const navigationTabs = useMemo( const navigationTabs = useMemo(() => tabs.map(z => ({ ...z, tooltip: t(z.code) })), [t]);
() => tabs.map(z => ({ ...z, tooltip: t(z.code) })),
[t]
);
return ( return (
<> <>
<PageTitle <PageTitle text={t(tab)} navigation={<NavigationButtons tabs={navigationTabs} onTabChange={setTab} />} />
text={t(tab)}
navigation={
<NavigationButtons tabs={navigationTabs} onTabChange={setTab} />
}
/>
{tab === NavigationTabs.MAIN_SERVICES && <MainServicesContainer />} {tab === NavigationTabs.MAIN_SERVICES && <MainServicesContainer />}
{tab === NavigationTabs.AGENTS && <AgentsContainer />} {tab === NavigationTabs.AGENTS && <AgentsContainer />}
</> </>

20
frontend/src/features/user/profile/contact/ContactOptions.js
View File

@ -3,16 +3,16 @@ import PropTypes from "prop-types";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Grid } from "@material-ui/core"; import { Grid } from "@material-ui/core";
import ContactOptionList from "./ContactOptionList"; import ContactOptionList from "./ContactOptionList";
import BusinessCenterIcon from "@material-ui/icons/BusinessCenter"; import BusinessCenterIcon from "@mui/icons-material/BusinessCenter";
import EmailIcon from "@material-ui/icons/Email"; import EmailIcon from "@mui/icons-material/Email";
import PhoneAndroidIcon from "@material-ui/icons/PhoneAndroid"; import PhoneAndroidIcon from "@mui/icons-material/PhoneAndroid";
import LanguageIcon from "@material-ui/icons/Language"; import LanguageIcon from "@mui/icons-material/Language";
import LinkedInIcon from "@material-ui/icons/LinkedIn"; import LinkedInIcon from "@mui/icons-material/LinkedIn";
import GitHubIcon from "@material-ui/icons/GitHub"; import GitHubIcon from "@mui/icons-material/GitHub";
import RedditIcon from "@material-ui/icons/Reddit"; import RedditIcon from "@mui/icons-material/Reddit";
import BookIcon from "@material-ui/icons/Book"; import BookIcon from "@mui/icons-material/Book";
import MenuBookIcon from "@material-ui/icons/MenuBook"; import MenuBookIcon from "@mui/icons-material/MenuBook";
import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; import FileCopyOutlinedIcon from "@mui/icons-material/FileCopyOutlined";
import { useClipboard } from "../../../../hooks"; import { useClipboard } from "../../../../hooks";
const icons = { const icons = {