minio · bexsoft · Jan 13, 2022 · Jan 13, 2022 · Jan 13, 2022
diff --git a/portal-ui/src/icons/AzureTierIcon.tsx b/portal-ui/src/icons/AzureTierIcon.tsx
@@ -31,7 +31,7 @@ const AzureTierIcon = (props: SVGProps<SVGSVGElement>) => {
             id="path21"
             d="M459.411,505.944c6.055-1.07,11.056-1.953,11.115-1.965l.1-.024-5.717-6.8c-3.143-3.74-5.717-6.815-5.717-6.831,0-.032,5.9-16.291,5.936-16.347.012-.019,4.03,6.919,9.738,16.812,5.347,9.266,9.755,16.9,9.8,16.975l.075.132-18.168,0-18.169,0S459.411,505.944,459.411,505.944ZM437.6,503.868c0-.008,2.693-4.686,5.987-10.391l5.987-10.375,6.978-5.856c3.839-3.219,6.986-5.86,7-5.864a1.448,1.448,0,0,1-.112.282c-.075.159-3.485,7.471-7.574,16.247l-7.44,15.957-5.41.008C440.037,503.884,437.6,503.88,437.6,503.868Z"
             transform="translate(-437.603 -471.382)"
-            fill="#c22e4a"
+            fill="#2a94dc"
           />
         </g>
       </g>

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
@@ -19,7 +19,7 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, Paper } from "@mui/material";
+import { Paper } from "@mui/material";
 import { AppState } from "../../../../store";
 import { setErrorSnackMessage } from "../../../../actions";
 import { ISessionResponse } from "../../types";
@@ -44,6 +44,7 @@ import SecureComponent, {
 } from "../../../../common/SecureComponent/SecureComponent";
 
 import withSuspense from "../../Common/Components/withSuspense";
+import RBIconButton from "./SummaryItems/RBIconButton";
 
 const AddAccessRuleModal = withSuspense(
   React.lazy(() => import("./AddAccessRule"))
@@ -226,18 +227,16 @@ const AccessRule = ({
           matchAll
           errorProps={{ disabled: true }}
         >
-          <Button
-            variant="contained"
-            color="primary"
-            endIcon={<AddIcon />}
-            component="label"
+          <RBIconButton
+            tooltip={"Add Access Rule"}
             onClick={() => {
               setAddAccessRuleOpen(true);
             }}
-            className={classes.listButton}
-          >
-            Add Access Rule
-          </Button>
+            text={"Add Access Rule"}
+            icon={<AddIcon />}
+            color="primary"
+            variant={"contained"}
+          />
         </SecureComponent>
       </Grid>
       <Paper className={classes.tableBlock}>

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
@@ -274,14 +274,14 @@ const BucketDetails = ({
                   errorProps={{ disabled: true }}
                 >
                   <RBIconButton
-                    classes={{
-                      root: classes.deleteBtn,
-                    }}
+                    tooltip={"Delete Bucket"}
                     onClick={() => {
                       setDeleteOpen(true);
                     }}
-                    text={`Delete Bucket`}
+                    text={"Delete Bucket"}
                     icon={<TrashIcon />}
+                    color={"secondary"}
+                    variant={"outlined"}
                   />
                 </SecureComponent>
                 <RBIconButton

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
@@ -19,7 +19,6 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button } from "@mui/material";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
 import AddIcon from "../../../../icons/AddIcon";
@@ -43,6 +42,7 @@ import SecureComponent, {
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 
 import withSuspense from "../../Common/Components/withSuspense";
+import RBIconButton from "./SummaryItems/RBIconButton";
 
 const DeleteEvent = withSuspense(React.lazy(() => import("./DeleteEvent")));
 const AddEvent = withSuspense(React.lazy(() => import("./AddEvent")));
@@ -162,17 +162,16 @@ const BucketEventsPanel = ({
             matchAll
             errorProps={{ disabled: true }}
           >
-            <Button
-              variant="contained"
-              color="primary"
-              endIcon={<AddIcon />}
-              size="medium"
+            <RBIconButton
+              tooltip={"Subscribe to Event"}
               onClick={() => {
                 setAddEventScreenOpen(true);
               }}
-            >
-              Subscribe to Event
-            </Button>
+              text={"Subscribe to Event"}
+              icon={<AddIcon />}
+              color="primary"
+              variant={"contained"}
+            />
           </SecureComponent>
         </Grid>
         <Grid item xs={12}>

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
@@ -19,7 +19,6 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button } from "@mui/material";
 import get from "lodash/get";
 import * as reactMoment from "react-moment";
 import Grid from "@mui/material/Grid";
@@ -42,6 +41,7 @@ import SecureComponent, {
   hasPermission,
 } from "../../../../common/SecureComponent/SecureComponent";
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
+import RBIconButton from "./SummaryItems/RBIconButton";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -213,17 +213,16 @@ const BucketLifecyclePanel = ({
             matchAll
             errorProps={{ disabled: true }}
           >
-            <Button
-              variant="contained"
-              color="primary"
-              endIcon={<AddIcon />}
-              size="medium"
+            <RBIconButton
+              tooltip={"Add Lifecycle Rule"}
               onClick={() => {
                 setAddLifecycleOpen(true);
               }}
-            >
-              Add Lifecycle Rule
-            </Button>
+              text={"Add Lifecycle Rule"}
+              icon={<AddIcon />}
+              color="primary"
+              variant={"contained"}
+            />
           </SecureComponent>
         </Grid>
         <Grid item xs={12}>

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
@@ -19,7 +19,6 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import AddIcon from "../../../../icons/AddIcon";
 import BucketsIcon from "../../../../icons/BucketsIcon";
@@ -47,6 +46,7 @@ import SecureComponent, {
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 
 import withSuspense from "../../Common/Components/withSuspense";
+import RBIconButton from "./SummaryItems/RBIconButton";
 
 const AddReplicationModal = withSuspense(
   React.lazy(() => import("./AddReplicationModal"))
@@ -190,17 +190,16 @@ const BucketReplicationPanel = ({
             matchAll
             errorProps={{ disabled: true }}
           >
-            <Button
-              variant="contained"
-              color="primary"
-              endIcon={<AddIcon />}
-              size="medium"
+            <RBIconButton
+              tooltip={"Add Replication Rule"}
               onClick={() => {
                 setOpenReplicationOpen(true);
               }}
-            >
-              Add Replication Rule
-            </Button>
+              text={"Add Replication Rule"}
+              icon={<AddIcon />}
+              color="primary"
+              variant={"contained"}
+            />
           </SecureComponent>
         </Grid>
         <Grid item xs={12}>

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx
@@ -16,10 +16,9 @@
 
 import React from "react";
 import BoxIconButton from "../../../Common/BoxIconButton/BoxIconButton";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import { IconButtonProps } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
+import { Theme } from "@mui/material/styles";
 
 type DeleteButtonProps = {
   onClick: (e: any) => void;
@@ -32,29 +31,57 @@ type DeleteButtonProps = {
   [x: string]: any;
 };
 
-const styles = (theme: Theme) =>
-  createStyles({
+type RBIconProps = Partial<IconButtonProps> & DeleteButtonProps;
+
+const useStyles = makeStyles((theme: Theme) => {
+  const getButtonColor = (props: RBIconProps) => {
+    const { variant, color } = props;
+
+    let tgtColor = theme.palette.primary.main;
+
+    if (color === "primary" && variant === "contained") {
+      tgtColor = theme.palette.primary.contrastText;
+    } else if (color === "primary" && variant === "outlined") {
+      tgtColor = theme.palette.primary.main;
+    } else if (color === "secondary") {
+      tgtColor = theme.palette.secondary.main;
+    }
+
+    return tgtColor;
+  };
+
+  return {
     root: {
-      "& .min-icon": {
+      padding: "7px",
+      color: (props: RBIconProps) => getButtonColor(props),
+      borderColor: (props: RBIconProps) =>
+        props.color === "secondary"
+          ? theme.palette.secondary.main
+          : theme.palette.primary.main,
+      "& svg.min-icon": {
         width: 12,
-        marginLeft: "5px",
+        marginLeft: (props: RBIconProps) => (props.text ? "5px" : "0px"),
         "@media (max-width: 900px)": {
           width: 16,
-          marginLeft: 0,
+          marginLeft: "0px !important",
         },
       },
     },
-  });
+  };
+});
+
+const RBIconButton = (props: RBIconProps) => {
+  const classes = useStyles(props);
+
+  const {
+    onClick,
+    text = "",
+    disabled = false,
+    tooltip,
+    icon = null,
+    ...restProps
+  } = props;
 
-const RBIconButton = ({
-  onClick,
-  text = "",
-  disabled = false,
-  tooltip,
-  classes,
-  icon = null,
-  ...restProps
-}: Partial<IconButtonProps> & DeleteButtonProps) => {
   return (
     <BoxIconButton
       classes={classes}
@@ -79,4 +106,4 @@ const RBIconButton = ({
     </BoxIconButton>
   );
 };
-export default withStyles(styles)(RBIconButton);
+export default RBIconButton;
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
@@ -25,7 +25,7 @@ import {
   TotalObjectsIcon,
 } from "../../../../icons";
 import { Bucket } from "../types";
-import { Box, Button, Grid, Typography } from "@mui/material";
+import { Box, Grid, Typography } from "@mui/material";
 import { niceBytes, prettyNumber } from "../../../../common/utils";
 import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
 import { Link } from "react-router-dom";
@@ -34,6 +34,7 @@ import {
   IAM_ROLES,
 } from "../../../../common/SecureComponent/permissions";
 import SecureComponent from "../../../../common/SecureComponent/SecureComponent";
+import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -244,26 +245,28 @@ const BucketListItem = ({
                 to={`/buckets/${bucket.name}/admin`}
                 style={{ textDecoration: "none" }}
               >
-                <Button
+                <RBIconButton
+                  tooltip={"Manage"}
+                  onClick={() => {}}
+                  text={"Manage"}
+                  icon={<SettingsIcon />}
+                  color={"primary"}
                   variant={"outlined"}
-                  endIcon={<SettingsIcon />}
-                  className={classes.manageButton}
-                >
-                  Manage
-                </Button>
+                />
               </Link>
             </SecureComponent>
             <Link
               to={`/buckets/${bucket.name}/browse`}
               style={{ textDecoration: "none" }}
             >
-              <Button
-                variant="contained"
-                endIcon={<ArrowRightIcon />}
-                className={classes.viewButton}
-              >
-                Browse
-              </Button>
+              <RBIconButton
+                tooltip={"Browse"}
+                onClick={() => {}}
+                text={"Browse"}
+                icon={<ArrowRightIcon />}
+                color={"primary"}
+                variant={"contained"}
+              />
             </Link>
             <Box display={{ xs: "none", sm: "block" }}>
               <div style={{ marginBottom: 10 }} />