From 79ac2277d4a24082909d8aa94703ae228b02e3ff Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Wed, 11 Oct 2023 15:58:33 -0500 Subject: [PATCH] Migrated mui Box to use mds component (#3082) Signed-off-by: Benjamin Perez --- .../Account/AddServiceAccountHelpBox.tsx | 6 +- portal-ui/src/screens/Console/CommandBar.tsx | 4 +- .../DateRangeSelector/DateRangeSelector.tsx | 57 ++++++++----------- .../Console/Common/MainError/MainError.tsx | 16 +++--- .../SiteReplication/LookupStatus/Utils.tsx | 2 +- .../TiersConfiguration/TierTypeSelector.tsx | 20 ++++--- .../Prometheus/Widgets/ExpandGraphLink.tsx | 3 +- .../Console/Groups/AddGroupHelpBox.tsx | 8 +-- .../Console/License/LicenseConsentModal.tsx | 4 +- .../screens/Console/License/LicensePlans.tsx | 11 ++-- .../src/screens/Console/License/utils.tsx | 2 +- .../Console/Logs/ErrorLogs/LogLine.tsx | 3 +- .../Console/Policies/AddPolicyHelpBox.tsx | 4 +- .../screens/Console/Users/AddUserHelpBox.tsx | 7 +-- .../Users/AddUserServiceAccountHelpBox.tsx | 6 +- 15 files changed, 73 insertions(+), 80 deletions(-) diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccountHelpBox.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccountHelpBox.tsx index da6af467b..bfc0bedf7 100644 --- a/portal-ui/src/screens/Console/Account/AddServiceAccountHelpBox.tsx +++ b/portal-ui/src/screens/Console/Account/AddServiceAccountHelpBox.tsx @@ -14,8 +14,8 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . import React from "react"; -import { Box } from "@mui/material"; import { + Box, HelpIconFilled, IAMPoliciesIcon, PasswordKeyIcon, @@ -58,9 +58,7 @@ const AddServiceAccountHelpBox = () => { display: "flex", flexFlow: "column", padding: "20px", - marginTop: { - xs: "0px", - }, + marginTop: 0, }} > . import React from "react"; -import { Button, OpenListIcon, SyncIcon, Grid } from "mds"; +import { Button, OpenListIcon, SyncIcon, Grid, Box, breakPoints } from "mds"; import { DateTime } from "luxon"; -import { Box } from "@mui/material"; + import ScheduleIcon from "@mui/icons-material/Schedule"; import WatchLaterIcon from "@mui/icons-material/WatchLater"; import DateTimePickerWrapper from "../DateTimePickerWrapper/DateTimePickerWrapper"; @@ -100,18 +100,16 @@ const DateRangeSelector = ({ { "& .message-text": { flex: 2, fontSize: "14px", - textAlign: { - md: "center", - xs: "left", + textAlign: "center", + [`@media (max-width: ${breakPoints.sm}px)`]: { + textAlign: "left", }, }, @@ -116,9 +116,9 @@ const MainError = ({ isModal = false }: IMainErrorProps) => { alignItems: "center", justifyContent: "center", height: "100%", - marginLeft: { - sm: "0px", - xs: "10px", + marginLeft: 0, + [`@media (max-width: ${breakPoints.sm}px)`]: { + marginLeft: 10, }, "& .close-btn": { diff --git a/portal-ui/src/screens/Console/Configurations/SiteReplication/LookupStatus/Utils.tsx b/portal-ui/src/screens/Console/Configurations/SiteReplication/LookupStatus/Utils.tsx index 009cd7f70..7c9efb45f 100644 --- a/portal-ui/src/screens/Console/Configurations/SiteReplication/LookupStatus/Utils.tsx +++ b/portal-ui/src/screens/Console/Configurations/SiteReplication/LookupStatus/Utils.tsx @@ -1,6 +1,6 @@ -import { Box } from "@mui/material"; import React from "react"; import { StatsResponseType } from "../SiteReplicationStatus"; +import { Box } from "mds"; export function syncStatus(mismatch: boolean, set: boolean): string | boolean { if (!set) { diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx index 97d5d3b2b..0380b3d24 100644 --- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx @@ -16,11 +16,19 @@ import React, { Fragment, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import { Box } from "@mui/material"; + import { tierTypes } from "./utils"; import { IAM_PAGES } from "../../../../common/SecureComponent/permissions"; import TierTypeCard from "./TierTypeCard"; -import { BackLink, FormLayout, HelpBox, PageLayout, TiersIcon } from "mds"; +import { + BackLink, + Box, + breakPoints, + FormLayout, + HelpBox, + PageLayout, + TiersIcon, +} from "mds"; import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper"; import HelpMenu from "../../HelpMenu"; import { setHelpName } from "../../../../systemSlice"; @@ -116,11 +124,9 @@ const TierTypeSelector = () => { margin: "15px", display: "grid", gridGap: "20px", - gridTemplateColumns: { - xs: "repeat(1, 1fr)", - sm: "repeat(1, 1fr)", - md: "repeat(2, 1fr)", - lg: "repeat(2, 1fr)", + gridTemplateColumns: "repeat(2, 1fr)", + [`@media (max-width: ${breakPoints.md}px)`]: { + gridTemplateColumns: "repeat(1, 1fr)", }, }} > diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/ExpandGraphLink.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/ExpandGraphLink.tsx index 3d0f62555..b4205f4cf 100644 --- a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/ExpandGraphLink.tsx +++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/ExpandGraphLink.tsx @@ -15,8 +15,9 @@ // along with this program. If not, see . import React from "react"; +import { Box } from "mds"; import ZoomOutMapIcon from "@mui/icons-material/ZoomOutMap"; -import { Box } from "@mui/material"; + import { IDashboardPanel } from "../types"; import { openZoomPage } from "../../dashboardSlice"; diff --git a/portal-ui/src/screens/Console/Groups/AddGroupHelpBox.tsx b/portal-ui/src/screens/Console/Groups/AddGroupHelpBox.tsx index 2851c835e..16d7e88bb 100644 --- a/portal-ui/src/screens/Console/Groups/AddGroupHelpBox.tsx +++ b/portal-ui/src/screens/Console/Groups/AddGroupHelpBox.tsx @@ -14,8 +14,8 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . import React from "react"; -import { Box } from "@mui/material"; -import { GroupsIcon, HelpIconFilled, IAMPoliciesIcon } from "mds"; + +import { Box, GroupsIcon, HelpIconFilled, IAMPoliciesIcon } from "mds"; const FeatureItem = ({ icon, @@ -53,9 +53,7 @@ const AddGroupHelpBox = () => { display: "flex", flexFlow: "column", padding: "20px", - marginTop: { - xs: "0px", - }, + marginTop: 0, }} > { margin: "0 1.5rem 0 1.5rem", - gridTemplateColumns: { - sm: "1fr 1fr 1fr 1fr", - xs: "1fr 1fr 1fr", + gridTemplateColumns: "1fr 1fr 1fr 1fr", + + [`@media (max-width: ${breakPoints.sm}px)`]: { + gridTemplateColumns: "1fr 1fr 1fr", }, "&.paid-plans-only": { diff --git a/portal-ui/src/screens/Console/License/utils.tsx b/portal-ui/src/screens/Console/License/utils.tsx index 948a7f60e..8ee0f1c8a 100644 --- a/portal-ui/src/screens/Console/License/utils.tsx +++ b/portal-ui/src/screens/Console/License/utils.tsx @@ -14,11 +14,11 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import { Box } from "@mui/material"; import LicenseLink from "./LicenseLink"; import { openFAQModal } from "./licenseSlice"; import store from "../../../store"; import FAQModal from "./FAQModal"; +import { Box } from "mds"; export const LICENSE_PLANS = { COMMUNITY: "community", diff --git a/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx b/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx index 3db769775..a5037de0a 100644 --- a/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx +++ b/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx @@ -18,10 +18,9 @@ import { DateTime } from "luxon"; import TableRow from "@mui/material/TableRow"; import TableCell from "@mui/material/TableCell"; import Collapse from "@mui/material/Collapse"; -import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import { LogMessage } from "../types"; -import { BoxArrowDown, BoxArrowUp, WarnFilledIcon } from "mds"; +import { Box, BoxArrowDown, BoxArrowUp, WarnFilledIcon } from "mds"; import getByKey from "lodash/get"; diff --git a/portal-ui/src/screens/Console/Policies/AddPolicyHelpBox.tsx b/portal-ui/src/screens/Console/Policies/AddPolicyHelpBox.tsx index 2dbfc5bd9..043c469f3 100644 --- a/portal-ui/src/screens/Console/Policies/AddPolicyHelpBox.tsx +++ b/portal-ui/src/screens/Console/Policies/AddPolicyHelpBox.tsx @@ -14,8 +14,8 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . import React from "react"; -import { Box } from "@mui/material"; -import { HelpIconFilled, IAMPoliciesIcon } from "mds"; + +import { Box, HelpIconFilled, IAMPoliciesIcon } from "mds"; const FeatureItem = ({ icon, diff --git a/portal-ui/src/screens/Console/Users/AddUserHelpBox.tsx b/portal-ui/src/screens/Console/Users/AddUserHelpBox.tsx index c42c3c268..1b75b4e64 100644 --- a/portal-ui/src/screens/Console/Users/AddUserHelpBox.tsx +++ b/portal-ui/src/screens/Console/Users/AddUserHelpBox.tsx @@ -14,8 +14,9 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . import React from "react"; -import { Box } from "@mui/material"; + import { + Box, ChangeAccessPolicyIcon, GroupsIcon, HelpIconFilled, @@ -58,9 +59,7 @@ const AddUserHelpBox = () => { display: "flex", flexFlow: "column", padding: "20px", - marginTop: { - xs: "0px", - }, + marginTop: 0, }} > . import React from "react"; -import { Box } from "@mui/material"; import { + Box, HelpIconFilled, IAMPoliciesIcon, PasswordKeyIcon, @@ -58,9 +58,7 @@ const AddUserServiceAccountHelpBox = () => { display: "flex", flexFlow: "column", padding: "20px", - marginTop: { - xs: "0px", - }, + marginTop: 0, }} >