From 48dfe74aedceb64d7b3f9a239898fcc863024c83 Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Wed, 8 Dec 2021 16:09:29 -0800
Subject: [PATCH] Fix Console Warnings on Browser (#1306)

* Fixed issues with broken styles

* Fix Merge Conflicts

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* some tweaks

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 portal-ui/src/common/BackLink.tsx             |  5 +--
 .../src/screens/Console/Account/Account.tsx   |  2 +-
 .../Console/Account/AddServiceAccount.tsx     |  2 --
 .../Buckets/ListBuckets/ListBuckets.tsx       | 15 ++++++--
 .../Objects/ListObjects/ListObjects.tsx       | 10 ++++--
 .../CSVMultiSelector/CSVMultiSelector.tsx     | 36 +++++++++++--------
 .../FileSelector/FileSelector.tsx             | 24 ++++---------
 .../FormSwitchWrapper/FormSwitchWrapper.tsx   |  5 +++
 .../FormComponents/common/styleLibrary.ts     |  7 ++--
 .../Common/ModalWrapper/ConfirmDialog.tsx     |  6 +++-
 .../Common/ScreenTitle/ScreenTitle.tsx        |  8 ++++-
 .../src/screens/Console/Common/SearchBox.tsx  |  5 ++-
 .../AddTierConfiguration.tsx                  |  1 -
 .../ListTiersConfiguration.tsx                |  2 +-
 .../UpdateTierCredentialsModal.tsx            |  1 -
 .../src/screens/Console/Groups/AddGroup.tsx   |  1 -
 .../screens/Console/Groups/AddGroupMember.tsx |  6 +---
 .../Console/Groups/GroupDetailsHeader.tsx     | 35 ++++++++++++++++++
 .../src/screens/Console/Groups/Groups.tsx     |  6 +---
 .../screens/Console/Groups/GroupsDetails.tsx  | 28 +++------------
 portal-ui/src/screens/Console/Heal/Heal.tsx   |  3 --
 .../Console/Logs/LogSearch/LogsSearchMain.tsx |  7 ----
 .../ConfTargetGeneric.tsx                     |  4 ---
 .../CustomForms/ResetConfigurationModal.tsx   |  6 +++-
 .../ListNotificationEndpoints.tsx             | 10 ++++--
 .../NotificationTypeSelector.tsx              |  2 +-
 .../screens/Console/Policies/ListPolicies.tsx |  2 +-
 .../Console/Policies/PolicyDetails.tsx        |  6 +---
 .../Console/Policies/PolicySelectors.tsx      |  1 +
 .../screens/Console/Policies/SetPolicy.tsx    |  2 --
 .../Tenants/AddTenant/Steps/Affinity.tsx      |  1 -
 .../Tenants/AddTenant/Steps/Configure.tsx     | 22 ------------
 .../Tenants/AddTenant/Steps/Encryption.tsx    |  8 -----
 .../AddTenant/Steps/IdentityProvider.tsx      | 14 --------
 .../Tenants/AddTenant/Steps/Images.tsx        | 12 -------
 .../Tenants/AddTenant/Steps/NameTenant.tsx    |  3 --
 .../Tenants/AddTenant/Steps/Security.tsx      |  3 --
 .../Tenants/AddTenant/Steps/TenantSize.tsx    |  6 ----
 .../Steps/helpers/AddNamespaceModal.tsx       |  6 +++-
 portal-ui/src/screens/Console/Trace/Trace.tsx |  6 ----
 .../Console/Users/AddUserServiceAccount.tsx   |  2 --
 .../Console/Users/ChangeUserGroups.tsx        |  1 -
 .../src/screens/Console/Users/ListUsers.tsx   |  2 +-
 .../src/screens/Console/Users/UserDetails.tsx |  1 -
 44 files changed, 139 insertions(+), 196 deletions(-)
 create mode 100644 portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx

diff --git a/portal-ui/src/common/BackLink.tsx b/portal-ui/src/common/BackLink.tsx
index 668d399d0..74dca0006 100644
--- a/portal-ui/src/common/BackLink.tsx
+++ b/portal-ui/src/common/BackLink.tsx
@@ -47,11 +47,12 @@ interface IBackLink {
   classes: any;
   to: string;
   label: string;
+  className?: any;
 }
 
-const BackLink = ({ to, label, classes }: IBackLink) => {
+const BackLink = ({ to, label, classes, className }: IBackLink) => {
   return (
-    <Link to={to} className={classes.link}>
+    <Link to={to} className={`${classes.link} ${className ? className : ""}`}>
       <div className={classes.icon}>
         <BackSettingsIcon />
       </div>
diff --git a/portal-ui/src/screens/Console/Account/Account.tsx b/portal-ui/src/screens/Console/Account/Account.tsx
index 1fbc6277f..eba0c5fb1 100644
--- a/portal-ui/src/screens/Console/Account/Account.tsx
+++ b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -215,7 +215,7 @@ const Account = ({
           <SearchBox
             placeholder={"Search Service Accounts"}
             onChange={setFilter}
-            classes={classes}
+            overrideClass={classes.searchField}
           />
 
           <Button
diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
index 293cc2993..e96b3dcc5 100644
--- a/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
+++ b/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
@@ -144,7 +144,6 @@ const AddServiceAccount = ({
             <Grid item xs={12}>
               <FormSwitchWrapper
                 value="locking"
-                classes={classes}
                 id="locking"
                 name="locking"
                 checked={addCredentials}
@@ -185,7 +184,6 @@ const AddServiceAccount = ({
                 value="locking"
                 id="locking"
                 name="locking"
-                classes={classes}
                 checked={isRestrictedByPolicy}
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                   setIsRestrictedByPolicy(event.target.checked);
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
index 179f755b9..73e1279bc 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -25,7 +25,10 @@ import { Bucket, BucketList } from "../types";
 import { AddIcon, BucketsIcon } from "../../../../icons";
 import { AppState } from "../../../../store";
 import { setErrorSnackMessage } from "../../../../actions";
-import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  containerForHeader,
+  searchField,
+} from "../../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
 import DeleteBucket from "./DeleteBucket";
@@ -64,7 +67,13 @@ const styles = (theme: Theme) =>
     bucketList: {
       marginTop: 25,
     },
-
+    searchField: {
+      ...searchField.searchField,
+      minWidth: 380,
+      "@media (max-width: 900px)": {
+        minWidth: 220,
+      },
+    },
     ...containerForHeader(theme.spacing(4)),
   });
 
@@ -186,8 +195,8 @@ const ListBuckets = ({
         <Grid item xs={12} className={classes.actionsTray} display="flex">
           <SearchBox
             onChange={setFilterBuckets}
-            classes={classes}
             placeholder="Search Buckets"
+            overrideClass={classes.searchField}
           />
 
           <Grid
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
index f004093a6..d6669180e 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -135,7 +135,12 @@ const styles = (theme: Theme) =>
         right: 10,
       },
     },
-
+    screenTitle: {
+      borderBottom: 0,
+      paddingTop: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+    },
     ...tableStyles,
     ...actionsTray,
     ...searchField,
@@ -1011,6 +1016,7 @@ const ListObjects = ({
       <PageLayout>
         <Grid item xs={12}>
           <ScreenTitle
+            className={classes.screenTitle}
             icon={
               <Fragment>
                 <FolderIcon width={40} />
@@ -1134,8 +1140,8 @@ const ListObjects = ({
           >
             <SearchBox
               onChange={setFilterObjects}
-              classes={classes}
               placeholder="Search Objects"
+              overrideClass={classes.searchField}
             />
           </SecureComponent>
           <div>
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx
index a144ea304..5996a0c26 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx
@@ -56,6 +56,9 @@ const styles = (theme: Theme) =>
       position: "relative",
       marginTop: 15,
     },
+    inputBoxSpacer: {
+      marginBottom: 7,
+    },
   });
 
 const CSVMultiSelector = ({
@@ -140,21 +143,24 @@ const CSVMultiSelector = ({
 
   const inputs = currentElements.map((element, index) => {
     return (
-      <InputBoxWrapper
-        id={`${name}-${index.toString()}`}
-        label={""}
-        classes={classes}
-        name={`${name}-${index.toString()}`}
-        value={currentElements[index]}
-        onChange={onChangeElement}
-        index={index}
-        key={`csv-${name}-${index.toString()}`}
-        placeholder={commonPlaceholder}
-        overlayIcon={index === currentElements.length - 1 ? <AddIcon /> : null}
-        overlayAction={() => {
-          addEmptyLine(currentElements);
-        }}
-      />
+      <div className={classes.inputBoxSpacer}>
+        <InputBoxWrapper
+          id={`${name}-${index.toString()}`}
+          label={""}
+          name={`${name}-${index.toString()}`}
+          value={currentElements[index]}
+          onChange={onChangeElement}
+          index={index}
+          key={`csv-${name}-${index.toString()}`}
+          placeholder={commonPlaceholder}
+          overlayIcon={
+            index === currentElements.length - 1 ? <AddIcon /> : null
+          }
+          overlayAction={() => {
+            addEmptyLine(currentElements);
+          }}
+        />
+      </div>
     );
   });
 
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
index 53aef9982..b4de73b1c 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
@@ -23,7 +23,11 @@ import CancelIcon from "@mui/icons-material/Cancel";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
+import {
+  fieldBasic,
+  fileInputStyles,
+  tooltipHelper,
+} from "../common/styleLibrary";
 import { fileProcess } from "./utils";
 import HelpIcon from "../../../../../icons/HelpIcon";
 import ErrorBlock from "../../../../shared/ErrorBlock";
@@ -42,19 +46,10 @@ interface InputBoxProps {
   value?: string;
 }
 
-const componentHeight = 48;
-
 const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
     ...tooltipHelper,
-    textBoxContainer: {
-      flexGrow: 1,
-      position: "relative",
-      display: "flex",
-      flexWrap: "nowrap",
-      height: componentHeight,
-    },
     valueString: {
       maxWidth: 350,
       whiteSpace: "nowrap",
@@ -62,17 +57,10 @@ const styles = (theme: Theme) =>
       textOverflow: "ellipsis",
       marginTop: 2,
     },
-    fileReselect: {
-      display: "flex",
-      alignItems: "center",
-      height: componentHeight,
-    },
-    fieldBottom: {
-      borderBottom: "#9c9c9c 1px solid",
-    },
     fileInputField: {
       margin: "13px 0",
     },
+    ...fileInputStyles,
   });
 
 const FileSelector = ({
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
index 13820786b..8c92d9c78 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
@@ -105,6 +105,11 @@ const StyledSwitch = withStyles((theme) => ({
   },
   checked: {},
   focusVisible: {},
+  switchContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+  },
 }))(Switch);
 
 const FormSwitchWrapper = ({
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index b564cf7e7..53981dbb8 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -308,6 +308,7 @@ export const predefinedList = {
     textAlign: "left" as const,
     marginRight: 10,
     flexGrow: 0,
+    fontWeight: "normal" as const,
   },
   predefinedList: {
     backgroundColor: "#fbfafa",
@@ -1069,11 +1070,6 @@ export const serviceAccountStyles: any = {
   buttonSpacer: {
     marginRight: "1rem",
   },
-  switchContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-  },
 };
 
 export const tableStyles: any = {
@@ -1136,6 +1132,7 @@ export const fileInputStyles = {
   },
   textBoxContainer: {
     border: "1px solid #EAEAEA",
+    borderRadius: 3,
     padding: 5,
     "& input": {
       width: "100%",
diff --git a/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx b/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx
index 4f9905795..15a71a896 100644
--- a/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx
+++ b/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx
@@ -52,7 +52,6 @@ const ConfirmDialog = ({
   return (
     <Dialog
       open={isOpen}
-      classes={classes}
       onClose={(event, reason) => {
         if (reason !== "backdropClick") {
           onClose(); // close on Esc but not on click outside
@@ -62,6 +61,11 @@ const ConfirmDialog = ({
       onBackdropClick={() => {
         return false;
       }}
+      sx={{
+        "& .MuiPaper-root": {
+          padding: "1rem 2rem 2rem 1rem",
+        },
+      }}
     >
       <DialogTitle className={classes.title}>
         <div className={classes.titleText}>{title}</div>
diff --git a/portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx b/portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx
index dd850b8c1..a37bc4f9c 100644
--- a/portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx
+++ b/portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx
@@ -27,6 +27,7 @@ interface IScreenTitle {
   title?: any;
   subTitle?: any;
   actions?: any;
+  className?: any;
 }
 
 const styles = (theme: Theme) =>
@@ -75,10 +76,15 @@ const ScreenTitle = ({
   title,
   subTitle,
   actions,
+  className,
 }: IScreenTitle) => {
   return (
     <Grid container>
-      <Grid item xs={12} className={classes.screenTitle}>
+      <Grid
+        item
+        xs={12}
+        className={`${classes.screenTitle} ${className ? className : ""}`}
+      >
         <div className={classes.leftItems}>
           {icon ? <div className={classes.headerBarIcon}>{icon}</div> : null}
           <div className={classes.titleColumn}>
diff --git a/portal-ui/src/screens/Console/Common/SearchBox.tsx b/portal-ui/src/screens/Console/Common/SearchBox.tsx
index 273aac993..977bb003b 100644
--- a/portal-ui/src/screens/Console/Common/SearchBox.tsx
+++ b/portal-ui/src/screens/Console/Common/SearchBox.tsx
@@ -20,6 +20,7 @@ type SearchBoxProps = {
   classes: any;
   onChange: (value: string) => void;
   adornmentPosition?: "start" | "end";
+  overrideClass?: any;
 };
 
 const SearchBox = ({
@@ -27,6 +28,8 @@ const SearchBox = ({
   classes,
   onChange,
   adornmentPosition = "end",
+  overrideClass,
+
 }: SearchBoxProps) => {
   const inputProps = {
     disableUnderline: true,
@@ -42,7 +45,7 @@ const SearchBox = ({
   return (
     <TextField
       placeholder={placeholder}
-      className={classes.searchField}
+      className={overrideClass? overrideClass : classes.searchField}
       id="search-resource"
       label=""
       InputProps={inputProps}
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
index e33155f1d..9f21461be 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
@@ -423,7 +423,6 @@ const AddTierConfiguration = ({
                       <div className={classes.formFieldRow}>
                         <FileSelector
                           accept=".json"
-                          classes={classes}
                           id="creds"
                           label="Credentials"
                           name="creds"
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
index bc2465048..8f647f26a 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
@@ -201,7 +201,7 @@ const ListTiersConfiguration = ({
           <SearchBox
             placeholder="Filter"
             onChange={setFilter}
-            classes={classes}
+            overrideClass={classes.searchField}
           />
 
           <div className={classes.rightActionButtons}>
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
index 494ce14ab..35c19793b 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
@@ -171,7 +171,6 @@ const UpdateTierCredentialsModal = ({
             {type === "gcs" && (
               <Fragment>
                 <FileSelector
-                  classes={classes}
                   accept=".json"
                   id="creds"
                   label="Credentials"
diff --git a/portal-ui/src/screens/Console/Groups/AddGroup.tsx b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
index adec78a0c..ac250088a 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
@@ -211,7 +211,6 @@ const AddGroup = ({
             )}
             <Grid item xs={12}>
               <UsersSelectors
-                classes={classes}
                 selectedUsers={selectedUsers}
                 setSelectedUsers={setSelectedUsers}
                 editMode={selectedGroup !== null}
diff --git a/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx b/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
index 00549d0ac..58c63e4ce 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
@@ -67,11 +67,7 @@ const AddGroupMember = ({
   return (
     <ModalWrapper modalOpen={open} onClose={onClose} title={title}>
       <div className={classes.formFieldRow}>
-        <PredefinedList
-          classes={classes}
-          label={`Selected Group`}
-          content={selectedGroup}
-        />
+        <PredefinedList label={`Selected Group`} content={selectedGroup} />
       </div>
       <UsersSelectors
         selectedUsers={selectedUsers}
diff --git a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx b/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
new file mode 100644
index 000000000..f2d405f44
--- /dev/null
+++ b/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
@@ -0,0 +1,35 @@
+import React, { Fragment } from "react";
+import PageHeader from "../Common/PageHeader/PageHeader";
+import { Link } from "react-router-dom";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import withStyles from "@mui/styles/withStyles";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    breadcrumLink: {
+      textDecoration: "none",
+      color: "black",
+    },
+  });
+
+type DetailsHeaderProps = {
+  classes: any;
+};
+
+const GroupDetailsHeader = ({ classes }: DetailsHeaderProps) => {
+  return (
+    <PageHeader
+      label={
+        <Fragment>
+          <Link to={"/groups"} className={classes.breadcrumLink}>
+            Groups
+          </Link>
+        </Fragment>
+      }
+      actions={<React.Fragment />}
+    />
+  );
+};
+
+export default withStyles(styles)(GroupDetailsHeader);
diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
index 2de9b0685..f694591d3 100644
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -205,11 +205,7 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => {
             scopes={[IAM_SCOPES.ADMIN_LIST_GROUPS]}
             errorProps={{ disabled: true }}
           >
-            <SearchBox
-              placeholder={"Search Groups"}
-              onChange={setFilter}
-              classes={classes}
-            />
+            <SearchBox placeholder={"Search Groups"} onChange={setFilter} overrideClass={classes.searchField} />
           </SecureComponent>
 
           <SecureComponent
diff --git a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
index e866d2bf3..931f396b7 100644
--- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
@@ -1,6 +1,5 @@
 import React, { Fragment, useEffect, useState } from "react";
-import PageHeader from "../Common/PageHeader/PageHeader";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import {
@@ -40,6 +39,7 @@ import {
 import SecureComponent, {
   hasPermission,
 } from "../../../common/SecureComponent/SecureComponent";
+import GroupDetailsHeader from "./GroupDetailsHeader";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -96,10 +96,6 @@ interface IGroupDetailsProps {
   setErrorSnackMessage: typeof setErrorSnackMessage;
 }
 
-type DetailsHeaderProps = {
-  classes: any;
-};
-
 type GroupInfo = {
   members?: any[];
   name?: string;
@@ -116,21 +112,6 @@ export const getPoliciesAsString = (policies: string[]): string => {
   return policies.join(", ");
 };
 
-const GroupDetailsHeader = ({ classes }: DetailsHeaderProps) => {
-  return (
-    <PageHeader
-      label={
-        <Fragment>
-          <Link to={"/groups"} className={classes.breadcrumLink}>
-            Groups
-          </Link>
-        </Fragment>
-      }
-      actions={<React.Fragment />}
-    />
-  );
-};
-
 const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
   const [groupDetails, setGroupDetails] = useState<GroupInfo>({});
 
@@ -203,7 +184,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
           onChange={(searchText) => {
             setMemberFilter(searchText);
           }}
-          classes={classes}
+          overrideClass={classes.searchField}
         />
         <SecureComponent
           resource={CONSOLE_UI_RESOURCE}
@@ -280,7 +261,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
   );
   return (
     <React.Fragment>
-      <GroupDetailsHeader classes={classes} />
+      <GroupDetailsHeader />
       <BackLink to={"/groups"} label={"Return to Groups"} />
 
       <PageLayout className={classes.pageContainer}>
@@ -377,7 +358,6 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
           onSaveClick={() => {}}
           title={memberActionText}
           groupStatus={groupEnabled}
-          classes={classes}
           preSelectedUsers={members}
           open={usersOpen}
           onClose={() => {
diff --git a/portal-ui/src/screens/Console/Heal/Heal.tsx b/portal-ui/src/screens/Console/Heal/Heal.tsx
index 912f6cff3..1aee58c2f 100644
--- a/portal-ui/src/screens/Console/Heal/Heal.tsx
+++ b/portal-ui/src/screens/Console/Heal/Heal.tsx
@@ -312,7 +312,6 @@ const Heal = ({ classes, distributedSetup }: IHeal) => {
               <CheckboxWrapper
                 name="recursive"
                 id="recursive"
-                classes={classes}
                 value="recursive"
                 checked={recursive}
                 onChange={(e) => {
@@ -324,7 +323,6 @@ const Heal = ({ classes, distributedSetup }: IHeal) => {
               <CheckboxWrapper
                 name="forceStart"
                 id="forceStart"
-                classes={classes}
                 value="forceStart"
                 checked={forceStart}
                 onChange={(e) => {
@@ -336,7 +334,6 @@ const Heal = ({ classes, distributedSetup }: IHeal) => {
               <CheckboxWrapper
                 name="forceStop"
                 id="forceStop"
-                classes={classes}
                 value="forceStop"
                 checked={forceStop}
                 onChange={(e) => {
diff --git a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
index 21d26b7a8..aa94fea25 100644
--- a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
+++ b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
@@ -283,7 +283,6 @@ const LogsSearchMain = ({
           <Grid item xs={12} className={`${classes.searchOptions}`}>
             <div className={classes.dateRangePicker}>
               <DateRangeSelector
-                classes={classes}
                 setTimeEnd={setTimeEnd}
                 setTimeStart={setTimeStart}
                 timeEnd={timeEnd}
@@ -325,7 +324,6 @@ const LogsSearchMain = ({
               </div>
               <div className={classes.filtersContainer}>
                 <FilterInputWrapper
-                  classes={classes}
                   onChange={setBucket}
                   value={bucket}
                   label={"Bucket"}
@@ -333,7 +331,6 @@ const LogsSearchMain = ({
                   name="bucket"
                 />
                 <FilterInputWrapper
-                  classes={classes}
                   onChange={setApiName}
                   value={apiName}
                   label={"API Name"}
@@ -341,7 +338,6 @@ const LogsSearchMain = ({
                   name="api_name"
                 />
                 <FilterInputWrapper
-                  classes={classes}
                   onChange={setUserAgent}
                   value={userAgent}
                   label={"User Agent"}
@@ -351,7 +347,6 @@ const LogsSearchMain = ({
               </div>
               <div className={classes.filtersContainer}>
                 <FilterInputWrapper
-                  classes={classes}
                   onChange={setObject}
                   value={object}
                   label={"Object"}
@@ -359,7 +354,6 @@ const LogsSearchMain = ({
                   name="object"
                 />
                 <FilterInputWrapper
-                  classes={classes}
                   onChange={setRequestID}
                   value={requestID}
                   label={"Request ID"}
@@ -367,7 +361,6 @@ const LogsSearchMain = ({
                   name="request_id"
                 />
                 <FilterInputWrapper
-                  classes={classes}
                   onChange={setResponseStatus}
                   value={responseStatus}
                   label={"Response Status"}
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx
index 4c529829a..dc0b858a0 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx
@@ -109,7 +109,6 @@ const ConfTargetGeneric = ({
 
         return (
           <FormSwitchWrapper
-            classes={classes}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               const value = e.target.checked ? "true" : "false";
               setValueElement(field.name, value, item);
@@ -125,7 +124,6 @@ const ConfTargetGeneric = ({
       case "csv":
         return (
           <CSVMultiSelector
-            classes={classes}
             elements={valueHolder[item] ? valueHolder[item].value : ""}
             label={field.label}
             name={field.name}
@@ -140,7 +138,6 @@ const ConfTargetGeneric = ({
       case "comment":
         return (
           <CommentBoxWrapper
-            classes={classes}
             id={field.name}
             name={field.name}
             label={field.label}
@@ -155,7 +152,6 @@ const ConfTargetGeneric = ({
       default:
         return (
           <InputBoxWrapper
-            classes={classes}
             id={field.name}
             name={field.name}
             label={field.label}
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ResetConfigurationModal.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ResetConfigurationModal.tsx
index 8203c470b..d118d17b4 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ResetConfigurationModal.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ResetConfigurationModal.tsx
@@ -93,12 +93,16 @@ const ResetConfigurationModal = ({
   return (
     <Dialog
       open={resetOpen}
-      classes={classes}
       onClose={() => {
         closeResetModalAndRefresh(false);
       }}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
+      sx={{
+        "& .MuiPaper-root": {
+          padding: "1rem 2rem 2rem 1rem",
+        },
+      }}
     >
       <DialogTitle id="alert-dialog-title" className={classes.title}>
         <div className={classes.titleText}>Restore Defaults</div>
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
index 1472fad26..0c6d04b91 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
@@ -58,7 +58,6 @@ interface IListNotificationEndpoints {
 const styles = (theme: Theme) =>
   createStyles({
     ...actionsTray,
-    ...searchField,
     ...settingsCommon,
     ...containerForHeader(theme.spacing(4)),
     twHeight: {
@@ -73,6 +72,13 @@ const styles = (theme: Theme) =>
         whiteSpace: "nowrap",
       },
     },
+    searchField: {
+      ...searchField.searchField,
+      minWidth: 380,
+      "@media (max-width: 900px)": {
+        minWidth: 220,
+      },
+    },
   });
 
 const ListNotificationEndpoints = ({
@@ -140,9 +146,9 @@ const ListNotificationEndpoints = ({
       <PageLayout>
         <Grid item xs={12} className={classes.actionsTray}>
           <SearchBox
-            classes={classes}
             placeholder="Search target"
             onChange={setFilter}
+            overrideClass={classes.searchField}
           />
           <div className={classes.rightActionItems}>
             <BoxIconButton
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
index 7dfabd734..ff9cf35e8 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
@@ -45,9 +45,9 @@ const NotificationTypeSelector = ({ classes }: INotificationTypeSelector) => {
     <Fragment>
       <PageHeader label="Notification Endpoints" />
       <BackLink
-        classes={classes}
         to="/notification-endpoints"
         label="Return to Configured Endpoints"
+        className={classes.link}
       />
       <PageLayout>
         <div className={classes.iconContainer}>
diff --git a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
index 817a95549..b7e619c86 100644
--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -199,8 +199,8 @@ const ListPolicies = ({ classes, setErrorSnackMessage }: IPoliciesProps) => {
         <Grid item xs={12} className={classes.actionsTray}>
           <SearchBox
             onChange={setFilterPolicies}
-            classes={classes}
             placeholder="Search Policies"
+            overrideClass={classes.searchField}
           />
 
           <SecureComponent
diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
index 8859bae58..a734923ff 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -331,11 +331,7 @@ const PolicyDetails = ({
           </Fragment>
         }
       />
-      <BackLink
-        to={"/policies"}
-        label={"Return to Policies"}
-        classes={classes}
-      />
+      <BackLink to={"/policies"} label={"Return to Policies"} />
       <PageLayout className={classes.pageContainer}>
         <Grid item xs={12}>
           <ScreenTitle
diff --git a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
index d33b8f076..f53d3db16 100644
--- a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
@@ -145,6 +145,7 @@ const PolicySelectors = ({
                   onChange={(value) => {
                     setFilter(value);
                   }}
+                  overrideClass={classes.searchField}
                 />
               </div>
             </Grid>
diff --git a/portal-ui/src/screens/Console/Policies/SetPolicy.tsx b/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
index 335302f1e..8b6ebe205 100644
--- a/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
@@ -147,14 +147,12 @@ const SetPolicy = ({
     >
       <Grid item xs={12}>
         <PredefinedList
-          classes={classes}
           label={`Selected ${selectedGroup !== null ? "Group" : "User"}`}
           content={selectedGroup !== null ? selectedGroup : userName}
         />
       </Grid>
       <Grid item xs={12}>
         <PredefinedList
-          classes={classes}
           label={"Current Policy"}
           content={actualPolicy.join(", ")}
         />
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
index 700907156..645137e6a 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
@@ -246,7 +246,6 @@ const Affinity = ({
           </div>
           <Grid item className={classes.radioField}>
             <RadioGroupSelector
-              classes={classes}
               currentSelection={podAffinity}
               id="affinity-options"
               name="affinity-options"
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
index f2abe188b..77c9050a3 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
@@ -498,7 +498,6 @@ const Configure = ({
           id="expose_minio"
           name="expose_minio"
           checked={exposeMinIO}
-          classes={classes}
           onChange={(e) => {
             const targetD = e.target;
             const checked = targetD.checked;
@@ -513,7 +512,6 @@ const Configure = ({
           value="expose_console"
           id="expose_console"
           name="expose_console"
-          classes={classes}
           checked={exposeConsole}
           onChange={(e) => {
             const targetD = e.target;
@@ -560,7 +558,6 @@ const Configure = ({
                 <div className={classes.containerItem}>
                   <InputBoxWrapper
                     type="number"
-                    classes={classes}
                     id="tenant_securityContext_runAsUser"
                     name="tenant_securityContext_runAsUser"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -582,7 +579,6 @@ const Configure = ({
                 <div className={classes.containerItem}>
                   <InputBoxWrapper
                     type="number"
-                    classes={classes}
                     id="tenant_securityContext_runAsGroup"
                     name="tenant_securityContext_runAsGroup"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -605,7 +601,6 @@ const Configure = ({
                 <div className={classes.containerItem}>
                   <InputBoxWrapper
                     type="number"
-                    classes={classes}
                     id="tenant_securityContext_fsGroup"
                     name="tenant_securityContext_fsGroup"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -630,7 +625,6 @@ const Configure = ({
             <Grid item xs={12} className={classes.configSectionItem}>
               <div className={classes.multiContainer}>
                 <FormSwitchWrapper
-                  classes={classes}
                   value="tenantSecurityContextRunAsNonRoot"
                   id="tenant_securityContext_runAsNonRoot"
                   name="tenant_securityContext_runAsNonRoot"
@@ -669,7 +663,6 @@ const Configure = ({
         <Grid xs={12} className={classes.logSearchCustomFields}>
           <Grid item xs={12}>
             <SelectWrapper
-              classes={classes}
               id="log_search_storage_class"
               name="log_search_storage_class"
               onChange={(e: SelectChangeEvent<string>) => {
@@ -690,7 +683,6 @@ const Configure = ({
                 type="number"
                 id="log_search_volume_size"
                 name="log_search_volume_size"
-                classes={classes}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   updateField("logSearchVolumeSize", e.target.value);
                   cleanValidation("log_search_volume_size");
@@ -720,7 +712,6 @@ const Configure = ({
                     type="number"
                     id="logSearch_securityContext_runAsUser"
                     name="logSearch_securityContext_runAsUser"
-                    classes={classes}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       updateField("logSearchSecurityContext", {
                         ...logSearchSecurityContext,
@@ -743,7 +734,6 @@ const Configure = ({
                     type="number"
                     id="logSearch_securityContext_runAsGroup"
                     name="logSearch_securityContext_runAsGroup"
-                    classes={classes}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       updateField("logSearchSecurityContext", {
                         ...logSearchSecurityContext,
@@ -767,7 +757,6 @@ const Configure = ({
                     type="number"
                     id="logSearch_securityContext_fsGroup"
                     name="logSearch_securityContext_fsGroup"
-                    classes={classes}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       updateField("logSearchSecurityContext", {
                         ...logSearchSecurityContext,
@@ -794,7 +783,6 @@ const Configure = ({
                   value="logSearchSecurityContextRunAsNonRoot"
                   id="logSearch_securityContext_runAsNonRoot"
                   name="logSearch_securityContext_runAsNonRoot"
-                  classes={classes}
                   checked={logSearchSecurityContext.runAsNonRoot}
                   onChange={(e) => {
                     const targetD = e.target;
@@ -823,7 +811,6 @@ const Configure = ({
                     type="number"
                     id="postgres_securityContext_runAsUser"
                     name="postgres_securityContext_runAsUser"
-                    classes={classes}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       updateField("logSearchPostgresSecurityContext", {
                         ...logSearchPostgresSecurityContext,
@@ -846,7 +833,6 @@ const Configure = ({
                     type="number"
                     id="postgres_securityContext_runAsGroup"
                     name="postgres_securityContext_runAsGroup"
-                    classes={classes}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       updateField("logSearchPostgresSecurityContext", {
                         ...logSearchPostgresSecurityContext,
@@ -869,7 +855,6 @@ const Configure = ({
                     type="number"
                     id="postgres_securityContext_fsGroup"
                     name="postgres_securityContext_fsGroup"
-                    classes={classes}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       updateField("logSearchPostgresSecurityContext", {
                         ...logSearchPostgresSecurityContext,
@@ -895,7 +880,6 @@ const Configure = ({
                   value="postgresSecurityContextRunAsNonRoot"
                   id="postgres_securityContext_runAsNonRoot"
                   name="postgres_securityContext_runAsNonRoot"
-                  classes={classes}
                   checked={logSearchPostgresSecurityContext.runAsNonRoot}
                   onChange={(e) => {
                     const targetD = e.target;
@@ -933,7 +917,6 @@ const Configure = ({
             <SelectWrapper
               id="prometheus_storage_class"
               name="prometheus_storage_class"
-              classes={classes}
               onChange={(e: SelectChangeEvent<string>) => {
                 updateField(
                   "prometheusSelectedStorageClass",
@@ -952,7 +935,6 @@ const Configure = ({
                 type="number"
                 id="prometheus_volume_size"
                 name="prometheus_volume_size"
-                classes={classes}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   updateField("prometheusVolumeSize", e.target.value);
                   cleanValidation("prometheus_volume_size");
@@ -980,7 +962,6 @@ const Configure = ({
                     type="number"
                     id="prometheus_securityContext_runAsUser"
                     name="prometheus_securityContext_runAsUser"
-                    classes={classes}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       updateField("prometheusSecurityContext", {
                         ...prometheusSecurityContext,
@@ -1004,7 +985,6 @@ const Configure = ({
                     type="number"
                     id="prometheus_securityContext_runAsGroup"
                     name="prometheus_securityContext_runAsGroup"
-                    classes={classes}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       updateField("prometheusSecurityContext", {
                         ...prometheusSecurityContext,
@@ -1028,7 +1008,6 @@ const Configure = ({
                     type="number"
                     id="prometheus_securityContext_fsGroup"
                     name="prometheus_securityContext_fsGroup"
-                    classes={classes}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       updateField("prometheusSecurityContext", {
                         ...prometheusSecurityContext,
@@ -1056,7 +1035,6 @@ const Configure = ({
                   value="prometheusSecurityContextRunAsNonRoot"
                   id="prometheus_securityContext_runAsNonRoot"
                   name="prometheus_securityContext_runAsNonRoot"
-                  classes={classes}
                   checked={prometheusSecurityContext.runAsNonRoot}
                   onChange={(e) => {
                     const targetD = e.target;
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
index 33c1935ea..258cce3a9 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
@@ -505,7 +505,6 @@ const Encryption = ({
                       <fieldset className={classes.fieldGroup}>
                         <legend>Encryption Service Certificates</legend>
                         <FileSelector
-                          classes={classes}
                           onChange={(encodedValue, fileName) => {
                             addFileServerCert("key", fileName, encodedValue);
                             cleanValidation("serverKey");
@@ -519,7 +518,6 @@ const Encryption = ({
                           required={!enableAutoCert}
                         />
                         <FileSelector
-                          classes={classes}
                           onChange={(encodedValue, fileName) => {
                             addFileServerCert("cert", fileName, encodedValue);
                             cleanValidation("serverCert");
@@ -541,7 +539,6 @@ const Encryption = ({
                       <fieldset className={classes.fieldGroup}>
                         <legend>Mutual TLS authentication</legend>
                         <FileSelector
-                          classes={classes}
                           onChange={(encodedValue, fileName) => {
                             addFileClientCert("key", fileName, encodedValue);
                             cleanValidation("clientKey");
@@ -555,7 +552,6 @@ const Encryption = ({
                           required={!enableAutoCert}
                         />
                         <FileSelector
-                          classes={classes}
                           onChange={(encodedValue, fileName) => {
                             addFileClientCert("cert", fileName, encodedValue);
                             cleanValidation("clientCert");
@@ -686,7 +682,6 @@ const Encryption = ({
                 <fieldset className={classes.fieldGroup}>
                   <legend>Mutual TLS authentication (optional)</legend>
                   <FileSelector
-                    classes={classes}
                     onChange={(encodedValue, fileName) => {
                       addFileVaultCert("key", fileName, encodedValue);
                       cleanValidation("vault_key");
@@ -698,7 +693,6 @@ const Encryption = ({
                     value={vaultCertificate.key}
                   />
                   <FileSelector
-                    classes={classes}
                     onChange={(encodedValue, fileName) => {
                       addFileVaultCert("cert", fileName, encodedValue);
                       cleanValidation("vault_cert");
@@ -710,7 +704,6 @@ const Encryption = ({
                     value={vaultCertificate.cert}
                   />
                   <FileSelector
-                    classes={classes}
                     onChange={(encodedValue, fileName) => {
                       addFileVaultCa(fileName, encodedValue);
                       cleanValidation("vault_ca");
@@ -1052,7 +1045,6 @@ const Encryption = ({
                   <legend>Custom CA Root certificate verification</legend>
 
                   <FileSelector
-                    classes={classes}
                     onChange={(encodedValue, fileName) => {
                       addFileGemaltoCa(fileName, encodedValue);
                       cleanValidation("gemalto_ca");
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
index 114ed6be2..3c2963615 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
@@ -365,7 +365,6 @@ const IdentityProvider = ({
               id={`ad-userdn-${index.toString()}`}
               label={""}
               placeholder=""
-              classes={classes}
               name={`ad-userdn-${index.toString()}`}
               value={ADUserDNs[index]}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -536,7 +535,6 @@ const IdentityProvider = ({
             <InputBoxWrapper
               id="AD_URL"
               name="AD_URL"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("ADURL", e.target.value);
                 cleanValidation("AD_URL");
@@ -553,7 +551,6 @@ const IdentityProvider = ({
               value="ad_skipTLS"
               id="ad_skipTLS"
               name="ad_skipTLS"
-              classes={classes}
               checked={ADSkipTLS}
               onChange={(e) => {
                 const targetD = e.target;
@@ -568,7 +565,6 @@ const IdentityProvider = ({
               value="ad_serverInsecure"
               id="ad_serverInsecure"
               name="ad_serverInsecure"
-              classes={classes}
               checked={ADServerInsecure}
               onChange={(e) => {
                 const targetD = e.target;
@@ -596,7 +592,6 @@ const IdentityProvider = ({
               value="ad_serverStartTLS"
               id="ad_serverStartTLS"
               name="ad_serverStartTLS"
-              classes={classes}
               checked={ADServerStartTLS}
               onChange={(e) => {
                 const targetD = e.target;
@@ -610,7 +605,6 @@ const IdentityProvider = ({
             <InputBoxWrapper
               id="ad_userNameFormat"
               name="ad_userNameFormat"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("ADUserNameFormat", e.target.value);
               }}
@@ -623,7 +617,6 @@ const IdentityProvider = ({
             <InputBoxWrapper
               id="ad_userNameFilter"
               name="ad_userNameFilter"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("ADUserNameSearchFilter", e.target.value);
               }}
@@ -636,7 +629,6 @@ const IdentityProvider = ({
             <InputBoxWrapper
               id="ad_groupSearchBaseDN"
               name="ad_groupSearchBaseDN"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("ADGroupSearchBaseDN", e.target.value);
               }}
@@ -649,7 +641,6 @@ const IdentityProvider = ({
             <InputBoxWrapper
               id="ad_groupSearchFilter"
               name="ad_groupSearchFilter"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("ADGroupSearchFilter", e.target.value);
               }}
@@ -662,7 +653,6 @@ const IdentityProvider = ({
             <InputBoxWrapper
               id="ad_groupNameAttribute"
               name="ad_groupNameAttribute"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("ADGroupNameAttribute", e.target.value);
               }}
@@ -675,7 +665,6 @@ const IdentityProvider = ({
             <InputBoxWrapper
               id="ad_lookupBindDN"
               name="ad_lookupBindDN"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("ADLookupBindDN", e.target.value);
               }}
@@ -688,7 +677,6 @@ const IdentityProvider = ({
             <InputBoxWrapper
               id="ad_lookupBindPassword"
               name="ad_lookupBindPassword"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("ADLookupBindPassword", e.target.value);
               }}
@@ -701,7 +689,6 @@ const IdentityProvider = ({
             <InputBoxWrapper
               id="ad_userDNSearchBaseDN"
               name="ad_userDNSearchBaseDN"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("ADUserDNSearchBaseDN", e.target.value);
               }}
@@ -714,7 +701,6 @@ const IdentityProvider = ({
             <InputBoxWrapper
               id="ad_userDNSearchFilter"
               name="ad_userDNSearchFilter"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("ADUserDNSearchFilter", e.target.value);
               }}
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx
index bb21e5ee5..36aa2a85e 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx
@@ -320,7 +320,6 @@ const Images = ({
           <InputBoxWrapper
             id="image"
             name="image"
-            classes={classes}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               updateField("imageName", e.target.value);
               cleanValidation("image");
@@ -335,7 +334,6 @@ const Images = ({
           <InputBoxWrapper
             id="logSearchImage"
             name="logSearchImage"
-            classes={classes}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               updateField("logSearchImage", e.target.value);
               cleanValidation("logSearchImage");
@@ -350,7 +348,6 @@ const Images = ({
           <InputBoxWrapper
             id="kesImage"
             name="kesImage"
-            classes={classes}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               updateField("kesImage", e.target.value);
               cleanValidation("kesImage");
@@ -365,7 +362,6 @@ const Images = ({
           <InputBoxWrapper
             id="logSearchPostgresImage"
             name="logSearchPostgresImage"
-            classes={classes}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               updateField("logSearchPostgresImage", e.target.value);
               cleanValidation("logSearchPostgresImage");
@@ -380,7 +376,6 @@ const Images = ({
           <InputBoxWrapper
             id="logSearchPostgresInitImage"
             name="logSearchPostgresInitImage"
-            classes={classes}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               updateField("logSearchPostgresInitImage", e.target.value);
               cleanValidation("logSearchPostgresInitImage");
@@ -395,7 +390,6 @@ const Images = ({
           <InputBoxWrapper
             id="prometheusImage"
             name="prometheusImage"
-            classes={classes}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               updateField("prometheusImage", e.target.value);
               cleanValidation("prometheusImage");
@@ -410,7 +404,6 @@ const Images = ({
           <InputBoxWrapper
             id="prometheusSidecarImage"
             name="prometheusSidecarImage"
-            classes={classes}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               updateField("prometheusSidecarImage", e.target.value);
               cleanValidation("prometheusSidecarImage");
@@ -425,7 +418,6 @@ const Images = ({
           <InputBoxWrapper
             id="prometheusInitImage"
             name="prometheusInitImage"
-            classes={classes}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               updateField("prometheusInitImage", e.target.value);
               cleanValidation("prometheusInitImage");
@@ -445,7 +437,6 @@ const Images = ({
               value="custom_docker_hub"
               id="custom_docker_hub"
               name="custom_docker_hub"
-              classes={classes}
               checked={customDockerhub}
               onChange={(e) => {
                 const targetD = e.target;
@@ -464,7 +455,6 @@ const Images = ({
             <InputBoxWrapper
               id="registry"
               name="registry"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("imageRegistry", e.target.value);
               }}
@@ -479,7 +469,6 @@ const Images = ({
             <InputBoxWrapper
               id="registryUsername"
               name="registryUsername"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("imageRegistryUsername", e.target.value);
               }}
@@ -493,7 +482,6 @@ const Images = ({
             <InputBoxWrapper
               id="registryPassword"
               name="registryPassword"
-              classes={classes}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 updateField("imageRegistryPassword", e.target.value);
               }}
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx
index f08739d63..c1ee527e2 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx
@@ -283,7 +283,6 @@ const NameTenant = ({
                 <div className={classes.formFieldRow}>
                   <InputBoxWrapper
                     id="tenant-name"
-                    classes={classes}
                     name="tenant-name"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       updateField("tenantName", e.target.value);
@@ -298,7 +297,6 @@ const NameTenant = ({
               </Grid>
               <Grid item xs={12} className={classes.formFieldRow}>
                 <InputBoxWrapper
-                  classes={classes}
                   id="namespace"
                   name="namespace"
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -315,7 +313,6 @@ const NameTenant = ({
               </Grid>
               <Grid item xs={12} className={classes.formFieldRow}>
                 <SelectWrapper
-                  classes={classes}
                   id="storage_class"
                   name="storage_class"
                   onChange={(e: SelectChangeEvent<string>) => {
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
index 9a525f974..f9c6333f2 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
@@ -251,7 +251,6 @@ const Security = ({
                       >
                         <Grid item xs={10} className={classes.fileItem}>
                           <FileSelector
-                            classes={classes}
                             onChange={(encodedValue, fileName) => {
                               addFileToKeyPair(
                                 keyPair.id,
@@ -267,7 +266,6 @@ const Security = ({
                             value={keyPair.cert}
                           />
                           <FileSelector
-                            classes={classes}
                             onChange={(encodedValue, fileName) => {
                               addFileToKeyPair(
                                 keyPair.id,
@@ -323,7 +321,6 @@ const Security = ({
                       >
                         <Grid item xs={6}>
                           <FileSelector
-                            classes={classes}
                             onChange={(encodedValue, fileName) => {
                               addFileToCaCertificates(
                                 keyPair.id,
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx
index d6e6c8ddb..aadbe56ab 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx
@@ -330,7 +330,6 @@ const TenantSize = ({
           id="nodes"
           name="nodes"
           type="number"
-          classes={classes}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             updateField("nodes", e.target.value);
             cleanValidation("nodes");
@@ -348,7 +347,6 @@ const TenantSize = ({
           id="drivesps"
           name="drivesps"
           type="number"
-          classes={classes}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             updateField("drivesPerServer", e.target.value);
             cleanValidation("drivesps");
@@ -369,7 +367,6 @@ const TenantSize = ({
                 type="number"
                 id="volume_size"
                 name="volume_size"
-                classes={classes}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   updateField("volumeSize", e.target.value);
                   cleanValidation("volume_size");
@@ -385,7 +382,6 @@ const TenantSize = ({
                 <SelectWrapper
                   label={""}
                   id="size_factor"
-                  classes={classes}
                   name="size_factor"
                   value={sizeFactor}
                   disabled={selectedStorageClass === ""}
@@ -406,7 +402,6 @@ const TenantSize = ({
             type="number"
             id="memory_per_node"
             name="memory_per_node"
-            classes={classes}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               updateField("memoryNode", e.target.value);
               cleanValidation("memory_per_node");
@@ -423,7 +418,6 @@ const TenantSize = ({
           <SelectWrapper
             id="ec_parity"
             name="ec_parity"
-            classes={classes}
             onChange={(e: SelectChangeEvent<string>) => {
               updateField("ecParity", e.target.value as string);
             }}
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx
index 3bc8445a5..f778cfe44 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/helpers/AddNamespaceModal.tsx
@@ -96,12 +96,16 @@ const AddNamespaceModal = ({
   return (
     <Dialog
       open={addNamespaceOpen}
-      classes={classes}
       onClose={() => {
         closeAddNamespaceModalAndRefresh(false);
       }}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
+      sx={{
+        "& .MuiPaper-root": {
+          padding: "1rem 2rem 2rem 1rem",
+        },
+      }}
     >
       <DialogTitle id="alert-dialog-title" className={classes.title}>
         <div className={classes.titleText}>Create new namespace</div>
diff --git a/portal-ui/src/screens/Console/Trace/Trace.tsx b/portal-ui/src/screens/Console/Trace/Trace.tsx
index ad4ea8f75..d6b8f69a8 100644
--- a/portal-ui/src/screens/Console/Trace/Trace.tsx
+++ b/portal-ui/src/screens/Console/Trace/Trace.tsx
@@ -285,7 +285,6 @@ const Trace = ({
             <div className={classes.midColumnCheckboxes}>
               <CheckboxWrapper
                 checked={all}
-                classes={classes}
                 id={"all_calls"}
                 name={"all_calls"}
                 label={"All"}
@@ -298,7 +297,6 @@ const Trace = ({
               <CheckboxWrapper
                 checked={s3 || all}
                 id={"s3_calls"}
-                classes={classes}
                 name={"s3_calls"}
                 label={"S3"}
                 onChange={(item) => {
@@ -310,7 +308,6 @@ const Trace = ({
               <CheckboxWrapper
                 checked={internal || all}
                 id={"internal_calls"}
-                classes={classes}
                 name={"internal_calls"}
                 label={"Internal"}
                 onChange={(item) => {
@@ -322,7 +319,6 @@ const Trace = ({
               <CheckboxWrapper
                 checked={storage || all}
                 id={"storage_calls"}
-                classes={classes}
                 name={"storage_calls"}
                 label={"Storage"}
                 onChange={(item) => {
@@ -334,7 +330,6 @@ const Trace = ({
               <CheckboxWrapper
                 checked={os || all}
                 id={"os_calls"}
-                classes={classes}
                 name={"os_calls"}
                 label={"OS"}
                 onChange={(item) => {
@@ -350,7 +345,6 @@ const Trace = ({
             <CheckboxWrapper
               checked={errors}
               id={"only_errors"}
-              classes={classes}
               name={"only_errors"}
               label={"Display only Errors"}
               onChange={(item) => {
diff --git a/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx b/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
index ab871bfc3..1099e91dc 100644
--- a/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
@@ -146,7 +146,6 @@ const AddUserServiceAccount = ({
           <Grid item xs={12}>
             <Grid item xs={12}>
               <FormSwitchWrapper
-                classes={classes}
                 value="locking"
                 id="locking"
                 name="locking"
@@ -189,7 +188,6 @@ const AddUserServiceAccount = ({
                 value="locking"
                 id="locking"
                 name="locking"
-                classes={classes}
                 checked={isRestrictedByPolicy}
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                   setIsRestrictedByPolicy(event.target.checked);
diff --git a/portal-ui/src/screens/Console/Users/ChangeUserGroups.tsx b/portal-ui/src/screens/Console/Users/ChangeUserGroups.tsx
index d412414ba..d1e2279f8 100644
--- a/portal-ui/src/screens/Console/Users/ChangeUserGroups.tsx
+++ b/portal-ui/src/screens/Console/Users/ChangeUserGroups.tsx
@@ -162,7 +162,6 @@ const ChangeUserGroups = ({
           <Grid container>
             <Grid item xs={12} className={classes.formScrollable}>
               <GroupsSelectors
-                classes={classes}
                 selectedGroups={selectedGroups}
                 setSelectedGroups={(elements: string[]) => {
                   setSelectedGroups(elements);
diff --git a/portal-ui/src/screens/Console/Users/ListUsers.tsx b/portal-ui/src/screens/Console/Users/ListUsers.tsx
index 4e2bc424b..24d49b81a 100644
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -209,7 +209,7 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
           <SearchBox
             placeholder={"Search Users"}
             onChange={setFilter}
-            classes={classes}
+            overrideClass={classes.searchField}
           />
           <Button
             variant="outlined"
diff --git a/portal-ui/src/screens/Console/Users/UserDetails.tsx b/portal-ui/src/screens/Console/Users/UserDetails.tsx
index 41f7d8dc7..9016e89ce 100644
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -326,7 +326,6 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
               content: (
                 <UserServiceAccountsPanel
                   user={userName}
-                  classes={classes}
                   hasPolicy={hasPolicy}
                 />
               ),