Remove Unused Style code (#2629)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
2023-02-02 20:42:15 -08:00
parent 2c8b96c511
commit 606a69b92c
94 changed files with 198 additions and 548 deletions
--- a/portal-ui/src/screens/Console/Account/Account.tsx
+++ b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -35,7 +35,6 @@ import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import { stringSort } from "../../../utils/sortFunctions";
 import {
  actionsTray,
-  containerForHeader,
  searchField,
  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
@@ -75,7 +74,6 @@ const useStyles = makeStyles((theme: Theme) =>
      maxWidth: 380,
    },
    ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
  })
 );

--- a/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
+++ b/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
@@ -42,7 +42,7 @@ const styles = (theme: Theme) =>
    ...modalStyleUtils,
    ...formFieldStyles,
    ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IChangePasswordProps {
--- a/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
+++ b/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
@@ -44,7 +44,7 @@ const styles = (theme: Theme) =>
    ...modalStyleUtils,
    ...formFieldStyles,
    ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IChangeUserPasswordProps {
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
@@ -70,7 +70,7 @@ const useStyles = makeStyles((theme: Theme) =>
    ...actionsTray,
    ...searchField,
    ...objectBrowserCommon,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  })
 );

--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
@@ -60,7 +60,7 @@ import OBHeader from "../../ObjectBrowser/OBHeader";

 const styles = (theme: Theme) =>
  createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 let objectsWS: WebSocket;
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
@@ -40,9 +40,7 @@ import Grid from "@mui/material/Grid";
 import api from "../../../../common/api";
 import { BucketInfo } from "../types";
 import {
-  buttonsStyles,
  containerForHeader,
-  hrClass,
  pageContentStyles,
  searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
@@ -113,9 +111,8 @@ const styles = (theme: Theme) =>
    capitalize: {
      textTransform: "capitalize",
    },
-    ...hrClass,
-    ...buttonsStyles,
-    ...containerForHeader(theme.spacing(4)),
+
+    ...containerForHeader,
  });

 interface IBucketDetailsProps {
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
@@ -107,7 +107,7 @@ const styles = (theme: Theme) =>
      color: "#000000",
      fontSize: 20,
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IsetProps {
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -82,7 +82,7 @@ const styles = (theme: Theme) =>
        minWidth: 220,
      },
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IListBucketsProps {
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -196,7 +196,7 @@ const useStyles = makeStyles((theme: Theme) =>
    },
    ...objectBrowserExtras,
    ...objectBrowserCommon,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  })
 );

--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx
@@ -38,7 +38,6 @@ import get from "lodash/get";
 import Grid from "@mui/material/Grid";
 import {
  actionsTray,
-  buttonsStyles,
  detailsPanel,
  spacingUtils,
  textStyleUtils,
@@ -117,7 +116,7 @@ const styles = () =>
    capitalizeFirst: {
      textTransform: "capitalize",
    },
-    ...buttonsStyles,
+
    ...actionsTray,
    ...spacingUtils,
    ...textStyleUtils,
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
@@ -25,9 +25,7 @@ import Grid from "@mui/material/Grid";
 import ShareFile from "./ShareFile";
 import {
  actionsTray,
-  buttonsStyles,
  containerForHeader,
-  hrClass,
  objectBrowserCommon,
  objectBrowserExtras,
  spacingUtils,
@@ -129,15 +127,13 @@ const styles = (theme: Theme) =>
        display: "none",
      },
    },
-    ...hrClass,
-    ...buttonsStyles,
    ...actionsTray,
    ...tableStyles,
    ...spacingUtils,
    ...textStyleUtils,
    ...objectBrowserCommon,
    ...objectBrowserExtras,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IVersionsNavigatorProps {
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -71,9 +71,6 @@ export const modalBasic = {
    overflowY: "auto" as const,
    marginBottom: 25,
  },
-  formSlider: {
-    marginLeft: 0,
-  },
  clearButton: {
    fontFamily: "Inter, sans-serif",
    border: "0",
@@ -86,12 +83,6 @@ export const modalBasic = {
    padding: "16px 25px 16px 25px",
    cursor: "pointer",
  },
-  floatingEnabled: {
-    position: "absolute" as const,
-    right: 58,
-    zIndex: 1000,
-    marginTop: -38,
-  },
  configureString: {
    border: "#EAEAEA 1px solid",
    borderRadius: 4,
@@ -100,11 +91,6 @@ export const modalBasic = {
    height: 170,
    backgroundColor: "#FBFAFA",
  },
-  moduleDescription: {
-    color: "#848484",
-    fontSize: 12,
-    fontStyle: "italic" as string,
-  },
 };

 export const tooltipHelper = {
@@ -171,7 +157,7 @@ export const radioIcons = {
  },
 };

-export const containerForHeader = (bottomSpacing: any) => ({
+export const containerForHeader = {
  container: {
    position: "relative" as const,
    padding: "20px 35px 0",
@@ -190,27 +176,15 @@ export const containerForHeader = (bottomSpacing: any) => ({
    marginBottom: ".8rem",
    fontSize: "1.3rem",
  },
-  topSpacer: {
-    height: "8px",
-  },
  boxy: {
    border: "#E5E5E5 1px solid",
    borderRadius: 2,
    padding: 40,
    backgroundColor: "#fff",
  },
-});
+};

 export const actionsTray = {
-  filterTitle: {
-    color: "#848484",
-    fontSize: 13,
-    alignSelf: "center" as const,
-    whiteSpace: "nowrap" as const,
-    "&:not(:first-of-type)": {
-      marginLeft: 10,
-    },
-  },
  label: {
    color: "#07193E",
    fontSize: 13,
@@ -220,19 +194,6 @@ export const actionsTray = {
      marginLeft: 10,
    },
  },
-  timeContainers: {
-    display: "flex" as const,
-    "& button": {
-      flexGrow: 0,
-      marginLeft: 15,
-    },
-    height: 40,
-    marginBottom: 15,
-    justifyContent: "flex-start" as const,
-    "& > *": {
-      marginRight: 15,
-    },
-  },
  actionsTray: {
    display: "flex" as const,
    justifyContent: "space-between" as const,
@@ -243,19 +204,6 @@ export const actionsTray = {
      marginLeft: 8,
    },
  },
-  filterContainer: {
-    backgroundColor: "#fff",
-    border: "#EEF1F4 2px solid",
-    borderRadius: 2,
-    display: "flex",
-    alignItems: "center",
-    padding: "0 12px",
-  },
-  divisorLine: {
-    borderRight: "#EEF1F4 1px solid",
-    height: 20,
-    margin: "0 15px",
-  },
 };

 export const searchField = {
@@ -356,19 +304,6 @@ export const predefinedList = {
 };

 export const objectBrowserCommon = {
-  obTitleSection: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "flex-start",
-    marginBottom: 20,
-  },
-  sectionTitle: {
-    fontSize: 22,
-    color: "#000",
-    fontWeight: 600,
-    height: 40,
-    lineHeight: "40px",
-  },
  breadcrumbsMain: {
    display: "flex",
  },
@@ -402,10 +337,6 @@ export const objectBrowserCommon = {
      display: "none",
    },
  },
-  smallLabel: {
-    color: "#9C9C9C",
-    fontSize: 15,
-  },
  bucketDetails: {
    marginLeft: 10,
    fontSize: 14,
@@ -468,15 +399,6 @@ export const selectorsCommon = {
 };

 export const settingsCommon: any = {
-  customTitle: {
-    fontSize: 18,
-    color: "#000",
-    fontWeight: 600,
-    padding: "12px 0",
-    borderBottom: "#eaedee 1px solid",
-    marginBottom: 10,
-    margin: "15px 38px 27px",
-  },
  settingsFormContainer: {
    padding: 38,
    overflowY: "auto" as const,
@@ -490,10 +412,6 @@ export const settingsCommon: any = {
    display: "flex",
    justifyContent: "flex-end",
  },
-  innerSettingsButtonContainer: {
-    maxWidth: 840,
-    textAlign: "right" as const,
-  },
  settingsOptionsContainer: {
    height: "calc(100vh - 244px)",
    backgroundColor: "#fff",
@@ -501,38 +419,6 @@ export const settingsCommon: any = {
    borderRadius: 3,
    marginTop: 15,
  },
-  backButton: {
-    cursor: "pointer",
-    fontSize: 10,
-    fontWeight: 600,
-    color: "#000",
-    backgroundColor: "transparent",
-    border: 0,
-    padding: 0,
-    display: "flex",
-    alignItems: "center",
-    "&:active, &:focus": {
-      outline: 0,
-    },
-    "& svg": {
-      width: 10,
-      marginRight: 4,
-    },
-  },
-  backContainer: {
-    margin: "20px 38px 0",
-  },
-  mainCont: {
-    paddingLeft: 50,
-    paddingRight: 50,
-  },
-  mainTitle: {
-    fontSize: 18,
-    color: "#000",
-    fontWeight: 600,
-    marginBottom: 10,
-    marginTop: 10,
-  },
 };

 export const typesSelection = {
@@ -544,26 +430,6 @@ export const typesSelection = {
    flexWrap: "wrap" as const,
    width: "100%",
  },
-  nonIconContainer: {
-    marginBottom: 16,
-    width: 455,
-    marginTop: 15,
-    "& button": {
-      marginRight: 16,
-    },
-  },
-  pickTitle: {
-    fontWeight: 600,
-    color: "#393939",
-    fontSize: 14,
-    marginBottom: 16,
-  },
-  centerElements: {
-    display: "flex" as const,
-    flexDirection: "column" as const,
-    alignItems: "center" as const,
-    justifyContent: "center" as const,
-  },
  logoButton: {
    height: "80px",
  },
@@ -607,13 +473,6 @@ export const typesSelection = {
  },
 };

-export const logsCommon = {
-  logsSubContainer: {
-    height: "calc(100vh - 230px)",
-    padding: "15px 0",
-  },
-};
-
 export const widgetCommon = {
  singleValueContainer: {
    height: 200,
@@ -638,18 +497,6 @@ export const widgetCommon = {
    width: "100%",
    height: 140,
  },
-  contentContainerWithLabel: {
-    height: "calc(100% - 25px)",
-  },
-  legendBlock: {
-    position: "absolute" as const,
-    bottom: 5,
-    display: "flex" as const,
-    width: "100%",
-    height: 15,
-    flexWrap: "wrap" as const,
-    overflowY: "auto" as const,
-  },
  singleLegendContainer: {
    display: "flex",
    alignItems: "center",
@@ -674,33 +521,6 @@ export const widgetCommon = {
    height: 340,
    width: "100%",
  },
-  zoomChartIcon: {
-    backgroundColor: "transparent",
-    border: 0,
-    padding: 0,
-    cursor: "pointer",
-    "& svg": {
-      color: "#D0D0D0",
-      height: 16,
-    },
-    "&:hover": {
-      "& svg": {
-        color: "#404143",
-      },
-    },
-  },
-};
-
-export const widgetContainerCommon = {
-  widgetPanelDelimiter: {
-    padding: 10,
-  },
-  dashboardRow: {
-    display: "flex" as const,
-    flexDirection: "row" as const,
-    justifyContent: "flex-start" as const,
-    flexWrap: "wrap" as const,
-  },
 };

 export const tooltipCommon = {
@@ -806,10 +626,6 @@ export const wizardCommon = {
      flexDirection: "column",
    },
  },
-  sizeFactorContainer: {
-    marginLeft: 8,
-    alignSelf: "flex-start" as const,
-  },
  headerElement: {
    position: "sticky" as const,
    top: 0,
@@ -818,23 +634,10 @@ export const wizardCommon = {
    zIndex: 500,
    backgroundColor: "#fff",
  },
-  tableTitle: {
-    fontWeight: 700,
-    width: "30%",
-  },
-  poolError: {
-    color: "#dc1f2e",
-    fontSize: "0.75rem",
-    paddingLeft: 120,
-  },
  error: {
    color: "#dc1f2e",
    fontSize: "0.75rem",
  },
-  h3Section: {
-    marginTop: 0,
-    margin: 0,
-  },
  descriptionText: {
    fontSize: 14,
  },
@@ -856,31 +659,6 @@ export const wizardCommon = {
  },
 };

-export const buttonsStyles = {
-  anchorButton: {
-    textDecoration: "underline" as const,
-    textTransform: "unset" as const,
-    fontWeight: "normal" as const,
-    padding: 0,
-    lineHeight: "unset" as const,
-    height: "unset" as const,
-    width: "unset" as const,
-    textAlign: "left" as const,
-    border: 0,
-    minWidth: "unset" as const,
-  },
-};
-
-export const hrClass = {
-  hrClass: {
-    borderTop: 0,
-    borderLeft: 0,
-    borderRight: 0,
-    borderColor: "#999999",
-    backgroundColor: "transparent" as const,
-  },
-};
-
 export const tenantDetailsStyles = {
  buttonContainer: {
    display: "flex",
@@ -891,70 +669,17 @@ export const tenantDetailsStyles = {
    alignItems: "center" as const,
    justifyContent: "flex-start" as const,
  },
-  sizeFactorContainer: {
-    marginLeft: 8,
-  },
-  containerHeader: {
-    display: "flex" as const,
-    justifyContent: "space-between" as const,
-  },
  paperContainer: {
    padding: "15px 15px 15px 50px",
  },
-  infoGrid: {
-    display: "grid" as const,
-    gridTemplateColumns: "auto auto auto auto",
-    gridGap: 8,
-    "& div": {
-      display: "flex" as const,
-      alignItems: "center" as const,
-    },
-    "& div:nth-child(odd)": {
-      justifyContent: "flex-end" as const,
-      fontWeight: 700,
-    },
-    "& div:nth-child(2n)": {
-      paddingRight: 35,
-    },
-  },
-  masterActions: {
-    width: "25%",
-    minWidth: "120px",
-    "& div": {
-      margin: "5px 0px",
-    },
-  },
-  updateButton: {
-    backgroundColor: "transparent" as const,
-    border: 0,
-    padding: "0 6px",
-    cursor: "pointer" as const,
-    "&:focus, &:active": {
-      outline: "none",
-    },
-    "& svg": {
-      height: 12,
-    },
-  },
-  poolLabel: {
-    color: "#666666",
-  },
-  titleCol: {
-    fontWeight: 700,
-  },
  breadcrumLink: {
    textDecoration: "none",
    color: "black",
  },
-  healthCol: {
-    fontWeight: 700,
-    paddingRight: "10px",
-  },
  ...modalBasic,
  ...actionsTray,
-  ...buttonsStyles,
+
  ...searchField,
-  ...hrClass,
  actionsTray: {
    ...actionsTray.actionsTray,
    padding: "15px 0 0",
@@ -1020,31 +745,6 @@ const commonStateIcon = {
 };

 export const commonDashboardInfocard: any = {
-  cardIconContainer: {
-    display: "flex" as const,
-    position: "relative" as const,
-    alignItems: "center" as const,
-  },
-  stateContainer: {
-    display: "flex" as const,
-    flexWrap: "wrap" as const,
-    justifyContent: "flex-start" as const,
-  },
-  infoValue: {
-    fontWeight: 500,
-    color: "#07193E",
-    fontSize: 16,
-    margin: "8px 40px 5px 0",
-    display: "inline-flex" as const,
-    "& strong": {
-      marginRight: 4,
-    },
-    "& .min-icon": {
-      width: 20,
-      height: 20,
-    },
-    alignItems: "center" as const,
-  },
  redState: {
    color: "#F55B5B",
    ...commonStateIcon,
@@ -1073,44 +773,6 @@ export const commonDashboardInfocard: any = {
      height: 5,
    },
  },
-  innerState: {
-    fontSize: 8,
-    display: "flex" as const,
-    alignItems: "center" as const,
-    marginTop: -3,
-    "& .min-icon": {
-      marginTop: 5,
-      width: 10,
-      height: 10,
-    },
-  },
-  cardContainer: {
-    borderRadius: 10,
-    boxShadow: "0 0 15px #00000029",
-    marginBottom: 30,
-  },
-  cardHeader: {
-    "& .MuiCardHeader-title": {
-      fontWeight: "bolder" as const,
-    },
-  },
-  cardNumber: {
-    color: "#848484",
-    fontSize: 16,
-    fontWeight: 400,
-    marginBottom: 10,
-  },
-  referenceTitle: {
-    display: "flex",
-    alignItems: "center" as const,
-    lineHeight: 1,
-    fontWeight: "bold" as const,
-    "& .min-icon": {
-      width: 10,
-      height: 10,
-      marginTop: -5,
-    },
-  },
 };

 export const pageContentStyles = {
@@ -1119,35 +781,11 @@ export const pageContentStyles = {
  },
 };

-export const linkStyles = (color: string) => ({
-  link: {
-    textDecoration: "underline",
-    color,
-    backgroundColor: "transparent",
-    border: 0,
-    cursor: "pointer",
-  },
-});
-
 export const serviceAccountStyles: any = {
-  jsonPolicyEditor: {
-    minHeight: 400,
-    width: "100%",
-  },
  buttonContainer: {
    display: "flex",
    justifyContent: "flex-end",
  },
-  infoDetails: {
-    color: "#393939",
-    fontSize: 12,
-    fontStyle: "italic",
-    marginBottom: "8px",
-  },
-  containerScrollable: {
-    maxHeight: "calc(100vh - 200px)" as const,
-    overflowY: "auto" as const,
-  },
  codeMirrorContainer: {
    marginBottom: 20,
    paddingLeft: 15,
@@ -1376,22 +1014,6 @@ export const detailsPanel: any = {
    maxHeight: 180,
    overflowY: "auto",
  },
-  hrClass: {
-    borderTop: 0,
-    borderLeft: 0,
-    borderRight: 0,
-    borderColor: "#E2E2E2",
-    backgroundColor: "transparent",
-  },
-  sectionTitle: {
-    fontSize: 18,
-    color: "#000",
-    fontWeight: "bold",
-    borderBottom: "#E2E2E2 1px solid",
-    margin: "10px 22px",
-    paddingBottom: 18,
-    width: "100%",
-  },
  detailContainer: {
    padding: "0 22px",
    marginBottom: 20,
--- a/portal-ui/src/screens/Console/Common/FormHr.tsx
+++ b/portal-ui/src/screens/Console/Common/FormHr.tsx
@@ -0,0 +1,27 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import styled from "@emotion/styled";
+
+const FormHr = styled("hr")`
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  border-color: #999999;
+  background-color: transparent;
+`;
+
+export default FormHr;
--- a/portal-ui/src/screens/Console/Common/H3Section.tsx
+++ b/portal-ui/src/screens/Console/Common/H3Section.tsx
@@ -0,0 +1,22 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import styled from "@emotion/styled";
+
+const H3Section = styled("h3")`
+  margin: 0px;
+`;
+export default H3Section;
--- a/portal-ui/src/screens/Console/Common/IconsScreen.tsx
+++ b/portal-ui/src/screens/Console/Common/IconsScreen.tsx
@@ -39,7 +39,7 @@ interface IIconsScreenSimple {

 const styles = (theme: Theme) =>
  createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    root: {
      fontSize: 12,
      wordWrap: "break-word",
--- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
+++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
@@ -51,7 +51,7 @@ const styles = (theme: Theme) =>
    },
    ...searchField,
    ...actionsTray,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const getRoutePath = (path: string) => {
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
@@ -82,7 +82,7 @@ const styles = (theme: Theme) =>
    ...searchField,
    ...settingsCommon,
    ...typesSelection,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    customConfigurationPage: {
      minHeight: 400,
    },
--- a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
@@ -33,7 +33,7 @@ interface IDashboardSimple {

 const styles = (theme: Theme) =>
  createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const Dashboard = ({ classes }: IDashboardSimple) => {
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
@@ -21,10 +21,7 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Box, LinearProgress } from "@mui/material";
-import {
-  actionsTray,
-  widgetContainerCommon,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
 import { IDashboardPanel } from "./types";
 import { panelsConfiguration } from "./utils";
 import { TabPanel } from "../../../shared/tabs";
@@ -61,7 +58,6 @@ interface IPrDashboard {
 const styles = (theme: Theme) =>
  createStyles({
    ...actionsTray,
-    ...widgetContainerCommon,
  });

 const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
--- a/portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx
+++ b/portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx
@@ -73,7 +73,7 @@ const styles = (theme: Theme) =>
    },
    ...actionsTray,
    ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const DirectPVMain = ({ classes }: IDirectPVMain) => {
--- a/portal-ui/src/screens/Console/DirectPV/DirectPVVolumes.tsx
+++ b/portal-ui/src/screens/Console/DirectPV/DirectPVVolumes.tsx
@@ -47,7 +47,7 @@ const styles = (theme: Theme) =>
    },
    ...actionsTray,
    ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const DirectPVVolumes = ({ classes }: IDirectPVVolumesProps) => {
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -90,7 +90,7 @@ const styles = (theme: Theme) =>
      ...searchField.searchField,
      maxWidth: 380,
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const Groups = ({ classes }: IGroupsProps) => {
--- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
@@ -93,7 +93,7 @@ const styles = (theme: Theme) =>
        },
      },
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IGroupDetailsProps {
--- a/portal-ui/src/screens/Console/Heal/Heal.tsx
+++ b/portal-ui/src/screens/Console/Heal/Heal.tsx
@@ -94,7 +94,7 @@ const useStyles = makeStyles((theme: Theme) =>
    },
    ...inlineCheckboxes,
    ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  })
 );

--- a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
+++ b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
@@ -88,7 +88,7 @@ const styles = (theme: Theme) =>
      marginTop: 0,
    },
    ...actionsTray,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IHealthInfo {
--- a/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
+++ b/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
@@ -21,10 +21,8 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Box, Grid } from "@mui/material";
 import {
-  buttonsStyles,
  containerForHeader,
  formFieldStyles,
-  hrClass,
  modalBasic,
  pageContentStyles,
  searchField,
@@ -76,9 +74,8 @@ const styles = (theme: Theme) =>
    },
    ...pageContentStyles,
    ...searchField,
-    ...hrClass,
-    ...buttonsStyles,
-    ...containerForHeader(theme.spacing(4)),
+
+    ...containerForHeader,
  });

 const IDPConfigurationDetails = ({
--- a/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
+++ b/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
@@ -47,7 +47,7 @@ type IDPConfigurationsProps = {

 const styles = (theme: Theme) =>
  createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
--- a/portal-ui/src/screens/Console/KMS/ListKeys.tsx
+++ b/portal-ui/src/screens/Console/KMS/ListKeys.tsx
@@ -49,7 +49,7 @@ const DeleteKMSModal = withSuspense(
 const styles = (theme: Theme) =>
  createStyles({
    ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IKeysProps {
--- a/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
+++ b/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
@@ -32,7 +32,6 @@ import {
  actionsTray,
  containerForHeader,
  inlineCheckboxes,
-  logsCommon,
  searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
 import PageLayout from "../../Common/Layout/PageLayout";
@@ -72,9 +71,9 @@ const useStyles = makeStyles((theme: Theme) =>
      marginBottom: 0,
    },
    ...searchField,
-    ...logsCommon,
+
    ...inlineCheckboxes,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  })
 );

--- a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
+++ b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
@@ -25,7 +25,6 @@ import withStyles from "@mui/styles/withStyles";
 import {
  advancedFilterToggleStyles,
  containerForHeader,
-  logsCommon,
  tableStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
 import { IReqInfoSearchResults, ISearchResponse } from "./types";
@@ -115,8 +114,8 @@ const styles = (theme: Theme) =>
      alignItems: "center",
      justifyContent: "flex-start",
    },
-    ...logsCommon,
-    ...containerForHeader(theme.spacing(4)),
+
+    ...containerForHeader,
  });

 const LogsSearchMain = ({ classes }: ILogSearchProps) => {
--- a/portal-ui/src/screens/Console/Marketplace/SetEmailModal.tsx
+++ b/portal-ui/src/screens/Console/Marketplace/SetEmailModal.tsx
@@ -31,7 +31,7 @@ import { euTimezones } from "./euTimezones";

 const styles = (theme: Theme) =>
  createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const reEmail =
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
@@ -62,7 +62,7 @@ const styles = (theme: Theme) =>
  createStyles({
    ...actionsTray,
    ...settingsCommon,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    twHeight: {
      minHeight: 400,
    },
--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
@@ -18,14 +18,13 @@ import React, { Fragment, useState } from "react";
 import { useSelector } from "react-redux";
 import CopyToClipboard from "react-copy-to-clipboard";
 import Grid from "@mui/material/Grid";
-import withStyles from "@mui/styles/withStyles";
 import createStyles from "@mui/styles/createStyles";
 import { Theme } from "@mui/material/styles";
 import { Link, useNavigate } from "react-router-dom";
 import { IconButton } from "@mui/material";
 import { objectBrowserCommon } from "../Common/FormComponents/common/styleLibrary";
 import { encodeURLString } from "../../../common/utils";
-import { BackCaretIcon, Button, CopyIcon, NewPathIcon } from "mds";
+import { BackCaretIcon, Button, CopyIcon, NewPathIcon, Tooltip } from "mds";
 import { hasPermission } from "../../../common/SecureComponent";
 import {
  IAM_SCOPES,
@@ -35,7 +34,7 @@ import withSuspense from "../Common/Components/withSuspense";
 import { setSnackBarMessage } from "../../../systemSlice";
 import { AppState, useAppDispatch } from "../../../store";
 import { setVersionsModeEnabled } from "./objectBrowserSlice";
-import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import makeStyles from "@mui/styles/makeStyles";

 const CreatePathModal = withSuspense(
  React.lazy(
@@ -43,16 +42,16 @@ const CreatePathModal = withSuspense(
  )
 );

-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    ...objectBrowserCommon,
    slashSpacingStyle: {
      margin: "0 5px",
    },
-  });
+  })
+);

 interface IObjectBrowser {
-  classes: any;
  bucketName: string;
  internalPaths: string;
  hidePathButton?: boolean;
@@ -60,7 +59,6 @@ interface IObjectBrowser {
 }

 const BrowserBreadcrumbs = ({
-  classes,
  bucketName,
  internalPaths,
  hidePathButton,
@@ -68,6 +66,7 @@ const BrowserBreadcrumbs = ({
 }: IObjectBrowser) => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
+  const classes = useStyles();

  const rewindEnabled = useSelector(
    (state: AppState) => state.objectBrowser.rewind.rewindEnabled
@@ -228,7 +227,7 @@ const BrowserBreadcrumbs = ({
          <div className={classes.additionalOptions}>{additionalOptions}</div>
        </Grid>
        {!hidePathButton && (
-          <TooltipWrapper
+          <Tooltip
            tooltip={
              canCreatePath
                ? "Choose or create a new path"
@@ -251,7 +250,7 @@ const BrowserBreadcrumbs = ({
              variant={"regular"}
              label={"Create new path"}
            />
-          </TooltipWrapper>
+          </Tooltip>
        )}
      </div>
      <div className={classes.breadcrumbsSecond}>{additionalOptions}</div>
@@ -259,4 +258,4 @@ const BrowserBreadcrumbs = ({
  );
 };

-export default withStyles(styles)(BrowserBreadcrumbs);
+export default BrowserBreadcrumbs;
--- a/portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx
@@ -70,7 +70,7 @@ const useStyles = makeStyles((theme: Theme) =>
      },
    },
    ...actionsTray,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  })
 );

--- a/portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx
@@ -56,7 +56,7 @@ const useStyles = makeStyles((theme: Theme) =>
    ...modalStyleUtils,
    ...formFieldStyles,
    ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  })
 );

--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -67,7 +67,7 @@ const styles = (theme: Theme) =>
      ...searchField.searchField,
      maxWidth: 380,
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IPoliciesProps {
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -99,7 +99,7 @@ const styles = (theme: Theme) =>
    ...actionsTray,
    ...searchField,
    ...modalBasic,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IPolicyDetailsProps {
--- a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
@@ -79,7 +79,7 @@ const useStyles = makeStyles((theme: Theme) =>
    ...actionsTray,
    ...searchField,
    ...formFieldStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  })
 );

--- a/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx
+++ b/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx
@@ -47,7 +47,7 @@ const styles = (theme: Theme) =>
    },
    ...actionsTray,
    ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const StorageVolumes = ({ classes }: IStorageVolumesProps) => {
--- a/portal-ui/src/screens/Console/Support/GetApiKeyModal.tsx
+++ b/portal-ui/src/screens/Console/Support/GetApiKeyModal.tsx
@@ -39,7 +39,7 @@ const styles = (theme: Theme) =>
    sizedLabel: {
      minWidth: "75px",
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    ...spacingUtils,
  });

--- a/portal-ui/src/screens/Console/Support/Profile.tsx
+++ b/portal-ui/src/screens/Console/Support/Profile.tsx
@@ -49,7 +49,7 @@ const styles = (theme: Theme) =>
      },
    },
    ...actionsTray,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IProfileProps {
--- a/portal-ui/src/screens/Console/Support/Register.tsx
+++ b/portal-ui/src/screens/Console/Support/Register.tsx
@@ -76,17 +76,13 @@ interface IRegister {

 const styles = (theme: Theme) =>
  createStyles({
-    link: {
-      color: "#2781B0",
-      cursor: "pointer",
-    },
    sizedLabel: {
      minWidth: "75px",
    },
    ...actionsTray,
    ...searchField,
    ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const Register = ({ classes }: IRegister) => {
@@ -560,10 +556,7 @@ const Register = ({ classes }: IRegister) => {
        }}
      >
        {clusterRegistered && licenseInfo ? (
-          <ClusterRegistered
-            email={licenseInfo.email}
-            linkClass={classes.link}
-          />
+          <ClusterRegistered email={licenseInfo.email} />
        ) : (
          <ApiKeyRegister
            afterRegister={fetchLicenseInfo}
@@ -588,10 +581,7 @@ const Register = ({ classes }: IRegister) => {
        }}
      >
        {clusterRegistered && licenseInfo ? (
-          <ClusterRegistered
-            email={licenseInfo.email}
-            linkClass={classes.link}
-          />
+          <ClusterRegistered email={licenseInfo.email} />
        ) : null}
        <Box
          sx={{
@@ -706,10 +696,7 @@ const Register = ({ classes }: IRegister) => {
        }}
      >
        {clusterRegistered && licenseInfo ? (
-          <ClusterRegistered
-            email={licenseInfo.email}
-            linkClass={classes.link}
-          />
+          <ClusterRegistered email={licenseInfo.email} />
        ) : (
          clusterRegistrationForm
        )}
--- a/portal-ui/src/screens/Console/Support/RegisterOperator.tsx
+++ b/portal-ui/src/screens/Console/Support/RegisterOperator.tsx
@@ -43,14 +43,10 @@ interface IRegister {

 const styles = (theme: Theme) =>
  createStyles({
-    link: {
-      color: "#2781B0",
-      cursor: "pointer",
-    },
    ...actionsTray,
    ...searchField,
    ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const RegisterOperator = ({ classes }: IRegister) => {
@@ -84,7 +80,7 @@ const RegisterOperator = ({ classes }: IRegister) => {
        }}
      >
        {apiKeyRegistered ? (
-          <ClusterRegistered email={"Operator"} linkClass={classes.link} />
+          <ClusterRegistered email={"Operator"} />
        ) : (
          <ApiKeyRegister
            registerEndpoint={"/api/v1/subnet/apikey/register"}
--- a/portal-ui/src/screens/Console/Support/utils.tsx
+++ b/portal-ui/src/screens/Console/Support/utils.tsx
@@ -26,13 +26,7 @@ export const FormTitle = ({
  );
 };

-export const ClusterRegistered = ({
-  email,
-  linkClass,
-}: {
-  email: string;
-  linkClass: string;
-}) => {
+export const ClusterRegistered = ({ email }: { email: string }) => {
  return (
    <Fragment>
      <RegistrationStatusBanner email={email} />
@@ -50,7 +44,10 @@ export const ClusterRegistered = ({
          <Link
            href="https://subnet.min.io"
            target="_blank"
-            className={linkClass}
+            style={{
+              color: "#2781B0",
+              cursor: "pointer",
+            }}
          >
            SUBNET
          </Link>{" "}
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
@@ -48,6 +48,7 @@ import {
  setTolerationInfo,
  updateAddField,
 } from "../createTenantSlice";
+import H3Section from "../../../Common/H3Section";

 interface IAffinityProps {
  classes: any;
@@ -255,7 +256,7 @@ const Affinity = ({ classes }: IAffinityProps) => {
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Pod Placement</h3>
+        <H3Section>Pod Placement</H3Section>
        <span className={classes.descriptionText}>
          Configure how pods will be assigned to nodes
        </span>
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigLogSearch.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigLogSearch.tsx
@@ -37,6 +37,7 @@ import SelectWrapper from "../../../Common/FormComponents/SelectWrapper/SelectWr
 import InputUnitMenu from "../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import SectionH1 from "../../../Common/SectionH1";
 import { isPageValid, updateAddField } from "../createTenantSlice";
+import FormHr from "../../../Common/FormHr";

 interface IConfigureProps {
  classes: any;
@@ -289,7 +290,7 @@ const ConfigLogSearch = ({ classes }: IConfigureProps) => {
          </span>
        </Grid>
        <Grid xs={12}>
-          <hr className={classes.hrClass} />
+          <FormHr />
        </Grid>
        {logSearchEnabled && (
          <Fragment>
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigPrometheus.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigPrometheus.tsx
@@ -38,6 +38,7 @@ import SelectWrapper from "../../../Common/FormComponents/SelectWrapper/SelectWr
 import InputUnitMenu from "../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import SectionH1 from "../../../Common/SectionH1";
 import { isPageValid, updateAddField } from "../createTenantSlice";
+import FormHr from "../../../Common/FormHr";

 interface IConfigureProps {
  classes: any;
@@ -256,7 +257,7 @@ const ConfigPrometheus = ({ classes }: IConfigureProps) => {
        </span>
      </Grid>
      <Grid xs={12}>
-        <hr className={classes.hrClass} />
+        <FormHr />
      </Grid>
      <Grid container spacing={1}>
        {prometheusEnabled && (
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
@@ -51,6 +51,7 @@ import {
  updateAddField,
 } from "../createTenantSlice";
 import SelectWrapper from "../../../Common/FormComponents/SelectWrapper/SelectWrapper";
+import H3Section from "../../../Common/H3Section";

 interface IConfigureProps {
  classes: any;
@@ -285,7 +286,7 @@ const Configure = ({ classes }: IConfigureProps) => {
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Configure</h3>
+        <H3Section>Configure</H3Section>
        <span className={classes.descriptionText}>
          Basic configurations for tenant management
        </span>
@@ -611,7 +612,7 @@ const Configure = ({ classes }: IConfigureProps) => {
      <Divider />

      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Additional Environment Variables</h3>
+        <H3Section>Additional Environment Variables</H3Section>
        <span className={classes.descriptionText}>
          Define additional environment variables to be used by your MinIO pods
        </span>
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
@@ -56,6 +56,7 @@ import SelectWrapper from "../../../Common/FormComponents/SelectWrapper/SelectWr
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import CodeMirrorWrapper from "../../../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
+import FormHr from "../../../Common/FormHr";

 interface IEncryptionProps {
  classes: any;
@@ -326,7 +327,7 @@ const Encryption = ({ classes }: IEncryptionProps) => {
          </span>
        </Grid>
        <Grid xs={12}>
-          <hr className={classes.hrClass} />
+          <FormHr />
        </Grid>

        {enableEncryption && (
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
@@ -36,6 +36,7 @@ import {
  LDAPLogoElement,
  OIDCLogoElement,
 } from "../../LogoComponents";
+import H3Section from "../../../Common/H3Section";

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -71,7 +72,7 @@ const IdentityProvider = () => {
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Identity Provider</h3>
+        <H3Section>Identity Provider</H3Section>
        <span className={classes.descriptionText}>
          Access to the tenant can be controlled via an external Identity
          Manager.
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx
@@ -22,7 +22,6 @@ import withStyles from "@mui/styles/withStyles";
 import { Grid, Paper } from "@mui/material";
 import {
  formFieldStyles,
-  modalBasic,
  wizardCommon,
 } from "../../../Common/FormComponents/common/styleLibrary";
 import { AppState, useAppDispatch } from "../../../../../store";
@@ -34,6 +33,7 @@ import {
 import FormSwitchWrapper from "../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import InputBoxWrapper from "../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { isPageValid, updateAddField } from "../createTenantSlice";
+import H3Section from "../../../Common/H3Section";

 interface IImagesProps {
  classes: any;
@@ -42,7 +42,6 @@ interface IImagesProps {
 const styles = (theme: Theme) =>
  createStyles({
    ...formFieldStyles,
-    ...modalBasic,
    ...wizardCommon,
  });

@@ -307,7 +306,7 @@ const Images = ({ classes }: IImagesProps) => {
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Container Images</h3>
+        <H3Section>Container Images</H3Section>
        <span className={classes.descriptionText}>
          Specify the container images used by the Tenant and it's features.
        </span>
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
@@ -46,6 +46,7 @@ import {
  updateAddField,
 } from "../createTenantSlice";
 import TLSHelpBox from "../../HelpBox/TLSHelpBox";
+import H3Section from "../../../Common/H3Section";

 interface ISecurityProps {
  classes: any;
@@ -172,7 +173,7 @@ const Security = ({ classes }: ISecurityProps) => {
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Security</h3>
+        <H3Section>Security</H3Section>
      </div>
      <Grid container spacing={1}>
        <Grid item xs={12}>
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/NameTenantMain.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/NameTenantMain.tsx
@@ -41,6 +41,7 @@ import {
 } from "../../createTenantSlice";
 import { selFeatures } from "../../../../consoleSlice";
 import NamespaceSelector from "./NamespaceSelector";
+import H3Section from "../../../../Common/H3Section";

 const styles = (theme: Theme) =>
  createStyles({
@@ -129,7 +130,7 @@ const NameTenantMain = ({ classes, formToRender }: INameTenantMainScreen) => {
            <Grid container>
              <Grid item xs={12}>
                <div className={classes.headerElement}>
-                  <h3 className={classes.h3Section}>Name</h3>
+                  <H3Section>Name</H3Section>
                  <span className={classes.descriptionText}>
                    How would you like to name this new tenant?
                  </span>
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSize.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSize.tsx
@@ -45,6 +45,7 @@ import TenantSizeResources from "./TenantSizeResources";
 import InputUnitMenu from "../../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import { IMkEnvs } from "./utils";
 import { isPageValid, updateAddField } from "../../createTenantSlice";
+import H3Section from "../../../../Common/H3Section";

 interface ITenantSizeProps {
  classes: any;
@@ -311,7 +312,7 @@ const TenantSize = ({ classes, formToRender }: ITenantSizeProps) => {
    <Fragment>
      <Grid item xs={12}>
        <div className={classes.headerElement}>
-          <h3 className={classes.h3Section}>Capacity</h3>
+          <H3Section>Capacity</H3Section>
          <span className={classes.descriptionText}>
            Please select the desired capacity
          </span>
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeMK.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeMK.tsx
@@ -42,6 +42,7 @@ import {
  mkPanelConfigurations,
 } from "./utils";
 import { isPageValid, updateAddField } from "../../createTenantSlice";
+import H3Section from "../../../../Common/H3Section";

 interface ITenantSizeAWSProps {
  classes: any;
@@ -300,7 +301,7 @@ const TenantSizeMK = ({
    <Fragment>
      <Grid item xs={12}>
        <div className={classes.headerElement}>
-          <h3 className={classes.h3Section}>Tenant Size</h3>
+          <H3Section>Tenant Size</H3Section>
          <span className={classes.descriptionText}>
            Please select the desired capacity
          </span>
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeResources.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeResources.tsx
@@ -34,6 +34,7 @@ import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapp
 import { floor } from "lodash";
 import InputUnitMenu from "../../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import { isPageValid, updateAddField } from "../../createTenantSlice";
+import H3Section from "../../../../Common/H3Section";

 interface ITenantSizeResourcesProps {
  classes: any;
@@ -220,7 +221,7 @@ ITenantSizeResourcesProps) => {
    <Fragment>
      <Grid item xs={12}>
        <div className={classes.headerElement}>
-          <h3 className={classes.h3Section}>Resources</h3>
+          <H3Section>Resources</H3Section>
          <span className={classes.descriptionText}>
            You may specify the amount of CPU and Memory that MinIO servers
            should reserve on each node.
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -63,7 +63,7 @@ const styles = (theme: Theme) =>
  createStyles({
    ...actionsTray,
    ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    tenantsList: {
      height: "calc(100vh - 195px)",
    },
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/ConfirmationDialog.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/ConfirmationDialog.tsx
@@ -31,7 +31,7 @@ interface IConfirmationDialog {
 const styles = (theme: Theme) =>
  createStyles({
    ...tenantDetailsStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const ConfirmationDialog = ({
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringScreen.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringScreen.tsx
@@ -64,6 +64,7 @@ import { clearValidationError, imagePattern, numericPattern } from "../utils";
 import SecurityContextSelector from "../securityContextSelector";
 import { setFSGroupChangePolicy } from "../tenantSecurityContextSlice";
 import { fsGroupChangePolicyType } from "../types";
+import FormHr from "../../Common/FormHr";

 interface ITenantMonitoring {
  classes: any;
@@ -73,7 +74,7 @@ const styles = (theme: Theme) =>
  createStyles({
    ...tenantDetailsStyles,
    ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    ...createTenantCommon,
    ...formFieldStyles,
    ...modalBasic,
@@ -332,7 +333,7 @@ const TenantMonitoring = ({ classes }: ITenantMonitoring) => {
          />
        </Grid>
        <Grid item xs={12}>
-          <hr className={classes.hrClass} />
+          <FormHr />
        </Grid>
      </Grid>

--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/KeyPairView.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/KeyPairView.tsx
@@ -40,7 +40,7 @@ const styles = (theme: Theme) =>
    listHeight: {
      height: "50",
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const KeyPairView = ({ classes, records, recordName }: IKeyPairView) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDBDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDBDetails.tsx
@@ -65,7 +65,7 @@ const styles = (theme: Theme) =>
  createStyles({
    ...tenantDetailsStyles,
    ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    ...createTenantCommon,
    ...formFieldStyles,
    ...modalBasic,
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDetails.tsx
@@ -64,7 +64,7 @@ const styles = (theme: Theme) =>
  createStyles({
    ...tenantDetailsStyles,
    ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    ...createTenantCommon,
    ...formFieldStyles,
    ...modalBasic,
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx
@@ -45,7 +45,7 @@ const styles = (theme: Theme) =>
  createStyles({
    ...tenantDetailsStyles,
    ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const PodsSummary = ({ classes }: IPodsSummary) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolConfiguration.tsx
@@ -34,6 +34,7 @@ import {
 import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { isPoolPageValid, setPoolField } from "./addPoolSlice";
+import H3Section from "../../../../Common/H3Section";

 interface IConfigureProps {
  classes: any;
@@ -164,7 +165,7 @@ const PoolConfiguration = ({ classes }: IConfigureProps) => {
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Configure</h3>
+        <H3Section>Configure</H3Section>
        <span className={classes.descriptionText}>
          Aditional Configurations for the new Pool
        </span>
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolPodPlacement.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolPodPlacement.tsx
@@ -48,6 +48,7 @@ import {
  setPoolKeyValuePairs,
  setPoolTolerationInfo,
 } from "./addPoolSlice";
+import H3Section from "../../../../Common/H3Section";

 interface IAffinityProps {
  classes: any;
@@ -255,7 +256,7 @@ const Affinity = ({ classes }: IAffinityProps) => {
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Pod Placement</h3>
+        <H3Section>Pod Placement</H3Section>
        <span className={classes.descriptionText}>
          Configure how pods will be assigned to nodes
        </span>
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolResources.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolResources.tsx
@@ -44,6 +44,7 @@ import {
  setPoolField,
  setPoolStorageClasses,
 } from "./addPoolSlice";
+import H3Section from "../../../../Common/H3Section";

 interface IPoolResourcesProps {
  classes: any;
@@ -197,7 +198,7 @@ const PoolResources = ({ classes }: IPoolResourcesProps) => {
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>New Pool Configuration</h3>
+        <H3Section>New Pool Configuration</H3Section>
        <span className={classes.descriptionText}>
          Configure a new Pool to expand MinIO storage
        </span>
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx
@@ -46,7 +46,7 @@ const styles = (theme: Theme) =>
    ...tenantDetailsStyles,
    ...actionsTray,
    ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const PoolsListing = ({ classes, setPoolDetailsView }: IPoolsSummary) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolConfiguration.tsx
@@ -35,6 +35,7 @@ import {
 import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { isEditPoolPageValid, setEditPoolField } from "./editPoolSlice";
+import H3Section from "../../../../Common/H3Section";

 interface IConfigureProps {
  classes: any;
@@ -166,7 +167,7 @@ const PoolConfiguration = ({ classes }: IConfigureProps) => {
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Configure</h3>
+        <H3Section>Configure</H3Section>
      </div>
      <Grid item xs={12} className={classes.configSectionItem}>
        <FormSwitchWrapper
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolPlacement.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolPlacement.tsx
@@ -48,6 +48,7 @@ import {
  setEditPoolKeyValuePairs,
  setEditPoolTolerationInfo,
 } from "./editPoolSlice";
+import H3Section from "../../../../Common/H3Section";

 interface IAffinityProps {
  classes: any;
@@ -255,7 +256,7 @@ const Affinity = ({ classes }: IAffinityProps) => {
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Pod Placement</h3>
+        <H3Section>Pod Placement</H3Section>
      </div>
      <Grid item xs={12} className={classes.affinityConfigField}>
        <Grid item className={classes.affinityFieldLabel}>
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolResources.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolResources.tsx
@@ -44,6 +44,7 @@ import {
  setEditPoolField,
  setEditPoolStorageClasses,
 } from "./editPoolSlice";
+import H3Section from "../../../../Common/H3Section";

 interface IPoolResourcesProps {
  classes: any;
@@ -197,7 +198,7 @@ const PoolResources = ({ classes }: IPoolResourcesProps) => {
  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Pool Resources</h3>
+        <H3Section>Pool Resources</H3Section>
      </div>

      <Grid item xs={12} className={classes.formFieldRow}>
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
@@ -45,7 +45,7 @@ const styles = (theme: Theme) =>
    ...tenantDetailsStyles,
    ...actionsTray,
    ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const PoolsSummary = ({ classes }: IPoolsSummary) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx
@@ -88,7 +88,7 @@ const styles = (theme: Theme) =>
    noUnderLine: {
      textDecoration: "none",
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const SubnetLicenseTenant = ({
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantAuditLogsScreen.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantAuditLogsScreen.tsx
@@ -59,6 +59,7 @@ import {
 } from "../TenantDetails/tenantAuditLogSlice";

 import { HelpBox, WarnIcon } from "mds";
+import FormHr from "../../Common/FormHr";

 interface ILoggingScreenProps {
  classes: any;
@@ -66,7 +67,7 @@ interface ILoggingScreenProps {

 const styles = (theme: Theme) =>
  createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const LoggingScreen = ({ classes }: ILoggingScreenProps) => {
@@ -336,7 +337,7 @@ const LoggingScreen = ({ classes }: ILoggingScreenProps) => {
              </Tabs>
            </Grid>
            <Grid item xs={12}>
-              <hr className={classes.hrClass} />
+              <FormHr />
            </Grid>
            {curTab === 0 && (
              <LoggingDetails
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantCSR.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantCSR.tsx
@@ -47,7 +47,7 @@ const styles = (theme: Theme) =>
    ...actionsTray,
    ...searchField,
    ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const TenantCSR = ({ classes }: ITenantCSRProps) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantConfiguration.tsx
@@ -44,6 +44,7 @@ import { setErrorSnackMessage } from "../../../../systemSlice";
 import api from "../../../../common/api";
 import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 import { MinIOEnvVarsSettings } from "../../../../common/utils";
+import FormHr from "../../Common/FormHr";

 interface ITenantConfiguration {
  classes: any;
@@ -101,7 +102,7 @@ const styles = (theme: Theme) =>
        flexFlow: "column",
      },
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    ...createTenantCommon,
    ...formFieldStyles,
    ...modalBasic,
@@ -191,7 +192,7 @@ const TenantConfiguration = ({ classes }: ITenantConfiguration) => {
        <Grid container spacing={1}>
          <Grid item xs={12}>
            <h1 className={classes.sectionTitle}>Configuration</h1>
-            <hr className={classes.hrClass} />
+            <FormHr />
          </Grid>
          <Grid container spacing={1}>
            {envVars.map((envVar, index) => (
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -149,7 +149,7 @@ const styles = (theme: Theme) =>
      height: 10,
      top: 4,
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const TenantDetails = ({ classes }: ITenantDetailsProps) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEncryption.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEncryption.tsx
@@ -59,6 +59,7 @@ import { setErrorSnackMessage } from "../../../../systemSlice";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import CodeMirrorWrapper from "../../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
+import FormHr from "../../Common/FormHr";

 interface ITenantEncryption {
  classes: any;
@@ -68,7 +69,7 @@ const styles = (theme: Theme) =>
  createStyles({
    ...tenantDetailsStyles,
    ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    ...createTenantCommon,
    ...formFieldStyles,
    ...modalBasic,
@@ -677,7 +678,7 @@ const TenantEncryption = ({ classes }: ITenantEncryption) => {
          />
        </Grid>
        <Grid xs={12}>
-          <hr className={classes.hrClass} />
+          <FormHr />
        </Grid>
        {encryptionEnabled && (
          <Fragment>
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEvents.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEvents.tsx
@@ -44,7 +44,7 @@ const styles = (theme: Theme) =>
    ...actionsTray,
    ...searchField,
    ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const TenantEvents = ({ classes }: ITenantEventsProps) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx
@@ -90,13 +90,17 @@ const styles = (theme: Theme) =>
    loaderAlign: {
      textAlign: "center",
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    ...createTenantCommon,
    ...formFieldStyles,
    ...modalBasic,
    ...wizardCommon,
  });

+function FormHr() {
+  return null;
+}
+
 const TenantIdentityProvider = ({ classes }: ITenantIdentityProvider) => {
  const dispatch = useAppDispatch();

@@ -349,7 +353,7 @@ const TenantIdentityProvider = ({ classes }: ITenantIdentityProvider) => {
        <Fragment>
          <Grid item xs={12}>
            <h1 className={classes.sectionTitle}>Identity Provider</h1>
-            <hr className={classes.hrClass} />
+            <FormHr />
          </Grid>
          <Grid
            item
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx
@@ -43,7 +43,7 @@ const styles = (theme: Theme) =>
    loaderAlign: {
      textAlign: "center",
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const TenantLicense = ({ classes }: ITenantLicense) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMetrics.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMetrics.tsx
@@ -39,7 +39,7 @@ const styles = (theme: Theme) =>
      minHeight: "800px",
      width: "100%",
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const TenantMetrics = ({ classes }: ITenantMetrics) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx
@@ -55,6 +55,7 @@ import {
  setRunAsUser,
 } from "../tenantSecurityContextSlice";
 import TLSHelpBox from "../HelpBox/TLSHelpBox";
+import FormHr from "../../Common/FormHr";

 interface ITenantSecurity {
  classes: any;
@@ -124,7 +125,7 @@ const styles = (theme: Theme) =>
        flexFlow: "column",
      },
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
    ...createTenantCommon,
    ...formFieldStyles,
    ...modalBasic,
@@ -492,7 +493,7 @@ const TenantSecurity = ({ classes }: ITenantSecurity) => {
        <Grid container spacing={1}>
          <Grid item xs={12}>
            <h1 className={classes.sectionTitle}>Security</h1>
-            <hr className={classes.hrClass} />
+            <FormHr />
          </Grid>
          <Grid container spacing={1}>
            <Grid item xs={12}>
@@ -794,7 +795,7 @@ const TenantSecurity = ({ classes }: ITenantSecurity) => {
            )}
            <Grid item xs={12} className={classes.formFieldRow}>
              <h1 className={classes.sectionTitle}>Security Context</h1>
-              <hr className={classes.hrClass} />
+              <FormHr />
            </Grid>
            <Grid item xs={12} className={classes.formFieldRow}>
              <SecurityContextSelector
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
@@ -84,7 +84,7 @@ const styles = (theme: Theme) =>
    autoGeneratedLink: {
      fontStyle: "italic",
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const healthStatusToClass = (health_status: string = "red", classes: any) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantTrace.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantTrace.tsx
@@ -39,7 +39,7 @@ const styles = (theme: Theme) =>
      minHeight: "800px",
      width: "100%",
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const TenantTrace = ({ classes }: ITenantTrace) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx
@@ -47,7 +47,7 @@ const styles = (theme: Theme) =>
  createStyles({
    ...tenantDetailsStyles,
    ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const TenantVolumes = ({ classes }: ITenantVolumesProps) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/hop/Hop.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/hop/Hop.tsx
@@ -57,7 +57,7 @@ const styles = (theme: Theme) =>
      borderBottom: "1px solid #dedede",
    },

-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const Hop = ({ classes }: IHopSimple) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx
@@ -38,7 +38,7 @@ const styles = (theme: Theme) =>
      textDecoration: "none",
      color: "black",
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const PodDetails = ({ classes }: IPodDetailsProps) => {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx
@@ -33,7 +33,6 @@ import api from "../../../../../common/api";
 import { SearchIcon } from "mds";
 import {
  actionsTray,
-  buttonsStyles,
  containerForHeader,
  searchField,
 } from "../../../Common/FormComponents/common/styleLibrary";
@@ -61,7 +60,7 @@ const styles = (theme: Theme) =>
      border: "1px solid #EAEDEE",
      borderRadius: 4,
    },
-    ...buttonsStyles,
+
    ...searchField,
    actionsTray: {
      ...actionsTray.actionsTray,
@@ -80,7 +79,7 @@ const styles = (theme: Theme) =>
        backgroundColor: "#082F5238",
      },
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const PodLogs = ({
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx
@@ -21,8 +21,6 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import {
  actionsTray,
-  buttonsStyles,
-  hrClass,
  searchField,
 } from "../../../Common/FormComponents/common/styleLibrary";
 import { Box } from "@mui/material";
@@ -47,9 +45,8 @@ import {
 const styles = (theme: Theme) =>
  createStyles({
    ...actionsTray,
-    ...buttonsStyles,
+
    ...searchField,
-    ...hrClass,
  });

 const twoColCssGridLayoutConfig = {
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/TenantVolumes.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/TenantVolumes.tsx
@@ -44,7 +44,7 @@ const styles = (theme: Theme) =>
      textDecoration: "none",
      color: "black",
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 const TenantVolumes = ({ classes }: IPVCDetailsProps) => {
--- a/portal-ui/src/screens/Console/Trace/Trace.tsx
+++ b/portal-ui/src/screens/Console/Trace/Trace.tsx
@@ -30,7 +30,6 @@ import { wsProtocol } from "../../../utils/wsUtils";
 import {
  actionsTray,
  containerForHeader,
-  hrClass,
  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
@@ -54,7 +53,6 @@ const styles = (theme: Theme) =>
      width: 100,
    },
    ...actionsTray,
-    ...hrClass,

    ...tableStyles,
    tableWrapper: {
@@ -74,7 +72,7 @@ const styles = (theme: Theme) =>
      width: "14px",
      height: "14px",
    },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface ITrace {
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -80,7 +80,7 @@ const styles = (theme: Theme) =>
      maxWidth: 380,
    },
    ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IUsersProps {
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -89,7 +89,7 @@ const styles = (theme: Theme) =>
    ...actionsTray,
    ...searchField,
    ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  });

 interface IUserDetailsProps {
--- a/portal-ui/src/screens/Console/Watch/Watch.tsx
+++ b/portal-ui/src/screens/Console/Watch/Watch.tsx
@@ -61,7 +61,7 @@ const useStyles = makeStyles((theme: Theme) =>
    ...tableStyles,
    ...actionsTray,
    ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
  })
 );