UX Button for page actions (#1392)

Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
2022-01-13 19:55:30 +00:00
parent 5745137a34
commit dcfc74ad0b
27 changed files with 492 additions and 522 deletions
--- 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>
--- 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}>
--- 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
--- 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}>
--- 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}>
--- 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}>
--- 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;
--- 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 }} />
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.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, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import { Bucket, BucketList } from "../types";
 import { AddIcon, BucketsIcon } from "../../../../icons";
@@ -37,7 +37,6 @@ import BucketListItem from "./BucketListItem";
 import BulkReplicationModal from "./BulkReplicationModal";
 import HelpBox from "../../../../common/HelpBox";
 import { ISessionResponse } from "../../types";
-import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton";
 import RefreshIcon from "../../../../icons/RefreshIcon";
 import AButton from "../../Common/AButton/AButton";
 import MultipleBucketsIcon from "../../../../icons/MultipleBucketsIcon";
@@ -50,6 +49,7 @@ import {
 import PageLayout from "../../Common/Layout/PageLayout";
 import SearchBox from "../../Common/SearchBox";
 import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList";
+import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";

 const styles = (theme: Theme) =>
  createStyles({
@@ -226,55 +226,55 @@ const ListBuckets = ({
            alignItems={"center"}
            justifyContent={"flex-end"}
          >
-            <BoxIconButton
-              variant={bulkSelect ? "contained" : "outlined"}
-              tooltip={"Select Multiple"}
+            <RBIconButton
+              tooltip={bulkSelect ? "Un Select All" : "Select Multiple"}
              onClick={() => {
                setBulkSelect(!bulkSelect);
              }}
-              size={"small"}
-              className={classes.bulkSelect}
-            >
-              <SelectMultipleIcon />
-            </BoxIconButton>
-            <BoxIconButton
-              variant="outlined"
+              text={""}
+              icon={<SelectMultipleIcon />}
+              color={"primary"}
+              variant={bulkSelect ? "contained" : "outlined"}
+            />
+
+            <RBIconButton
              tooltip={"Set Replication"}
              onClick={() => {
                setReplicationModalOpen(true);
              }}
+              text={""}
+              icon={<MultipleBucketsIcon />}
              disabled={selectedBuckets.length === 0}
-              size={"small"}
-            >
-              <MultipleBucketsIcon />
-            </BoxIconButton>
-            <BoxIconButton
-              color="primary"
-              aria-label="Refresh"
+              color={"primary"}
+              variant={"outlined"}
+            />
+
+            <RBIconButton
              tooltip={"Refresh"}
              onClick={() => {
                setLoading(true);
              }}
-              size="large"
-            >
-              <RefreshIcon />
-            </BoxIconButton>
+              text={""}
+              icon={<RefreshIcon />}
+              color={"primary"}
+              variant={"outlined"}
+            />
+
            <SecureComponent
              scopes={[IAM_SCOPES.S3_CREATE_BUCKET]}
              resource={CONSOLE_UI_RESOURCE}
              errorProps={{ disabled: true }}
            >
-              <Button
-                variant="contained"
-                color="primary"
-                endIcon={<AddIcon />}
+              <RBIconButton
+                tooltip={"Create Bucket"}
                onClick={() => {
                  history.push("/add-bucket");
                }}
-                className={classes.addBucket}
-              >
-                Create Bucket
-              </Button>
+                text={"Create Bucket"}
+                icon={<AddIcon />}
+                color={"primary"}
+                variant={"contained"}
+              />
            </SecureComponent>
          </Grid>
        </Grid>
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -54,7 +54,7 @@ import {
  searchField,
  tableStyles,
 } from "../../../../Common/FormComponents/common/styleLibrary";
-import { Badge, Button, Typography } from "@mui/material";
+import { Badge, Typography } from "@mui/material";
 import * as reactMoment from "react-moment";
 import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs";
 import {
@@ -80,7 +80,6 @@ import ScreenTitle from "../../../../Common/ScreenTitle/ScreenTitle";
 import { setBucketDetailsLoad, setBucketInfo } from "../../../actions";
 import { AppState } from "../../../../../../store";
 import PageLayout from "../../../../Common/Layout/PageLayout";
-import BoxIconButton from "../../../../Common/BoxIconButton/BoxIconButton";

 import { IAM_SCOPES } from "../../../../../../common/SecureComponent/permissions";
 import SecureComponent, {
@@ -91,6 +90,7 @@ import SearchBox from "../../../../Common/SearchBox";
 import withSuspense from "../../../../Common/Components/withSuspense";
 import { displayName } from "./utils";
 import { DownloadIcon, UploadFolderIcon } from "../../../../../../icons";
+import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";

 const AddFolderIcon = React.lazy(
  () => import("../../../../../../icons/AddFolderIcon")
@@ -1159,44 +1159,41 @@ const ListObjects = ({
                  scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
                  errorProps={{ disabled: true }}
                >
-                  <BoxIconButton
+                  <RBIconButton
                    tooltip={"Choose or create a new path"}
-                    color="primary"
-                    aria-label="Add a new folder"
                    onClick={() => {
                      setCreateFolderOpen(true);
                    }}
+                    text={""}
+                    icon={<AddFolderIcon />}
+                    color="primary"
                    disabled={rewindEnabled}
-                    size="large"
-                  >
-                    <AddFolderIcon />
-                  </BoxIconButton>
+                    variant={"outlined"}
+                  />
                </SecureComponent>
                <SecureComponent
                  resource={bucketName}
                  scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
                  errorProps={{ disabled: true }}
                >
-                  <BoxIconButton
+                  <RBIconButton
                    tooltip={"Upload file"}
-                    color="primary"
-                    aria-label="Upload File"
                    onClick={() => {
                      if (fileUpload && fileUpload.current) {
                        fileUpload.current.click();
                      }
                    }}
+                    text={""}
+                    icon={<UploadIcon />}
+                    color="primary"
                    disabled={rewindEnabled}
-                    size="large"
-                  >
-                    <UploadIcon />
-                  </BoxIconButton>
+                    variant={"outlined"}
+                  />
                </SecureComponent>
                <input
                  type="file"
                  multiple
                  onChange={handleUploadButton}
-                  id="file-input"
                  style={{ display: "none" }}
                  ref={fileUpload}
                />
@@ -1205,37 +1202,28 @@ const ListObjects = ({
                  scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
                  errorProps={{ disabled: true }}
                >
-                  <BoxIconButton
+                  <RBIconButton
                    tooltip={"Upload folder"}
-                    color="primary"
-                    aria-label="Upload Folder"
                    onClick={() => {
                      if (folderUpload && folderUpload.current) {
                        folderUpload.current.click();
                      }
                    }}
+                    text={""}
+                    icon={<UploadFolderIcon />}
+                    color="primary"
                    disabled={rewindEnabled}
-                    size="large"
-                  >
-                    <UploadFolderIcon />
-                  </BoxIconButton>
+                    variant={"outlined"}
+                  />
                  <input
                    type="file"
                    multiple
                    onChange={handleUploadButton}
-                    id="file-input"
                    style={{ display: "none" }}
                    ref={folderUpload}
                  />
                </SecureComponent>
-                <input
-                  type="file"
-                  multiple
-                  onChange={handleUploadButton}
-                  id="file-input"
-                  style={{ display: "none" }}
-                  ref={folderUpload}
-                />
+
                <SecureComponent
                  resource={bucketName}
                  scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
@@ -1248,18 +1236,17 @@ const ListObjects = ({
                    invisible={!rewindEnabled}
                    className={classes.badgeOverlap}
                  >
-                    <BoxIconButton
+                    <RBIconButton
                      tooltip={"Rewind"}
-                      color="primary"
-                      aria-label="Rewind"
                      onClick={() => {
                        setRewindSelect(true);
                      }}
+                      text={""}
+                      icon={<HistoryIcon />}
+                      color="primary"
                      disabled={!isVersioned}
-                      size="large"
-                    >
-                      <HistoryIcon />
-                    </BoxIconButton>
+                      variant={"outlined"}
+                    />
                  </Badge>
                </SecureComponent>
                <SecureComponent
@@ -1267,19 +1254,17 @@ const ListObjects = ({
                  resource={bucketName}
                  errorProps={{ disabled: true }}
                >
-                  <BoxIconButton
+                  <RBIconButton
                    tooltip={"Refresh list"}
-                    color="primary"
-                    aria-label="Refresh List"
                    onClick={() => {
                      setLoading(true);
                    }}
+                    text={""}
+                    icon={<RefreshIcon />}
+                    color="primary"
                    disabled={rewindEnabled}
-                    size="large"
                    variant={"contained"}
-                  >
-                    <RefreshIcon />
-                  </BoxIconButton>
+                  />
                </SecureComponent>
              </Fragment>
            }
@@ -1298,32 +1283,32 @@ const ListObjects = ({
            />
          </SecureComponent>
          <div>
-            <Button
-              variant="contained"
-              color="primary"
-              endIcon={<DownloadIcon />}
-              onClick={downloadSelected}
-              disabled={selectedObjects.length === 0}
-            >
-              Download Selected
-            </Button>
            <SecureComponent
              scopes={[IAM_SCOPES.S3_DELETE_OBJECT]}
              resource={bucketName}
              errorProps={{ disabled: true }}
            >
-              <Button
-                variant="contained"
-                color="primary"
-                endIcon={<DeleteIcon />}
+              <RBIconButton
+                tooltip={"Delete Selected"}
                onClick={() => {
                  setDeleteMultipleOpen(true);
                }}
+                text={"Delete Selected"}
+                icon={<DeleteIcon />}
+                color="secondary"
                disabled={selectedObjects.length === 0}
-              >
-                Delete Selected
-              </Button>
+                variant={"outlined"}
+              />
            </SecureComponent>
+            <RBIconButton
+              tooltip={"Download Selected"}
+              onClick={downloadSelected}
+              text={"Download Selected"}
+              icon={<DownloadIcon />}
+              color="primary"
+              disabled={selectedObjects.length === 0}
+              variant={"contained"}
+            />
          </div>
        </Grid>
        <Grid item xs={12}>
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
@@ -74,13 +74,13 @@ import PreviewFileContent from "../Preview/PreviewFileContent";
 import RestoreFileVersion from "./RestoreFileVersion";
 import PageLayout from "../../../../Common/Layout/PageLayout";
 import VerticalTabs from "../../../../Common/VerticalTabs/VerticalTabs";
-import BoxIconButton from "../../../../Common/BoxIconButton/BoxIconButton";
 import SecureComponent from "../../../../../../common/SecureComponent/SecureComponent";
 import {
  completeObject,
  setNewObject,
  updateProgress,
 } from "../../../../ObjectBrowser/actions";
+import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";

 const RecoverIcon = React.lazy(
  () => import("../../../../../../icons/RecoverIcon")
@@ -551,18 +551,36 @@ const ObjectDetails = ({
                }
                actions={
                  <Fragment>
-                    <BoxIconButton
+                    <SecureComponent
+                      scopes={[IAM_SCOPES.S3_DELETE_OBJECT]}
+                      resource={bucketName}
+                      matchAll
+                      errorProps={{ disabled: true }}
+                    >
+                      <RBIconButton
+                        tooltip={"Delete Object"}
+                        onClick={() => {
+                          setDeleteOpen(true);
+                        }}
+                        text={""}
+                        icon={<DeleteIcon />}
+                        color="secondary"
+                        disabled={actualInfo.is_delete_marker}
+                        variant={"outlined"}
+                      />
+                    </SecureComponent>
+
+                    <RBIconButton
                      tooltip={"Share"}
-                      color="primary"
-                      aria-label="share"
                      onClick={() => {
                        shareObject();
                      }}
+                      text={""}
+                      icon={<ShareIcon />}
+                      color="primary"
                      disabled={actualInfo.is_delete_marker}
-                      size="large"
-                    >
-                      <ShareIcon />
-                    </BoxIconButton>
+                      variant={"outlined"}
+                    />

                    {downloadingFiles.includes(
                      `${bucketName}/${actualInfo.name}`
@@ -575,38 +593,18 @@ const ObjectDetails = ({
                        />
                      </div>
                    ) : (
-                      <BoxIconButton
+                      <RBIconButton
                        tooltip={"Download"}
+                        text={""}
+                        icon={<DownloadIcon />}
                        color="primary"
-                        aria-label="download"
                        onClick={() => {
                          downloadObject(actualInfo);
                        }}
                        disabled={actualInfo.is_delete_marker}
-                        size="large"
-                      >
-                        <DownloadIcon />
-                      </BoxIconButton>
+                        variant={"outlined"}
+                      />
                    )}
-                    <SecureComponent
-                      scopes={[IAM_SCOPES.S3_DELETE_OBJECT]}
-                      resource={bucketName}
-                      matchAll
-                      errorProps={{ disabled: true }}
-                    >
-                      <BoxIconButton
-                        tooltip={"Delete Object"}
-                        color="primary"
-                        aria-label="delete"
-                        onClick={() => {
-                          setDeleteOpen(true);
-                        }}
-                        disabled={actualInfo.is_delete_marker}
-                        size="large"
-                      >
-                        <DeleteIcon />
-                      </BoxIconButton>
-                    </SecureComponent>
                  </Fragment>
                }
              />
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -20,7 +20,7 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import { AddIcon, GroupsIcon, UsersIcon } from "../../../icons";
 import { setErrorSnackMessage } from "../../../actions";
 import { GroupsList } from "./types";
@@ -49,6 +49,7 @@ import SecureComponent, {
 } from "../../../common/SecureComponent/SecureComponent";

 import withSuspense from "../Common/Components/withSuspense";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";

 const DeleteGroup = withSuspense(React.lazy(() => import("./DeleteGroup")));
 const AddGroup = withSuspense(React.lazy(() => import("../Groups/AddGroup")));
@@ -221,17 +222,17 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => {
            matchAll
            errorProps={{ disabled: true }}
          >
-            <Button
+            <RBIconButton
+              tooltip={"Create Group"}
+              text={"Create Group"}
              variant="contained"
              color="primary"
-              endIcon={<AddIcon />}
+              icon={<AddIcon />}
              onClick={() => {
                setSelectedGroup(null);
                setGroupOpen(true);
              }}
-            >
-              Create Group
-            </Button>
+            />
          </SecureComponent>
        </Grid>
        {loading && <LinearProgress />}
--- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
@@ -15,9 +15,14 @@ import {
 } from "../../../actions";
 import { connect } from "react-redux";
 import withStyles from "@mui/styles/withStyles";
-import { Button, Grid, Tooltip } from "@mui/material";
+import { Grid } from "@mui/material";
 import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
-import { IAMPoliciesIcon, TrashIcon, GroupsIcon } from "../../../icons";
+import {
+  IAMPoliciesIcon,
+  TrashIcon,
+  GroupsIcon,
+  AddIcon,
+} from "../../../icons";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import history from "../../../history";
 import api from "../../../common/api";
@@ -30,7 +35,6 @@ import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSw
 import PageLayout from "../Common/Layout/PageLayout";
 import BackLink from "../../../common/BackLink";
 import PanelTitle from "../Common/PanelTitle/PanelTitle";
-import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
 import SearchBox from "../Common/SearchBox";
 import {
  CONSOLE_UI_RESOURCE,
@@ -40,6 +44,7 @@ import SecureComponent, {
  hasPermission,
 } from "../../../common/SecureComponent/SecureComponent";
 import GroupDetailsHeader from "./GroupDetailsHeader";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";

 const styles = (theme: Theme) =>
  createStyles({
@@ -191,17 +196,16 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
          scopes={[IAM_SCOPES.ADMIN_ADD_USER_TO_GROUP]}
          errorProps={{ disabled: true }}
        >
-          <Button
+          <RBIconButton
+            tooltip={memberActionText}
+            text={memberActionText}
            variant="contained"
            color="primary"
-            endIcon={<GroupsIcon />}
-            size="medium"
+            icon={<AddIcon />}
            onClick={() => {
              setUsersOpen(true);
            }}
-          >
-            {memberActionText}
-          </Button>
+          />
        </SecureComponent>
      </div>

@@ -236,17 +240,17 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
    <React.Fragment>
      <div className={classes.actionsTray}>
        <PanelTitle>Policies</PanelTitle>
-        <Button
+
+        <RBIconButton
+          tooltip={`Set Policies`}
+          text={`Set Policies`}
          variant="contained"
          color="primary"
-          endIcon={<IAMPoliciesIcon />}
-          size="medium"
+          icon={<IAMPoliciesIcon />}
          onClick={() => {
            setPolicyOpen(true);
          }}
-        >
-          Set Policies
-        </Button>
+        />
      </div>
      <div className={classes.tableBlock}>
        <TableWrapper
@@ -315,20 +319,18 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
                  scopes={[IAM_SCOPES.ADMIN_REMOVE_USER_FROM_GROUP]}
                  errorProps={{ disabled: true }}
                >
-                  <Tooltip title="Delete Group">
-                    <div className={classes.spacerLeft}>
-                      <BoxIconButton
-                        color="primary"
-                        aria-label="Delete Group"
-                        onClick={() => {
-                          setDeleteOpen(true);
-                        }}
-                        size="large"
-                      >
-                        <TrashIcon />
-                      </BoxIconButton>
-                    </div>
-                  </Tooltip>
+                  <div className={classes.spacerLeft}>
+                    <RBIconButton
+                      tooltip={`Delete Group`}
+                      text={``}
+                      variant="outlined"
+                      color="secondary"
+                      icon={<TrashIcon />}
+                      onClick={() => {
+                        setDeleteOpen(true);
+                      }}
+                    />
+                  </div>
                </SecureComponent>
              </Fragment>
            }
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
@@ -23,7 +23,6 @@ import { LinearProgress } from "@mui/material";
 import { red } from "@mui/material/colors";
 import Grid from "@mui/material/Grid";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
-import Button from "@mui/material/Button";
 import {
  NotificationEndpointItem,
  NotificationEndpointsList,
@@ -45,10 +44,10 @@ import api from "../../../common/api";
 import RefreshIcon from "../../../icons/RefreshIcon";
 import history from "../../../history";
 import HelpBox from "../../../common/HelpBox";
-import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
 import AButton from "../Common/AButton/AButton";
 import PageLayout from "../Common/Layout/PageLayout";
 import SearchBox from "../Common/SearchBox";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";

 interface IListNotificationEndpoints {
  classes: any;
@@ -68,6 +67,7 @@ const styles = (theme: Theme) =>
    },
    rightActionItems: {
      display: "flex",
+      alignItems: "center",
      "& button": {
        whiteSpace: "nowrap",
      },
@@ -148,26 +148,27 @@ const ListNotificationEndpoints = ({
            overrideClass={classes.searchField}
          />
          <div className={classes.rightActionItems}>
-            <BoxIconButton
+            <RBIconButton
+              tooltip={"Refresh List"}
+              text={"Refresh"}
+              variant="outlined"
              color="primary"
-              aria-label="Refresh List"
+              icon={<RefreshIcon />}
              onClick={() => {
                setIsLoading(true);
              }}
-              size="large"
-            >
-              <RefreshIcon />
-            </BoxIconButton>
-            <Button
+            />
+
+            <RBIconButton
+              tooltip={"Add Notification Target"}
+              text={" Add Notification Target"}
              variant="contained"
              color="primary"
-              endIcon={<AddIcon />}
+              icon={<AddIcon />}
              onClick={() => {
                history.push("/notification-endpoints/add");
              }}
-            >
-              Add Notification Target
-            </Button>
+            />
          </div>
        </Grid>
        {isLoading && <LinearProgress />}
--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -20,7 +20,6 @@ import get from "lodash/get";
 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 { Policy, PolicyList } from "./types";
 import { AddIcon, IAMPoliciesIcon } from "../../../icons";
@@ -49,6 +48,7 @@ import SecureComponent, {
 import SearchBox from "../Common/SearchBox";

 import withSuspense from "../Common/Components/withSuspense";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";

 const AddPolicy = withSuspense(React.lazy(() => import("./AddPolicy")));
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
@@ -208,17 +208,17 @@ const ListPolicies = ({ classes, setErrorSnackMessage }: IPoliciesProps) => {
            resource={CONSOLE_UI_RESOURCE}
            errorProps={{ disabled: true }}
          >
-            <Button
+            <RBIconButton
+              tooltip={"Create Policy"}
+              text={"Create Policy"}
              variant="contained"
              color="primary"
-              endIcon={<AddIcon />}
+              icon={<AddIcon />}
              onClick={() => {
                setAddScreenOpen(true);
                setPolicyEdit(null);
              }}
-            >
-              Create Policy
-            </Button>
+            />
          </SecureComponent>
        </Grid>
        <Grid item xs={12}>
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -46,7 +46,6 @@ import TrashIcon from "../../../icons/TrashIcon";
 import PageLayout from "../Common/Layout/PageLayout";
 import VerticalTabs from "../Common/VerticalTabs/VerticalTabs";
 import BackLink from "../../../common/BackLink";
-import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
 import {
  CONSOLE_UI_RESOURCE,
  IAM_SCOPES,
@@ -57,6 +56,7 @@ import SecureComponent, {

 import withSuspense from "../Common/Components/withSuspense";
 import { AppState } from "../../../store";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";

 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));

@@ -355,29 +355,28 @@ const PolicyDetails = ({
                  resource={CONSOLE_UI_RESOURCE}
                  errorProps={{ disabled: true }}
                >
-                  <BoxIconButton
+                  <RBIconButton
                    tooltip={"Delete Policy"}
-                    color="primary"
-                    aria-label="Delete Policy"
+                    text={"Delete Policy"}
+                    variant="outlined"
+                    color="secondary"
+                    icon={<TrashIcon />}
                    onClick={deletePolicy}
-                  >
-                    <TrashIcon />
-                  </BoxIconButton>
+                  />
                </SecureComponent>

-                <BoxIconButton
+                <RBIconButton
                  tooltip={"Refresh"}
+                  text={"Refresh"}
+                  variant="outlined"
                  color="primary"
-                  aria-label="Refresh List"
+                  icon={<RefreshIcon />}
                  onClick={() => {
                    setLoadingUsers(true);
                    setLoadingGroups(true);
                    setLoadingPolicy(true);
                  }}
-                  size="large"
-                >
-                  <RefreshIcon />
-                </BoxIconButton>
+                />
              </Fragment>
            }
          />
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -17,9 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Grid from "@mui/material/Grid";
-import TextField from "@mui/material/TextField";
-import InputAdornment from "@mui/material/InputAdornment";
-import { Box, Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -37,15 +35,16 @@ import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
 import history from "../../../../history";
 import RefreshIcon from "../../../../icons/RefreshIcon";
-import SearchIcon from "../../../../icons/SearchIcon";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import TenantListItem from "./TenantListItem";
 import HelpBox from "../../../../common/HelpBox";
-import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton";
 import AButton from "../../Common/AButton/AButton";

 import withSuspense from "../../Common/Components/withSuspense";
 import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
+import SearchBox from "../../Common/SearchBox";
+import PageLayout from "../../Common/Layout/PageLayout";

 const CredentialsPrompt = withSuspense(
  React.lazy(() => import("../../Common/CredentialsPrompt/CredentialsPrompt"))
@@ -99,6 +98,11 @@ const styles = (theme: Theme) =>
      marginTop: 25,
      height: "calc(100vh - 195px)",
    },
+    searchField: {
+      ...searchField.searchField,
+      marginRight: "auto",
+      maxWidth: 380,
+    },
  });

 const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
@@ -188,141 +192,91 @@ const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
      <PageHeader
        label="Tenants"
        actions={
-          <Fragment>
-            <Grid
-              container
-              direction="row"
-              justifyContent="flex-end"
-              alignItems="center"
-              className={classes.actionHeaderItems}
-            >
-              <Box display={{ xs: "none", sm: "none", md: "block" }}>
-                <Grid item>
-                  <div className={classes.theaderSearchLabel}>
-                    Filter Tenants:
-                  </div>
-                </Grid>
-              </Box>
-              <Box display={{ xs: "block", sm: "block", md: "none" }}>
-                <TextField
-                  className={classes.theaderSearch}
-                  variant={"outlined"}
-                  id="search-resource"
-                  placeholder={"Filter Tenants"}
-                  onChange={(val) => {
-                    setFilterTenants(val.target.value);
-                  }}
-                  inputProps={{
-                    disableUnderline: true,
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <SearchIcon />
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-              </Box>
-              <Box display={{ xs: "none", sm: "none", md: "block" }}>
-                <TextField
-                  className={classes.theaderSearch}
-                  variant={"outlined"}
-                  id="search-resource"
-                  onChange={(val) => {
-                    setFilterTenants(val.target.value);
-                  }}
-                  inputProps={{
-                    disableUnderline: true,
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <SearchIcon />
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-              </Box>
+          <Grid
+            item
+            xs={12}
+            className={classes.actionsTray}
+            marginRight={"30px"}
+          >
+            <SearchBox
+              placeholder={"Filter Tenants"}
+              onChange={(val) => {
+                setFilterTenants(val);
+              }}
+              overrideClass={classes.searchField}
+            />

-              <Grid item>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  endIcon={<AddIcon />}
-                  onClick={() => {
-                    history.push("/tenants/add");
-                  }}
-                  className={classes.addTenant}
-                >
-                  Create Tenant
-                </Button>
-              </Grid>
-            </Grid>
-          </Fragment>
+            <RBIconButton
+              tooltip={"Refresh Tenant List"}
+              text={""}
+              onClick={() => {
+                setIsLoading(true);
+              }}
+              icon={<RefreshIcon />}
+              color="primary"
+              variant={"outlined"}
+            />
+            <RBIconButton
+              tooltip={"Create Tenant"}
+              text={"Create Tenant"}
+              onClick={() => {
+                history.push("/tenants/add");
+              }}
+              icon={<AddIcon />}
+              color="primary"
+              variant={"contained"}
+            />
+          </Grid>
        }
      />
-      <Grid container>
-        <Grid item xs={12} className={classes.container}>
-          <Grid container>
-            <Grid item xs={12} className={classes.mainActions}>
-              <BoxIconButton
-                color="primary"
-                aria-label="Refresh Tenant List"
-                onClick={() => {
-                  setIsLoading(true);
-                }}
-                size="large"
-              >
-                <RefreshIcon />
-              </BoxIconButton>
-            </Grid>
-
-            <Grid item xs={12} className={classes.tenantsList}>
-              {isLoading && <LinearProgress />}
-              {!isLoading && (
-                <Fragment>
-                  {filteredRecords.length !== 0 && (
-                    <VirtualizedList
-                      rowRenderFunction={renderItemLine}
-                      totalItems={filteredRecords.length}
-                    />
-                  )}
-                  {filteredRecords.length === 0 && (
-                    <Grid
-                      container
-                      justifyContent={"center"}
-                      alignContent={"center"}
-                      alignItems={"center"}
-                    >
-                      <Grid item xs={8}>
-                        <HelpBox
-                          iconComponent={<TenantsIcon />}
-                          title={"Tenants"}
-                          help={
-                            <Fragment>
-                              Tenant is the logical structure to represent a
-                              MinIO deployment. A tenant can have different size
-                              and configurations from other tenants, even a
-                              different storage class.
-                              <br />
-                              <br />
-                              To get started,&nbsp;
-                              <AButton
-                                onClick={() => {
-                                  history.push("/tenants/add");
-                                }}
-                              >
-                                Create a Tenant.
-                              </AButton>
-                            </Fragment>
-                          }
-                        />
-                      </Grid>
-                    </Grid>
-                  )}
-                </Fragment>
+      <PageLayout>
+        <Grid item xs={12} className={classes.tenantsList}>
+          {isLoading && <LinearProgress />}
+          {!isLoading && (
+            <Fragment>
+              {filteredRecords.length !== 0 && (
+                <VirtualizedList
+                  rowRenderFunction={renderItemLine}
+                  totalItems={filteredRecords.length}
+                />
              )}
-            </Grid>
-          </Grid>
+              {filteredRecords.length === 0 && (
+                <Grid
+                  container
+                  justifyContent={"center"}
+                  alignContent={"center"}
+                  alignItems={"center"}
+                >
+                  <Grid item xs={8}>
+                    <HelpBox
+                      iconComponent={<TenantsIcon />}
+                      title={"Tenants"}
+                      help={
+                        <Fragment>
+                          Tenant is the logical structure to represent a MinIO
+                          deployment. A tenant can have different size and
+                          configurations from other tenants, even a different
+                          storage class.
+                          <br />
+                          <br />
+                          To get started,&nbsp;
+                          <AButton
+                            onClick={() => {
+                              history.push("/tenants/add");
+                            }}
+                          >
+                            Create a Tenant.
+                          </AButton>
+                        </Fragment>
+                      }
+                    />
+                  </Grid>
+                </Grid>
+              )}
+            </Fragment>
+          )}
        </Grid>
-      </Grid>
+      </PageLayout>
    </Fragment>
  );
 };
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx
@@ -15,12 +15,11 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import React, { Fragment } from "react";
-import { Button } from "@mui/material";
 import { ITenant, ValueUnit } from "./types";
 import { connect } from "react-redux";
 import { setErrorSnackMessage } from "../../../../actions";
 import Grid from "@mui/material/Grid";
-import { ArrowRightIcon, CircleIcon } from "../../../../icons";
+import { ArrowRightIcon, CircleIcon, SettingsIcon } from "../../../../icons";
 import history from "../../../../history";
 import TenantsIcon from "../../../../icons/TenantsIcon";
 import { Theme } from "@mui/material/styles";
@@ -29,6 +28,7 @@ import withStyles from "@mui/styles/withStyles";
 import { niceBytes } from "../../../../common/utils";
 import UsageBarWrapper from "../../Common/UsageBarWrapper/UsageBarWrapper";
 import { tenantIsOnline } from "./utils";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";

 const styles = (theme: Theme) =>
  createStyles({
@@ -176,31 +176,32 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => {
            </div>
          </Grid>
          <Grid item xs={4} textAlign={"end"}>
-            <Button
-              size={"small"}
-              color={"primary"}
-              variant="outlined"
+            <RBIconButton
+              tooltip={"Manage Tenant"}
+              text={"Manage"}
              disabled={!tenantIsOnline(tenant)}
-              className={classes.manageButton}
              onClick={() => {
                history.push(
                  `/namespaces/${tenant.namespace}/tenants/${tenant.name}/hop`
                );
              }}
-            >
-              Manage
-            </Button>
-            <Button
-              endIcon={<ArrowRightIcon />}
-              variant="contained"
+              icon={<SettingsIcon />}
+              color="primary"
+              variant={"outlined"}
+            />
+            <RBIconButton
+              tooltip={"View Tenant"}
+              text={"View"}
+              disabled={!tenantIsOnline(tenant)}
              onClick={() => {
                history.push(
                  `/namespaces/${tenant.namespace}/tenants/${tenant.name}`
                );
              }}
-            >
-              View
-            </Button>
+              icon={<ArrowRightIcon />}
+              color="primary"
+              variant={"contained"}
+            />
          </Grid>
          <Grid item xs={12}>
            <hr />
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
@@ -25,7 +25,7 @@ import {
  tableStyles,
  tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { Button, TextField } from "@mui/material";
+import { TextField } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import { AddIcon } from "../../../../icons";
 import { IPool, ITenant } from "../ListTenants/types";
@@ -36,6 +36,7 @@ import InputAdornment from "@mui/material/InputAdornment";
 import { AppState } from "../../../../store";
 import { setTenantDetailsLoad } from "../actions";
 import SearchIcon from "../../../../icons/SearchIcon";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";

 interface IPoolsSummary {
  classes: any;
@@ -117,16 +118,17 @@ const PoolsSummary = ({
            }}
            variant="standard"
          />
-          <Button
-            variant="contained"
-            color="primary"
-            endIcon={<AddIcon />}
+
+          <RBIconButton
+            tooltip={"Expand Tenant"}
+            text={"Expand Tenant"}
            onClick={() => {
              setAddPool(true);
            }}
-          >
-            Expand Tenant
-          </Button>
+            icon={<AddIcon />}
+            color="primary"
+            variant={"contained"}
+          />
        </Grid>
        <Grid item xs={12}>
          <br />
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx
@@ -20,13 +20,14 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
-import { Button, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import { niceBytes } from "../../../../common/utils";
 import Moment from "react-moment";
 import { Link } from "react-router-dom";
 import Paper from "@mui/material/Paper";
 import { ITenant } from "../ListTenants/types";
 import { LicenseInfo } from "../../License/types";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";

 interface ISubnetLicenseTenant {
  classes: any;
@@ -229,25 +230,24 @@ const SubnetLicenseTenant = ({
                }}
                className={classes.noUnderLine}
              >
-                <Button
-                  className={classes.licenseButton}
-                  variant="contained"
+                <RBIconButton
+                  tooltip={"Activate Product"}
+                  text={"Activate Product"}
+                  onClick={() => false}
                  color="primary"
-                >
-                  Activate Product
-                </Button>
+                  variant={"contained"}
+                />
              </Link>
            )}
            {licenseInfo && tenant && (
-              <Button
+              <RBIconButton
                disabled={loadingActivateProduct}
-                className={classes.licenseButton}
-                variant="contained"
-                color="primary"
+                tooltip={"Attach License"}
+                text={"Attach License"}
                onClick={() => activateProduct(tenant.namespace, tenant.name)}
-              >
-                Attach License
-              </Button>
+                color="primary"
+                variant={"contained"}
+              />
            )}
          </Grid>
        )
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLogging.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLogging.tsx
@@ -26,7 +26,7 @@ import {
  tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
 import Grid from "@mui/material/Grid";
-import { Button, CircularProgress, DialogContentText } from "@mui/material";
+import { CircularProgress, DialogContentText } from "@mui/material";
 import Paper from "@mui/material/Paper";
 import api from "../../../../common/api";
 import { ITenant } from "../ListTenants/types";
@@ -39,6 +39,7 @@ import KeyPairView from "./KeyPairView";
 import { ITenantLogsStruct } from "../ListTenants/types";
 import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";

 interface ITenantLogs {
  classes: any;
@@ -220,16 +221,16 @@ const TenantLogging = ({
          indicatorLabels={["Enabled", "Disabled"]}
        />
        {!disabled && !loadingTenantLogs && (
-          <Button
-            variant="contained"
-            color="primary"
-            startIcon={<EditIcon />}
+          <RBIconButton
+            tooltip={"Edit Logging configuration"}
+            text={"Edit"}
            onClick={() => {
              setEdit(true);
            }}
-          >
-            Edit
-          </Button>
+            icon={<EditIcon />}
+            color="primary"
+            variant={"contained"}
+          />
        )}
      </div>
      {!disabled && !loadingTenantLogs && (
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMonitoring.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMonitoring.tsx
@@ -26,7 +26,7 @@ import {
  searchField,
  tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { Button, CircularProgress, DialogContentText } from "@mui/material";
+import { CircularProgress, DialogContentText } from "@mui/material";
 import Paper from "@mui/material/Paper";
 import { ITenant } from "../ListTenants/types";
 import { setErrorSnackMessage } from "../../../../actions";
@@ -39,6 +39,7 @@ import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/For
 import { ITenantMonitoringStruct } from "../ListTenants/types";
 import KeyPairView from "./KeyPairView";
 import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";

 interface ITenantMonitoring {
  classes: any;
@@ -198,16 +199,16 @@ const TenantMonitoring = ({
          description=""
        />
        {prometheusMonitoringEnabled && (
-          <Button
-            variant="contained"
-            color="primary"
-            startIcon={<EditIcon />}
+          <RBIconButton
+            tooltip={"Edit Monitoring configuration"}
+            text={"Edit"}
            onClick={() => {
              setEdit(true);
            }}
-          >
-            Edit
-          </Button>
+            icon={<EditIcon />}
+            color="primary"
+            variant={"contained"}
+          />
        )}
      </div>
      {prometheusMonitoringEnabled && monitoringInfo !== undefined && (
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
@@ -24,7 +24,7 @@ import {
  containerForHeader,
  tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { Box, Button, Grid, Stack } from "@mui/material";
+import { Box, Grid, Stack } from "@mui/material";
 import Paper from "@mui/material/Paper";
 import { ITenant } from "../ListTenants/types";
 import UpdateTenantModal from "./UpdateTenantModal";
@@ -37,6 +37,8 @@ import SummaryUsageBar from "../../Common/UsageBarWrapper/SummaryUsageBar";
 import LabelValuePair from "../../Common/UsageBarWrapper/LabelValuePair";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import StackRow from "../../Common/UsageBarWrapper/StackRow";
+import { SettingsIcon } from "../../../../icons";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";

 interface ITenantsSummary {
  classes: any;
@@ -236,20 +238,19 @@ const TenantSummary = ({
          <h3>Details</h3>
        </StackItem>
        <StackItem>
-          <Button
-            size={"small"}
-            color={"primary"}
-            variant="contained"
-            style={{ textDecoration: "none !important" }}
+          <RBIconButton
+            tooltip={"Manage Tenant"}
+            text={"Manage Tenant"}
            onClick={() => {
              history.push(
                `/namespaces/${tenantNamespace}/tenants/${tenantName}/hop`
              );
            }}
            disabled={!tenant || !tenantIsOnline(tenant)}
-          >
-            Manage Tenant
-          </Button>
+            icon={<SettingsIcon />}
+            color="primary"
+            variant={"contained"}
+          />
        </StackItem>
      </Stack>

--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -20,11 +20,10 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import api from "../../../common/api";
-import { Button, Grid, LinearProgress } from "@mui/material";
-import GroupIcon from "@mui/icons-material/Group";
+import { Grid, LinearProgress } from "@mui/material";
 import { User, UsersList } from "./types";
 import { usersSort } from "../../../utils/sortFunctions";
-import { AddIcon, UsersIcon } from "../../../icons";
+import { GroupsIcon, AddIcon, UsersIcon } from "../../../icons";
 import {
  actionsTray,
  containerForHeader,
@@ -50,6 +49,7 @@ import {
 import SecureComponent, {
  hasPermission,
 } from "../../../common/SecureComponent/SecureComponent";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";

 const AddUser = withSuspense(React.lazy(() => import("./AddUser")));
 const SetPolicy = withSuspense(
@@ -249,19 +249,19 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
            resource={CONSOLE_UI_RESOURCE}
            errorProps={{ disabled: true }}
          >
-            <Button
-              variant="outlined"
+            <RBIconButton
+              tooltip={"Add to Group"}
+              text={"Add to Group"}
+              icon={<GroupsIcon />}
              color="primary"
-              endIcon={<GroupIcon />}
              disabled={checkedUsers.length <= 0}
              onClick={() => {
                if (checkedUsers.length > 0) {
                  setAddGroupOpen(true);
                }
              }}
-            >
-              Add to Group
-            </Button>
+              variant={"outlined"}
+            />
          </SecureComponent>
          <SecureComponent
            scopes={[
@@ -273,17 +273,17 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
            matchAll
            errorProps={{ disabled: true }}
          >
-            <Button
-              variant="contained"
+            <RBIconButton
+              tooltip={"Create User"}
+              text={"Create User"}
+              icon={<AddIcon />}
              color="primary"
-              endIcon={<AddIcon />}
              onClick={() => {
                setAddScreenOpen(true);
                setSelectedUser(null);
              }}
-            >
-              Create User
-            </Button>
+              variant={"contained"}
+            />
          </SecureComponent>
        </Grid>
        <Grid item xs={12}>
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -21,11 +21,11 @@ import { Link } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 import {
  AddIcon,
  IAMPoliciesIcon,
-  LockIcon,
+  PasswordKeyIcon,
  TrashIcon,
  UsersIcon,
 } from "../../../icons";
@@ -51,12 +51,12 @@ import UserServiceAccountsPanel from "./UserServiceAccountsPanel";
 import ChangeUserPasswordModal from "../Account/ChangeUserPasswordModal";
 import DeleteUserString from "./DeleteUserString";
 import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
-import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
 import PanelTitle from "../Common/PanelTitle/PanelTitle";
 import PageLayout from "../Common/Layout/PageLayout";
 import VerticalTabs from "../Common/VerticalTabs/VerticalTabs";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import BackLink from "../../../common/BackLink";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";

 const styles = (theme: Theme) =>
  createStyles({
@@ -261,24 +261,23 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
                  switchOnly
                />

-                <BoxIconButton
-                  color="primary"
-                  aria-label="Delete User"
+                <RBIconButton
+                  tooltip={"Delete User"}
+                  text={""}
                  onClick={deleteUser}
-                  size="large"
-                >
-                  <TrashIcon />
-                </BoxIconButton>
+                  icon={<TrashIcon />}
+                  color="secondary"
+                  variant={"outlined"}
+                />

-                <BoxIconButton
+                <RBIconButton
                  tooltip={"Change Password"}
-                  color="primary"
-                  aria-label="Change Password"
+                  text={""}
                  onClick={changeUserPassword}
-                  size="large"
-                >
-                  <LockIcon />
-                </BoxIconButton>
+                  icon={<PasswordKeyIcon />}
+                  color="primary"
+                  variant={"outlined"}
+                />
              </Fragment>
            }
          />
@@ -294,17 +293,16 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
                <React.Fragment>
                  <div className={classes.actionsTray}>
                    <PanelTitle>Groups</PanelTitle>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      endIcon={<AddIcon />}
-                      size="medium"
+                    <RBIconButton
+                      tooltip={"Add to Groups"}
+                      text={"Add to Groups"}
                      onClick={() => {
                        setAddGroupOpen(true);
                      }}
-                    >
-                      Add to Groups
-                    </Button>
+                      icon={<AddIcon />}
+                      color="primary"
+                      variant={"contained"}
+                    />
                  </div>
                  <div className={classes.tableBlock}>
                    <TableWrapper
@@ -338,17 +336,17 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
                <React.Fragment>
                  <div className={classes.actionsTray}>
                    <PanelTitle>Policies</PanelTitle>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      endIcon={<IAMPoliciesIcon />}
-                      size="medium"
+
+                    <RBIconButton
+                      tooltip={"Assign Policies"}
+                      text={"Assign Policies"}
                      onClick={() => {
                        setPolicyOpen(true);
                      }}
-                    >
-                      Assign Policies
-                    </Button>
+                      icon={<IAMPoliciesIcon />}
+                      color="primary"
+                      variant={"contained"}
+                    />
                  </div>
                  <div className={classes.tableBlock}>
                    <TableWrapper
--- a/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx
+++ b/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx
@@ -35,8 +35,8 @@ import AddUserServiceAccount from "./AddUserServiceAccount";
 import DeleteServiceAccount from "../Account/DeleteServiceAccount";
 import CredentialsPrompt from "../Common/CredentialsPrompt/CredentialsPrompt";
 import { AddIcon } from "../../../icons";
-import Button from "@mui/material/Button";
 import PanelTitle from "../Common/PanelTitle/PanelTitle";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";

 interface IUserServiceAccountsProps {
  classes: any;
@@ -166,19 +166,20 @@ const UserServiceAccountsPanel = ({
      )}
      <div className={classes.actionsTray}>
        <PanelTitle>Service Accounts</PanelTitle>
-        <Button
+
+        <RBIconButton
+          tooltip={"Create service account"}
+          text={"Create service account"}
          variant="contained"
          color="primary"
-          endIcon={<AddIcon />}
+          icon={<AddIcon />}
          onClick={() => {
            setAddScreenOpen(true);
            setAddScreenOpen(true);
            setSelectedServiceAccount(null);
          }}
          disabled={!hasPolicy}
-        >
-          Create service account
-        </Button>
+        />
      </div>
      <div className={classes.tableBlock}>
        <TableWrapper
--- a/portal-ui/src/utils/validationFunctions.ts
+++ b/portal-ui/src/utils/validationFunctions.ts
@@ -53,7 +53,6 @@ export const commonFormValidation = (fieldsValidate: IValidation[]) => {
    if (field.pattern && field.customPatternMessage) {
      const rgx = new RegExp(field.pattern, "g");

-      console.log(field);
      if (
        field.value &&
        field.value.trim() !== "" &&