Migrated mui Box to use mds component (#3082)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
2023-10-11 15:58:33 -05:00
parent 1c27bee9d0
commit 79ac2277d4
15 changed files with 73 additions and 80 deletions
--- 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 <http://www.gnu.org/licenses/>.
 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,
      }}
    >
      <Box
--- a/portal-ui/src/screens/Console/CommandBar.tsx
+++ b/portal-ui/src/screens/Console/CommandBar.tsx
@@ -33,8 +33,8 @@ import { Action } from "kbar/lib/types";
 import { Theme } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
 import { routesAsKbarActions } from "./kbar-actions";
-import { Box } from "@mui/material";
-import { MenuExpandedIcon } from "mds";
+
+import { Box, MenuExpandedIcon } from "mds";
 import { useSelector } from "react-redux";
 import { selFeatures } from "./consoleSlice";
 import { Bucket } from "../../api/consoleApi";
--- a/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx
@@ -15,9 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 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 = ({
      <Box
        sx={{
          display: "grid",
-          height: {
-            md: "40px",
-            xs: "auto",
-          },
+          height: 40,
          alignItems: "center",
-          gridTemplateColumns: {
-            md: "auto 2fr auto",
-            sm: "1fr",
+          gridTemplateColumns: "auto 2fr auto",
+          padding: 0,
+          [`@media (max-width: ${breakPoints.sm}px)`]: {
+            padding: 5,
          },
-          padding: {
-            md: "0",
-            xs: " 5px",
+          [`@media (max-width: ${breakPoints.md}px)`]: {
+            gridTemplateColumns: "1fr",
+            height: "auto",
          },
          gap: "5px",
        }}
@@ -120,34 +118,29 @@ const DateRangeSelector = ({
          {label}
        </Box>
        <Box
+          withBorders
+          customBorderPadding={"0px"}
          sx={{
            display: "grid",
-            height: {
-              md: "40px",
-              xs: "auto",
-            },
-            border: {
-              md: "1px solid #eaeaea",
-            },
+            height: 40,
            alignItems: "center",
-            gridTemplateColumns: {
-              md: "1fr 1fr",
-              sm: "1fr",
-            },
+            gridTemplateColumns: "1fr 1fr",
            gap: "8px",
            paddingLeft: "8px",
            paddingRight: "8px",
+            [`@media (max-width: ${breakPoints.md}px)`]: {
+              height: "auto",
+              gridTemplateColumns: "1fr",
+            },
          }}
        >
          <Box
            sx={{
              display: "grid",
-              height: "30px",
+              height: 30,
              alignItems: "center",
-              gridTemplateColumns: {
-                xs: "12px auto 1fr",
-              },
-              gap: "5px",
+              gridTemplateColumns: "12px auto 1fr",
+              gap: 5,
            }}
          >
            <Box
@@ -187,12 +180,10 @@ const DateRangeSelector = ({
          <Box
            sx={{
              display: "grid",
-              height: "30px",
+              height: 30,
              alignItems: "center",
-              gridTemplateColumns: {
-                xs: "12px auto 1fr",
-              },
-              gap: "5px",
+              gridTemplateColumns: "12px auto 1fr",
+              gap: 5,
            }}
          >
            <Box
--- a/portal-ui/src/screens/Console/Common/MainError/MainError.tsx
+++ b/portal-ui/src/screens/Console/Common/MainError/MainError.tsx
@@ -18,8 +18,8 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import get from "lodash/get";
 import { AppState, useAppDispatch } from "../../../../store";
-import { Box } from "@mui/material";
-import { AlertCloseIcon } from "mds";
+
+import { AlertCloseIcon, Box, breakPoints } from "mds";
 import { Portal } from "@mui/base";
 import {
  setErrorSnackMessage,
@@ -103,9 +103,9 @@ const MainError = ({ isModal = false }: IMainErrorProps) => {
          "& .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": {
--- 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) {
--- 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)",
              },
            }}
          >
--- 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 <http://www.gnu.org/licenses/>.

 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";
--- 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 <http://www.gnu.org/licenses/>.
 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,
      }}
    >
      <Box
--- a/portal-ui/src/screens/Console/License/LicenseConsentModal.tsx
+++ b/portal-ui/src/screens/Console/License/LicenseConsentModal.tsx
@@ -16,8 +16,8 @@

 import React from "react";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import { Box } from "@mui/material";
-import { AGPLV3DarkLogo, Button } from "mds";
+
+import { AGPLV3DarkLogo, Box, Button } from "mds";
 import { setLicenseConsent } from "./utils";
 import LicenseLink from "./LicenseLink";
 import LicenseFAQ from "./LicenseFAQ";
--- a/portal-ui/src/screens/Console/License/LicensePlans.tsx
+++ b/portal-ui/src/screens/Console/License/LicensePlans.tsx
@@ -19,6 +19,8 @@ import clsx from "clsx";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import {
  AGPLV3Logo,
+  Box,
+  breakPoints,
  Button,
  ConsoleEnterprise,
  ConsoleStandard,
@@ -26,7 +28,7 @@ import {
 } from "mds";
 import { useTheme } from "@mui/material/styles";
 import { SubnetInfo } from "./types";
-import { Box } from "@mui/material";
+
 import useMediaQuery from "@mui/material/useMediaQuery";
 import {
  COMMUNITY_PLAN_FEATURES,
@@ -365,9 +367,10 @@ const LicensePlans = ({ licenseInfo }: IRegisterStatus) => {

            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": {
--- 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 <http://www.gnu.org/licenses/>.

-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",
--- 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";

--- 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 <http://www.gnu.org/licenses/>.
 import React from "react";
-import { Box } from "@mui/material";
-import { HelpIconFilled, IAMPoliciesIcon } from "mds";
+
+import { Box, HelpIconFilled, IAMPoliciesIcon } from "mds";

 const FeatureItem = ({
  icon,
--- 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 <http://www.gnu.org/licenses/>.
 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,
      }}
    >
      <Box
--- a/portal-ui/src/screens/Console/Users/AddUserServiceAccountHelpBox.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserServiceAccountHelpBox.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 <http://www.gnu.org/licenses/>.
 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,
      }}
    >
      <Box