Updated styling methods to remove mui and replace it with mds (#3085)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Author: bexsoft

portal-ui/src/common/Copyright.tsx

@@ -15,18 +15,14 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import Typography from "@mui/material/Typography";
-import Link from "@mui/material/Link";
+import { Box } from "mds";
 
 export default function Copyright() {
   return (
-    <Typography variant="body2" color="textSecondary" align="center">
+    <Box className={"muted"} sx={{ textAlign: "center" }}>
       {"Copyright © "}
-      <Link color="inherit" href="https://min.io/?ref=con">
-        MinIO
-      </Link>{" "}
-      {new Date().getFullYear()}
+      <a href="https://min.io/?ref=con">MinIO</a> {new Date().getFullYear()}
       {"."}
-    </Typography>
+    </Box>
   );
 }

portal-ui/src/screens/AnonymousAccess/AnonymousAccess.tsx

@@ -15,18 +15,17 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, Suspense } from "react";
-import ObjectBrowser from "../Console/ObjectBrowser/ObjectBrowser";
-import LoadingComponent from "../../common/LoadingComponent";
-import ObjectManager from "../Console/Common/ObjectManager/ObjectManager";
-import { ApplicationLogo } from "mds";
+import { ApplicationLogo, Button } from "mds";
 import { Route, Routes } from "react-router-dom";
 import { IAM_PAGES } from "../../common/SecureComponent/permissions";
 import { resetSession } from "../Console/consoleSlice";
 import { useAppDispatch } from "../../store";
 import { resetSystem } from "../../systemSlice";
 import { getLogoVar } from "../../config";
+import ObjectBrowser from "../Console/ObjectBrowser/ObjectBrowser";
+import LoadingComponent from "../../common/LoadingComponent";
+import ObjectManager from "../Console/Common/ObjectManager/ObjectManager";
 import ObjectManagerButton from "../Console/Common/ObjectManager/ObjectManagerButton";
-import { Button } from "@mui/material";
 
 const AnonymousAccess = () => {
   const dispatch = useAppDispatch();
@@ -61,7 +60,7 @@ const AnonymousAccess = () => {
               dispatch(resetSession());
               dispatch(resetSystem());
             }}
-            style={{ color: "white" }}
+            sx={{ color: "white", textTransform: "initial" }}
           >
             Login
           </Button>

portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx

@@ -16,14 +16,7 @@
 
 import React, { useState } from "react";
 import { AddNewTagIcon, Box, Button, FormLayout, Grid, InputBox } from "mds";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import {
-  formFieldStyles,
-  modalStyleUtils,
-  spacingUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
@@ -35,24 +28,13 @@ interface IBucketTagModal {
   currentTags: any;
   bucketName: string;
   onCloseAndUpdate: (refresh: boolean) => void;
-
-  classes: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...formFieldStyles,
-    ...modalStyleUtils,
-    ...spacingUtils,
-  });
-
 const AddBucketTagModal = ({
   modalOpen,
   currentTags,
   onCloseAndUpdate,
   bucketName,
-
-  classes,
 }: IBucketTagModal) => {
   const dispatch = useAppDispatch();
   const [newKey, setNewKey] = useState<string>("");
@@ -143,4 +125,4 @@ const AddBucketTagModal = ({
   );
 };
 
-export default withStyles(styles)(AddBucketTagModal);
+export default AddBucketTagModal;

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx

@@ -36,13 +36,6 @@ import {
   TrashIcon,
 } from "mds";
 import { useSelector } from "react-redux";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import {
-  containerForHeader,
-  searchField,
-} from "../../Common/FormComponents/common/styleLibrary";
 import {
   browseBucketPermissions,
   deleteBucketPermissions,
@@ -99,24 +92,7 @@ const BucketLifecyclePanel = withSuspense(
   React.lazy(() => import("./BucketLifecyclePanel")),
 );
 
-const styles = (theme: Theme) =>
-  createStyles({
-    pageContainer: {
-      height: "100%",
-    },
-    ...searchField,
-    capitalize: {
-      textTransform: "capitalize",
-    },
-
-    ...containerForHeader,
-  });
-
-interface IBucketDetailsProps {
-  classes: any;
-}
-
-const BucketDetails = ({ classes }: IBucketDetailsProps) => {
+const BucketDetails = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const params = useParams();
@@ -255,8 +231,11 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
             >
               <span style={{ fontSize: 15 }}>Access: </span>
               <span
-                className={classes.capitalize}
-                style={{ fontWeight: 600, fontSize: 15 }}
+                style={{
+                  fontWeight: 600,
+                  fontSize: 15,
+                  textTransform: "capitalize",
+                }}
               >
                 {bucketInfo?.access?.toLowerCase()}
               </span>
@@ -421,4 +400,4 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
   );
 };
 
-export default withStyles(styles)(BucketDetails);
+export default BucketDetails;

portal-ui/src/screens/Console/Buckets/BucketDetails/EditReplicationModal.tsx

@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
 import {
   BucketReplicationIcon,
   Button,
@@ -25,16 +24,9 @@ import {
   Switch,
   Grid,
 } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
-import {
-  createTenantCommon,
-  formFieldStyles,
-  modalStyleUtils,
-  spacingUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
 import { api } from "api";
@@ -43,27 +35,13 @@ import { errorToHandler } from "api/errors";
 interface IEditReplicationModal {
   closeModalAndRefresh: (refresh: boolean) => void;
   open: boolean;
-  classes: any;
   bucketName: string;
   ruleID: string;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...spacingUtils,
-    ...createTenantCommon,
-    ...formFieldStyles,
-    ...modalStyleUtils,
-    modalFormScrollable: {
-      ...modalStyleUtils.modalFormScrollable,
-      paddingRight: 10,
-    },
-  });
-
 const EditReplicationModal = ({
   closeModalAndRefresh,
   open,
-  classes,
   bucketName,
   ruleID,
 }: IEditReplicationModal) => {
@@ -302,4 +280,4 @@ const EditReplicationModal = ({
   );
 };
 
-export default withStyles(styles)(EditReplicationModal);
+export default EditReplicationModal;

portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx

@@ -16,6 +16,7 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import {
+  Box,
   FormLayout,
   Grid,
   InputBox,
@@ -25,18 +26,9 @@ import {
   Switch,
   Tooltip,
 } from "mds";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import get from "lodash/get";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import {
-  createTenantCommon,
-  formFieldStyles,
-  modalStyleUtils,
-  spacingUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import GenericWizard from "../../Common/GenericWizard/GenericWizard";
 import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
@@ -50,36 +42,12 @@ import { errorToHandler } from "api/errors";
 interface IBulkReplicationModal {
   open: boolean;
   closeModalAndRefresh: (clearSelection: boolean) => any;
-  classes: any;
   buckets: string[];
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    resultGrid: {
-      display: "grid",
-      gridTemplateColumns: "45px auto",
-      alignItems: "center",
-      justifyContent: "stretch",
-    },
-    errorIcon: {
-      paddingTop: 5,
-      color: "#C72C48",
-    },
-    successIcon: {
-      paddingTop: 5,
-      color: "#42C91A",
-    },
-    ...spacingUtils,
-    ...modalStyleUtils,
-    ...formFieldStyles,
-    ...createTenantCommon,
-  });
-
 const AddBulkReplicationModal = ({
   open,
   closeModalAndRefresh,
-  classes,
   buckets,
 }: IBulkReplicationModal) => {
   const dispatch = useAppDispatch();
@@ -143,20 +111,30 @@ const AddBulkReplicationModal = ({
     switch (errString) {
       case "":
         return (
-          <div className={classes.successIcon}>
+          <Box
+            sx={{
+              paddingTop: 5,
+              color: "#42C91A",
+            }}
+          >
             <CheckCircleOutlineIcon />
-          </div>
+          </Box>
         );
       case "n/a":
         return null;
       default:
         if (errString) {
           return (
-            <div className={classes.errorIcon}>
+            <Box
+              sx={{
+                paddingTop: 5,
+                color: "#C72C48",
+              }}
+            >
               <Tooltip tooltip={errString} placement="top">
                 <ErrorOutlineIcon />
               </Tooltip>
-            </div>
+            </Box>
           );
         }
     }
@@ -382,14 +360,21 @@ const AddBulkReplicationModal = ({
               <Fragment>
                 <h3>Multi Bucket lifecycle Assignments Results</h3>
                 <Grid container>
-                  <Grid item xs={12} className={classes.formScrollable}>
+                  <Grid item xs={12}>
                     <h4>Buckets Results</h4>
                     {results?.results?.map((resultItem) => {
                       return (
-                        <div className={classes.resultGrid}>
+                        <Box
+                          sx={{
+                            display: "grid",
+                            gridTemplateColumns: "45px auto",
+                            alignItems: "center",
+                            justifyContent: "stretch",
+                          }}
+                        >
                           {LogoToShow({ errString: resultItem.error || "" })}
                           <span>{resultItem.bucketName}</span>
-                        </div>
+                        </Box>
                       );
                     })}
                   </Grid>
@@ -412,4 +397,4 @@ const AddBulkReplicationModal = ({
   );
 };
 
-export default withStyles(styles)(AddBulkReplicationModal);
+export default AddBulkReplicationModal;