Remove Unused CSS Classes (#1308)

* Remove Unused CSS Classes

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

* Remove Warnings

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

portal-ui/src/common/HelpBox.tsx

@@ -44,9 +44,6 @@ const styles = (theme: Theme) =>
         marginRight: ".8rem",
       },
     },
-    iconSize: {
-      fontSize: 64,
-    },
     helpText: {
       fontSize: 16,
     },

portal-ui/src/screens/Console/Account/Account.tsx

@@ -54,42 +54,6 @@ const CredentialsPrompt = withSuspense(
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-    addSideBar: {
-      width: "480px",
-      minWidth: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    wrapCell: {
-      maxWidth: "200px",
-      whiteSpace: "normal",
-      wordWrap: "break-word",
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    imageIcon: {
-      height: "100%",
-    },
-    iconRoot: {
-      textAlign: "center",
-    },
     ...actionsTray,
     ...searchField,
     searchField: {

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

@@ -56,48 +56,6 @@ const EditAccessRuleModal = withSuspense(
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    fileName: {
-      display: "flex",
-      alignItems: "center",
-    },
-    fileNameText: {
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-    },
-    buttonsContainer: {
-      "& .MuiButtonBase-root": {
-        marginLeft: 10,
-      },
-    },
-    browsePaper: {
-      height: "calc(100vh - 280px)",
-    },
     "@global": {
       ".rowLine:hover  .iconFileElm": {
         backgroundImage: "url(/images/ob_file_filled.svg)",
@@ -110,12 +68,6 @@ const styles = (theme: Theme) =>
       marginLeft: "10px",
       align: "right",
     },
-    badgeOverlap: {
-      "& .MuiBadge-badge": {
-        top: 35,
-        right: 10,
-      },
-    },
     ...actionsTray,
     ...searchField,
     ...objectBrowserCommon,

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

@@ -47,10 +47,6 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     ...modalBasic,
   });
 
@@ -121,12 +117,7 @@ const AddAccessRule = ({
             />
           </Grid>
           <Grid item xs={12} className={classes.buttonContainer}>
-            <button
-              type="button"
-              color="primary"
-              className={classes.clearButton}
-              onClick={resetForm}
-            >
+            <button type="button" color="primary" onClick={resetForm}>
               Clear
             </button>
             <Button

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

@@ -14,7 +14,7 @@
 // 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 React, { useState, useEffect, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
@@ -25,8 +25,8 @@ import Grid from "@mui/material/Grid";
 import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import {
-  ITierResponse,
   ITierElement,
+  ITierResponse,
 } from "../../Configurations/TiersConfiguration/types";
 import { ErrorResponseHandler } from "../../../../common/types";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -53,14 +53,6 @@ interface ITiersDropDown {
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
     buttonContainer: {
       textAlign: "right",
     },

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

@@ -44,14 +44,6 @@ interface IReplicationModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
     buttonContainer: {
       textAlign: "right",
     },

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

@@ -24,7 +24,6 @@ import Grid from "@mui/material/Grid";
 import api from "../../../../common/api";
 import { BucketInfo } from "../types";
 import {
-  actionsTray,
   buttonsStyles,
   containerForHeader,
   hrClass,
@@ -84,116 +83,16 @@ const BucketLifecyclePanel = withSuspense(
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
     pageContainer: {
       border: "1px solid #EAEAEA",
       height: "100%",
     },
     ...pageContentStyles,
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    noRecords: {
-      lineHeight: "24px",
-      textAlign: "center",
-      padding: "20px",
-    },
-    gridWrapper: {
-      width: 320,
-    },
-    gridContainer: {
-      display: "grid",
-      gridTemplateColumns: "auto auto",
-      gridGap: 8,
-      justifyContent: "flex-start",
-      alignItems: "center",
-      "& div:not(.MuiCircularProgress-root)": {
-        display: "flex",
-        alignItems: "center",
-      },
-      "& div:nth-child(odd)": {
-        justifyContent: "flex-end",
-        fontWeight: 700,
-      },
-      "& div:nth-child(2n)": {
-        minWidth: 150,
-      },
-    },
-    masterActions: {
-      width: "25%",
-      minWidth: "120px",
-      "& div": {
-        margin: "5px 0px",
-      },
-    },
-
-    headerContainer: {
-      display: "flex",
-      justifyContent: "space-between",
-    },
-    capitalizeFirst: {
-      textTransform: "capitalize",
-      "& .min-icon": {
-        width: 16,
-        height: 16,
-      },
-    },
-    doubleElement: {
-      display: "flex",
-      justifyContent: "space-between",
-    },
-    encCheckbox: {
-      margin: 0,
-      padding: 0,
-    },
-    tabPan: {
-      marginTop: "5px",
-    },
-    fixedHeight: {
-      height: 165,
-      minWidth: 247,
-      padding: "25px 28px",
-      "& svg": {
-        maxHeight: 18,
-      },
-    },
-    routerContainer: {
-      marginTop: 5,
-    },
-    titleCol: {
-      fontWeight: "bold",
-    },
-
     breadcrumLink: {
       textDecoration: "none",
       color: "black",
     },
     ...searchField,
-    ...actionsTray,
-    actionsTray: {
-      ...actionsTray.actionsTray,
-      padding: "15px 0 0",
-    },
     capitalize: {
       textTransform: "capitalize",
     },

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

@@ -59,6 +59,7 @@ import SecureComponent, {
 } from "../../../../common/SecureComponent/SecureComponent";
 
 import withSuspense from "../../Common/Components/withSuspense";
+
 const AddBucketTagModal = withSuspense(
   React.lazy(() => import("./AddBucketTagModal"))
 );
@@ -110,12 +111,6 @@ const styles = (theme: Theme) =>
     reportedUsage: {
       padding: "15px",
     },
-    dualCardLeft: {
-      paddingRight: "5px",
-    },
-    dualCardRight: {
-      paddingLeft: "5px",
-    },
     capitalizeFirst: {
       textTransform: "capitalize",
       "& .min-icon": {

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

@@ -42,13 +42,6 @@ interface IDeleteAccessRule {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     ...modalBasic,
   });
 

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

@@ -40,13 +40,6 @@ interface IDeleteBucketTagModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     ...modalBasic,
   });
 

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

@@ -48,10 +48,6 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     ...modalBasic,
   });
 

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

@@ -33,12 +33,6 @@ import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/Q
 
 const styles = (theme: Theme) =>
   createStyles({
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
     buttonContainer: {
       textAlign: "right",
     },

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

@@ -32,14 +32,6 @@ import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapp
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
     buttonContainer: {
       textAlign: "right",
     },

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

@@ -35,22 +35,9 @@ import api from "../../../../common/api";
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
     buttonContainer: {
       textAlign: "right",
     },
-    multiContainer: {
-      display: "flex",
-      alignItems: "center" as const,
-      justifyContent: "flex-start" as const,
-    },
     ...modalBasic,
   });
 

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

@@ -61,20 +61,6 @@ const styles = (theme: Theme) =>
         marginLeft: 8,
       },
     },
-    multiContainer: {
-      display: "flex",
-      alignItems: "center" as const,
-      justifyContent: "flex-start" as const,
-    },
-    quotaSizeContainer: {
-      flexGrow: 1,
-    },
-    sizeFactorContainer: {
-      flexGrow: 0,
-      maxWidth: 80,
-      marginLeft: 8,
-      alignSelf: "flex-start" as const,
-    },
     error: {
       color: "#b53b4b",
       border: "1px solid #b53b4b",

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

@@ -84,9 +84,6 @@ const styles = (theme: Theme) =>
         position: "absolute",
       },
     },
-    buttonTray: {
-      textAlign: "right",
-    },
     viewButton: {
       width: 111,
       color: "white",
@@ -109,11 +106,6 @@ const styles = (theme: Theme) =>
         },
       },
     },
-    divider: {
-      backgroundColor: theme.palette.grey["200"],
-      marginTop: 10,
-      marginBottom: 4,
-    },
     metric: {
       "& .min-icon": {
         color: "#000000",

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

@@ -51,17 +51,6 @@ interface IBulkReplicationModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    buttonContainer: {
-      textAlign: "right",
-    },
     remoteBucketList: {
       display: "grid",
       gridTemplateColumns: "auto auto 45px",

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

@@ -25,10 +25,7 @@ import { Bucket, BucketList } from "../types";
 import { AddIcon, BucketsIcon } from "../../../../icons";
 import { AppState } from "../../../../store";
 import { setErrorSnackMessage } from "../../../../actions";
-import {
-  containerForHeader,
-  searchField,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
 import DeleteBucket from "./DeleteBucket";
@@ -52,44 +49,6 @@ import SearchBox from "../../Common/SearchBox";
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    buttonTray: {
-      textAlign: "right",
-      "& .MuiButton-root": {
-        fontSize: 12,
-        borderColor: theme.palette.grey["300"],
-        color: theme.palette.grey["300"],
-        textTransform: "capitalize",
-        marginLeft: 8,
-      },
-      "& .MuiButton-contained": {
-        color: "white",
-      },
-    },
     bulkSelect: {
       marginLeft: 8,
       "&:hover": {
@@ -99,49 +58,14 @@ const styles = (theme: Theme) =>
         backgroundColor: theme.palette.primary.main,
       },
     },
-    theaderSearchLabel: {
-      color: theme.palette.grey["400"],
-      fontSize: 14,
-      fontWeight: "bold",
-    },
     addBucket: {
       marginLeft: 8,
     },
-    theaderSearch: {
-      borderColor: theme.palette.grey["200"],
-      "& .MuiInputBase-input": {
-        paddingTop: 10,
-        paddingBottom: 10,
-      },
-      "& .MuiInputBase-root": {
-        "& .MuiInputAdornment-root": {
-          "& .min-icon": {
-            color: theme.palette.grey["400"],
-            height: 14,
-          },
-        },
-      },
-      actionHeaderItems: {
-        "@media (min-width: 320px)": {
-          marginTop: 8,
-        },
-      },
-      marginRight: 10,
-      marginLeft: 10,
-    },
     bucketList: {
       marginTop: 25,
     },
 
     ...containerForHeader(theme.spacing(4)),
-    ...searchField,
-    searchField: {
-      ...searchField.searchField,
-      minWidth: 380,
-      "@media (max-width: 900px)": {
-        minWidth: 220,
-      },
-    },
   });
 
 interface IListBucketsProps {

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/IconWithLabel.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import createStyles from "@mui/styles/createStyles";
+import withStyles from "@mui/styles/withStyles";
+import { Theme } from "@mui/material/styles";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    fileName: {
+      display: "flex",
+      alignItems: "center",
+      "& .min-icon": {
+        width: 16,
+        height: 16,
+        marginRight: 4,
+      },
+    },
+    fileNameText: {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+    },
+  });
+
+const IconWithLabel = (props: {
+  classes: any;
+  icon: JSX.Element;
+  strings: string[];
+}) => {
+  return (
+    <div className={props.classes.fileName}>
+      {props.icon}
+      <span className={props.classes.fileNameText}>
+        {props.strings[props.strings.length - 1]}
+      </span>
+    </div>
+  );
+};
+
+export default withStyles(styles)(IconWithLabel);

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -79,7 +79,7 @@ import SearchBox from "../../../../Common/SearchBox";
 
 import withSuspense from "../../../../Common/Components/withSuspense";
 import { displayName } from "./utils";
-import { UploadFolderIcon, DownloadIcon } from "../../../../../../icons";
+import { DownloadIcon, UploadFolderIcon } from "../../../../../../icons";
 
 const AddFolderIcon = React.lazy(
   () => import("../../../../../../icons/AddFolderIcon")
@@ -115,71 +115,8 @@ const PreviewFileModal = withSuspense(
   React.lazy(() => import("../Preview/PreviewFileModal"))
 );
 
-const commonIcon = {
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "center center",
-  width: 16,
-  minWidth: 16,
-  height: 40,
-  marginRight: 10,
-};
-
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    fileName: {
-      display: "flex",
-      alignItems: "center",
-      "& .min-icon": {
-        width: 16,
-        height: 16,
-        marginRight: 4,
-      },
-    },
-    fileNameText: {
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-    },
-    iconFolder: {
-      backgroundImage: "url(/images/object-browser-folder-icn.svg)",
-      backgroundSize: "auto",
-      ...commonIcon,
-    },
-    iconFile: {
-      backgroundImage: "url(/images/object-browser-icn.svg)",
-      backgroundSize: "auto",
-      ...commonIcon,
-    },
-    buttonsContainer: {
-      "& .MuiButtonBase-root": {
-        marginLeft: 10,
-      },
-    },
     browsePaper: {
       height: "calc(100vh - 280px)",
     },
@@ -191,19 +128,14 @@ const styles = (theme: Theme) =>
         backgroundImage: "url(/images/ob_folder_filled.svg)",
       },
     },
-    listButton: {
-      marginLeft: "10px",
-    },
+
     badgeOverlap: {
       "& .MuiBadge-badge": {
         top: 35,
         right: 10,
       },
     },
-    screenTitle: {
-      borderBottom: 0,
-      paddingTop: 0,
-    },
+
     ...tableStyles,
     ...actionsTray,
     ...searchField,
@@ -917,7 +849,7 @@ const ListObjects = ({
   };
 
   const renderName = (element: string) => {
-    return displayName(element, classes);
+    return displayName(element);
   };
 
   const listModeColumns = [
@@ -1079,7 +1011,6 @@ const ListObjects = ({
       <PageLayout>
         <Grid item xs={12}>
           <ScreenTitle
-            classes={classes}
             icon={
               <Fragment>
                 <FolderIcon width={40} />

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/utils.tsx

@@ -18,6 +18,7 @@ import React from "react";
 
 import ObjectBrowserIcon from "../../../../../../icons/ObjectBrowserIcon";
 import ObjectBrowserFolderIcon from "../../../../../../icons/ObjectBrowserFolderIcon";
+import IconWithLabel from "./IconWithLabel";
 
 const FileBookIcon = React.lazy(
   () => import("../../../../../../icons/FileBookIcon")
@@ -65,7 +66,7 @@ const FileZipIcon = React.lazy(
   () => import("../../../../../../icons/FileZipIcon")
 );
 
-export const displayName = (element: string, classes: any) => {
+export const displayName = (element: string) => {
   let elementString = element;
   let icon = <ObjectBrowserIcon />;
   // Element is a folder
@@ -152,12 +153,5 @@ export const displayName = (element: string, classes: any) => {
 
   const splitItem = elementString.split("/");
 
-  return (
-    <div className={classes.fileName}>
-      {icon}
-      <span className={classes.fileNameText}>
-        {splitItem[splitItem.length - 1]}
-      </span>
-    </div>
-  );
+  return <IconWithLabel icon={icon} strings={splitItem} />;
 };

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/DeleteTagModal.tsx

@@ -41,16 +41,7 @@ interface IDeleteTagModal {
   classes: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
-  });
+const styles = (theme: Theme) => createStyles({});
 
 const DeleteTagModal = ({
   deleteOpen,

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx

@@ -102,67 +102,12 @@ const ObjectBrowserIcon = React.lazy(
 
 const styles = (theme: Theme) =>
   createStyles({
-    currentItemContainer: {
-      marginBottom: 8,
-    },
-    pageContainer: {
-      border: "1px solid #EAEAEA",
-      height: "100%",
-    },
-    objectPathContainer: {
-      marginBottom: 26,
-      fontSize: 10,
-    },
-    objectPathLink: {
-      "&:visited": {
-        color: "#000",
-      },
-    },
-    currentItem: {
-      fontSize: 24,
-    },
-    propertiesContainer: {
-      display: "flex",
-      flexDirection: "row",
-      marginBottom: 15,
-    },
-    propertiesItem: {
-      display: "flex",
-      flexDirection: "row",
-      marginRight: 21,
-    },
-    propertiesItemBold: {
-      fontWeight: 700,
-    },
-    propertiesValue: {
-      marginLeft: 8,
-      textTransform: "capitalize",
-    },
     propertiesIcon: {
       marginLeft: 5,
       "& .min-icon": {
         height: 12,
       },
     },
-    actionsIconContainer: {
-      marginLeft: 12,
-    },
-    actionsIcon: {
-      height: 16,
-      width: 16,
-      "& .min-icon": {
-        height: 16,
-      },
-    },
-    tagsContainer: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      marginBottom: 15,
-    },
-    tagText: {
-      marginRight: 13,
-    },
     tag: {
       marginRight: 6,
       fontSize: 10,
@@ -181,23 +126,6 @@ const styles = (theme: Theme) =>
         marginRight: 0,
       },
     },
-    paperContainer: {
-      padding: 15,
-      paddingLeft: 50,
-      display: "flex",
-    },
-    elementTitle: {
-      fontWeight: 500,
-      color: "#777777",
-      fontSize: 14,
-      marginTop: -9,
-    },
-    dualCardLeft: {
-      paddingRight: "5px",
-    },
-    dualCardRight: {
-      paddingLeft: "5px",
-    },
     capitalizeFirst: {
       textTransform: "capitalize",
       "& .min-icon": {

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/RestoreFileVersion.tsx

@@ -45,13 +45,6 @@ interface IRestoreFileVersion {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     ...modalBasic,
   });
 

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/Preview/PreviewFileContent.tsx

@@ -21,6 +21,7 @@ import { Grid, LinearProgress } from "@mui/material";
 import { BucketObject } from "../ListObjects/types";
 import { extensionPreview } from "../utils";
 import { encodeFileName } from "../../../../../../common/utils";
+import clsx from "clsx";
 
 const styles = () =>
   createStyles({
@@ -129,7 +130,11 @@ const PreviewFile = ({
       {objectType !== "video" &&
         objectType !== "audio" &&
         objectType !== "image" && (
-          <div className={`${loading ? classes.iframeHidden : ""} iframeBase`}>
+          <div
+            className={clsx(classes.iframeBase, {
+              [classes.iframeHidden]: loading,
+            })}
+          >
             <iframe
               src={path}
               title="File Preview"
@@ -146,5 +151,4 @@ const PreviewFile = ({
     </Fragment>
   );
 };
-
 export default withStyles(styles)(PreviewFile);

portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx

@@ -15,53 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import { Box, Button, ButtonProps, IconButtonProps } from "@mui/material";
 import BoxIconButton from "../BoxIconButton/BoxIconButton";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    root: {
-      padding: 8,
-      marginLeft: 8,
-      borderWidth: 1,
-      borderColor: "#696969",
-      color: "#696969",
-      borderStyle: "solid",
-      borderRadius: 3,
-      "& .min-icon": {
-        width: 20,
-      },
-      "& .MuiTouchRipple-root span": {
-        backgroundColor: theme.palette.primary.main,
-        borderRadius: 3,
-        opacity: 0.3,
-      },
-      "&:disabled": {
-        color: "#EBEBEB",
-        borderColor: "#EBEBEB",
-      },
-    },
-    contained: {
-      borderColor: theme.palette.primary.main,
-      background: theme.palette.primary.main,
-      color: "white",
-      "& .MuiTouchRipple-root span": {
-        backgroundColor: theme.palette.primary.dark,
-        borderRadius: 3,
-        opacity: 0.3,
-      },
-      "&:hover": {
-        backgroundColor: theme.palette.primary.light,
-        color: "#FFF",
-      },
-    },
-  });
-
 interface IBoxButton extends ButtonProps {
-  classes: any;
   label?: string;
 }
 
@@ -83,4 +40,4 @@ const BoxButton = ({ classes, children, label = "", ...rest }: IBoxButton) => {
   );
 };
 
-export default withStyles(styles)(BoxButton);
+export default BoxButton;

portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx

@@ -14,12 +14,12 @@
 // 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 React, {
-  useState,
-  useEffect,
-  createRef,
-  useLayoutEffect,
   ChangeEvent,
+  createRef,
+  useEffect,
+  useLayoutEffect,
   useRef,
+  useState,
 } from "react";
 import get from "lodash/get";
 import debounce from "lodash/debounce";
@@ -56,9 +56,6 @@ const styles = (theme: Theme) =>
       position: "relative",
       marginTop: 15,
     },
-    labelContainer: {
-      display: "flex",
-    },
   });
 
 const CSVMultiSelector = ({

portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx

@@ -49,13 +49,6 @@ const styles = (theme: Theme) =>
       flexGrow: 1,
       position: "relative",
     },
-    errorState: {
-      color: "#b53b4b",
-      fontSize: 14,
-      position: "absolute",
-      top: 7,
-      right: 7,
-    },
     cssOutlinedInput: {
       borderColor: "#EAEAEA",
       padding: 16,

portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx

@@ -109,10 +109,6 @@ const styles = (theme: Theme) =>
     textBoxContainer: {
       flexGrow: 1,
     },
-    textBoxWithIcon: {
-      position: "relative",
-      paddingRight: 25,
-    },
     openListIcon: {
       color: "#9D9E9D",
       width: 8,

portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx

@@ -14,7 +14,7 @@
 // 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 React, { useState, useEffect, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import Grid from "@mui/material/Grid";
 import InputLabel from "@mui/material/InputLabel";
 import moment from "moment/moment";
@@ -36,11 +36,6 @@ interface IDaysSelector {
 
 const styles = (theme: Theme) =>
   createStyles({
-    dateInput: {
-      "&:not(:last-child)": {
-        marginRight: 22,
-      },
-    },
     ...fieldBasic,
     ...tooltipHelper,
     labelContainer: {
@@ -56,10 +51,6 @@ const styles = (theme: Theme) =>
       marginTop: 11,
       marginBottom: 6,
     },
-    fieldContainerBorder: {
-      borderBottom: "#9c9c9c 1px solid",
-      marginBottom: 20,
-    },
     dateContainer: {
       height: 20,
       textAlign: "right",

portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx

@@ -55,23 +55,6 @@ const styles = (theme: Theme) =>
       flexWrap: "nowrap",
       height: componentHeight,
     },
-    errorState: {
-      color: "#b53b4b",
-      fontSize: 14,
-      position: "absolute",
-      top: 7,
-      right: 7,
-    },
-    errorText: {
-      margin: "0",
-      fontSize: "0.75rem",
-      marginTop: 3,
-      textAlign: "left",
-      fontFamily: "Lato,sans-serif",
-      fontWeight: 400,
-      lineHeight: "1.66",
-      color: "#dc1f2e",
-    },
     valueString: {
       maxWidth: 350,
       whiteSpace: "nowrap",

portal-ui/src/screens/Console/Common/FormComponents/FilterInputWrapper/FilterInputWrapper.tsx

@@ -62,9 +62,6 @@ const styles = (theme: Theme) =>
       display: "flex",
       alignItems: "center",
     },
-    toggleButton: {
-      marginRight: 10,
-    },
     fieldContainer: {
       flexGrow: 1,
       margin: "0 15px",

portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx

@@ -42,66 +42,6 @@ interface IFormSwitch {
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-      paddingTop: 15,
-      boxShadow: "none",
-    },
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    wrapCell: {
-      maxWidth: "200px",
-      whiteSpace: "normal",
-      wordWrap: "break-word",
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    noFound: {
-      textAlign: "center",
-      padding: "10px 0",
-    },
-    tableContainer: {
-      maxHeight: 200,
-    },
-    stickyHeader: {
-      backgroundColor: "#fff",
-    },
-    actionsTitle: {
-      fontWeight: 600,
-      color: "#081C42",
-      fontSize: 16,
-      alignSelf: "center",
-    },
-    tableBlock: {
-      marginTop: 15,
-    },
-    filterField: {
-      width: 375,
-      fontWeight: 600,
-      "& .input": {
-        "&::placeholder": {
-          fontWeight: 600,
-          color: "#081C42",
-        },
-      },
-    },
     divContainer: {
       marginBottom: 20,
     },

portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx

@@ -68,17 +68,6 @@ const styles = (theme: Theme) =>
       flexGrow: 1,
       position: "relative",
     },
-    textBoxWithIcon: {
-      position: "relative",
-      paddingRight: 25,
-    },
-    errorState: {
-      color: "#b53b4b",
-      fontSize: 14,
-      position: "absolute",
-      top: 7,
-      right: 7,
-    },
     overlayAction: {
       position: "absolute",
       right: 5,

portal-ui/src/screens/Console/Common/FormComponents/ModalError/ModalError.tsx

@@ -30,7 +30,7 @@
 // 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 React, { Fragment, useState, useEffect, useCallback } from "react";
+import React, { Fragment, useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import get from "lodash/get";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
@@ -40,9 +40,11 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { AppState } from "../../../../../store";
-import { setErrorSnackMessage } from "../../../../../actions";
+import {
+  setErrorSnackMessage,
+  setModalErrorSnackMessage,
+} from "../../../../../actions";
 import { snackBarMessage } from "../../../../../types";
-import { setModalErrorSnackMessage } from "../../../../../actions";
 
 interface ImodalErrorProps {
   customStyle?: any;
@@ -98,12 +100,6 @@ const styles = (theme: Theme) =>
         height: 32,
       },
     },
-    simpleError: {
-      marginTop: 5,
-      padding: "2px 5px",
-      fontSize: 16,
-      color: "#000",
-    },
     detailsButton: {
       color: "#9C9C9C",
       display: "flex",

portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx

@@ -14,12 +14,12 @@
 // 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 React, {
-  useState,
-  useEffect,
-  createRef,
-  useLayoutEffect,
   ChangeEvent,
+  createRef,
+  useEffect,
+  useLayoutEffect,
   useRef,
+  useState,
 } from "react";
 import get from "lodash/get";
 import debounce from "lodash/debounce";
@@ -57,9 +57,6 @@ const styles = (theme: Theme) =>
       position: "relative",
       marginTop: 15,
     },
-    labelContainer: {
-      display: "flex",
-    },
     lineInputBoxes: {
       display: "flex",
     },

portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx

@@ -49,7 +49,6 @@ const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
     ...tooltipHelper,
-    radioBoxContainer: {},
     optionLabel: {
       "&.Mui-disabled": {
         "& .MuiFormControlLabel-label": {

portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx

@@ -14,7 +14,7 @@
 // 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 React, { useState, Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -26,12 +26,6 @@ import ListItemText from "@mui/material/ListItemText";
 
 const styles = (theme: Theme) =>
   createStyles({
-    wizardMain: {
-      display: "flex",
-      width: "100%",
-      height: "100%",
-      flexGrow: 1,
-    },
     wizFromContainer: {},
     wizFromModal: {
       position: "relative",

portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx

@@ -7,9 +7,6 @@ import { pageContentStyles } from "../FormComponents/common/styleLibrary";
 
 const styles = (theme: Theme) =>
   createStyles({
-    pageContainer: {
-      width: "100%",
-    },
     ...pageContentStyles,
   });
 

portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx

@@ -67,14 +67,6 @@ const styles = (theme: Theme) =>
         backgroundColor: "initial",
       },
     },
-    modalCloseIcon: {
-      fontSize: 35,
-      color: "#9C9C9C",
-      fontWeight: 300,
-      "&:hover": {
-        color: "#9C9C9C",
-      },
-    },
     closeIcon: {
       "&::before": {
         ...baseCloseLine,

portal-ui/src/screens/Console/Common/TabSelector/TabSelector.tsx

@@ -15,9 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import makeStyles from "@mui/styles/makeStyles";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
@@ -27,29 +24,8 @@ interface ITabSelector {
   selectedTab: number;
   onChange: (newValue: number) => void;
   tabOptions: ITabOption[];
-  classes: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    cardsContainer: {
-      maxHeight: 440,
-      overflowY: "auto",
-      overflowX: "hidden",
-    },
-    generalStatusCards: {
-      display: "flex",
-      flexDirection: "row",
-      flexWrap: "wrap",
-    },
-    generalStatusTitle: {
-      color: "#767676",
-      fontSize: 16,
-      fontWeight: "bold",
-      margin: "15px 10px 0 10px",
-    },
-  });
-
 const tabSubStyles = makeStyles({
   root: {
     backgroundColor: "transparent",
@@ -78,12 +54,7 @@ const tabSubStyles = makeStyles({
   },
 });
 
-const TabSelector = ({
-  selectedTab,
-  onChange,
-  tabOptions,
-  classes,
-}: ITabSelector) => {
+const TabSelector = ({ selectedTab, onChange, tabOptions }: ITabSelector) => {
   const subStyles = tabSubStyles();
 
   return (
@@ -134,4 +105,4 @@ const TabSelector = ({
   );
 };
 
-export default withStyles(styles)(TabSelector);
+export default TabSelector;

portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx

@@ -108,23 +108,8 @@ interface TableWrapperProps {
 
 const borderColor = "#9c9c9c80";
 
-const rowText = {
-  fontWeight: 400,
-  fontSize: 14,
-  borderColor: borderColor,
-  borderWidth: "0.5px",
-  height: 40,
-  transitionDuration: "0.3s",
-  padding: "initial",
-  paddingRight: 6,
-  paddingLeft: 6,
-};
-
 const styles = () =>
   createStyles({
-    dialogContainer: {
-      padding: "12px 26px 22px",
-    },
     paper: {
       display: "flex",
       overflow: "auto",
@@ -152,60 +137,6 @@ const styles = () =>
     defaultPaperHeight: {
       height: "calc(100vh - 205px)",
     },
-    allTableSettings: {
-      "& .MuiTableCell-sizeSmall:last-child": {
-        paddingRight: "initial",
-      },
-      "& .MuiTableCell-body.MuiTableCell-sizeSmall:last-child": {
-        paddingRight: 6,
-      },
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: 700,
-          fontSize: 14,
-          borderColor: "#39393980",
-          borderWidth: "0.5px",
-          padding: "6px 0 10px",
-        },
-      },
-    },
-    rowUnselected: {
-      ...rowText,
-      color: "#393939",
-    },
-    rowSelected: {
-      ...rowText,
-      color: "#081C42",
-      fontWeight: 600,
-    },
-    paginatorContainer: {
-      display: "flex",
-      justifyContent: "flex-end",
-      padding: "5px 38px",
-    },
-    checkBoxHeader: {
-      width: 50,
-      textAlign: "left",
-      paddingRight: 10,
-      "&.MuiTableCell-paddingCheckbox": {
-        paddingBottom: 4,
-        paddingLeft: 0,
-      },
-    },
-    actionsContainer: {
-      width: 150,
-      borderColor: borderColor,
-    },
-    paginatorComponent: {
-      borderBottom: 0,
-    },
-    checkBoxRow: {
-      borderColor: borderColor,
-      padding: "0 10px 0 0",
-    },
     loadingBox: {
       paddingTop: "100px",
       paddingBottom: "100px",

portal-ui/src/screens/Console/Common/UsageBarWrapper/UsageBarWrapper.tsx

@@ -20,9 +20,6 @@ interface IProgressBar {
 
 const styles = (theme: Theme) =>
   createStyles({
-    paperContainer: {
-      padding: 15,
-    },
     allValue: {
       fontSize: 16,
       fontWeight: 700,

portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx

@@ -16,54 +16,16 @@
 
 import React from "react";
 import get from "lodash/get";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import { configurationElements } from "../utils";
 import EditConfiguration from "../../NotificationEndpoints/CustomForms/EditConfiguration";
-import {
-  actionsTray,
-  containerForHeader,
-  searchField,
-  settingsCommon,
-} from "../../Common/FormComponents/common/styleLibrary";
 
-interface IListConfiguration {
-  classes: any;
+interface IConfigurationForm {
   match: any;
   history: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...searchField,
-    ...actionsTray,
-    ...settingsCommon,
-    ...containerForHeader(theme.spacing(4)),
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    iconText: {
-      lineHeight: "24px",
-    },
-    customConfigurationPage: {
-      height: "calc(100vh - 324px)",
-      scrollbarWidth: "none" as const,
-      "&::-webkit-scrollbar": {
-        display: "none",
-      },
-    },
-    mainCont: {
-      ...settingsCommon.mainCont,
-      maxWidth: 1180,
-    },
-  });
-
-const ConfigurationsList = ({ match, history }: IListConfiguration) => {
+const ConfigurationsList = ({ match, history }: IConfigurationForm) => {
   const activeConfRoute = get(match, "url", "");
 
   const configName = activeConfRoute.substring(
@@ -87,4 +49,4 @@ const ConfigurationsList = ({ match, history }: IListConfiguration) => {
   );
 };
 
-export default withStyles(styles)(ConfigurationsList);
+export default ConfigurationsList;

portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx

@@ -37,6 +37,7 @@ import get from "lodash/get";
 import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
 
 import withSuspense from "../../Common/Components/withSuspense";
+
 const ConfigurationForm = withSuspense(
   React.lazy(() => import("./ConfigurationForm"))
 );
@@ -48,22 +49,6 @@ interface IConfigurationOptions {
 
 const styles = (theme: Theme) =>
   createStyles({
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    iconText: {
-      lineHeight: "24px",
-    },
-    customConfigurationPage: {
-      height: "calc(100vh - 324px)",
-      scrollbarWidth: "none" as const,
-      "&::-webkit-scrollbar": {
-        display: "none",
-      },
-    },
     settingsOptionsContainer: {
       display: "flex" as const,
       flexDirection: "row" as const,
@@ -73,14 +58,6 @@ const styles = (theme: Theme) =>
       borderRadius: 2,
       backgroundColor: "#fff",
     },
-    configurationLink: {
-      border: "#E5E5E5 1px solid",
-      borderRadius: 2,
-      padding: 20,
-      width: 190,
-      height: 80,
-      margin: 15,
-    },
     ...searchField,
     ...actionsTray,
     ...containerForHeader(theme.spacing(4)),

portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx

@@ -14,7 +14,7 @@
 // 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 React, { Fragment, useEffect, useState, useCallback } from "react";
+import React, { Fragment, useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
@@ -49,23 +49,6 @@ const styles = (theme: Theme) =>
     ...modalBasic,
     ...settingsCommon,
     ...formFieldStyles,
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    buttonContainer: {
-      textAlign: "right",
-    },
-    customTitle: {
-      ...settingsCommon.customTitle,
-      marginTop: 0,
-    },
-    settingsFormContainer: {
-      ...settingsCommon.settingsFormContainer,
-      height: "calc(100vh - 422px)",
-    },
     lambdaNotif: {
       background:
         "linear-gradient(90deg, rgba(249,249,250,1) 0%, rgba(250,250,251,1) 68%, rgba(254,254,254,1) 100%)",
@@ -99,14 +82,6 @@ const styles = (theme: Theme) =>
       fontFamily: "Lato,sans-serif",
       paddingLeft: 18,
     },
-    mainCont: {
-      maxWidth: 1180,
-      paddingLeft: 38,
-      paddingRight: 38,
-    },
-    backTo: {
-      margin: "20px 0px 0",
-    },
     formBox: {
       border: "1px solid #EAEAEA",
       padding: 15,

portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx

@@ -20,7 +20,6 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import {
-  actionsTray,
   containerForHeader,
   searchField,
   settingsCommon,
@@ -38,46 +37,10 @@ interface ITypeTiersConfig {
 
 const styles = (theme: Theme) =>
   createStyles({
-    ...actionsTray,
     ...searchField,
     ...settingsCommon,
     ...typesSelection,
     ...containerForHeader(theme.spacing(4)),
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    iconText: {
-      lineHeight: "24px",
-    },
-    customConfigurationPage: {
-      height: "calc(100vh - 410px)",
-      scrollbarWidth: "none" as const,
-      "&::-webkit-scrollbar": {
-        display: "none",
-      },
-    },
-    lambdaContainer: {
-      padding: "15px 0",
-    },
-    actionsTray: {
-      ...actionsTray.actionsTray,
-      padding: "0 38px",
-    },
-    customTitle: {
-      ...settingsCommon.customTitle,
-      marginTop: 0,
-    },
-    mainCont: {
-      ...settingsCommon.mainCont,
-      maxWidth: 1180,
-    },
-    link: {
-      textDecoration: "none",
-      color: theme.palette.primary.main,
-    },
   });
 
 const TierTypeSelector = ({ classes, history }: ITypeTiersConfig) => {

portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx

@@ -14,7 +14,7 @@
 // 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 React, { useState, useEffect, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
@@ -44,14 +44,6 @@ interface ITierCredentialsModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
     buttonContainer: {
       textAlign: "right",
     },

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

@@ -90,8 +90,6 @@ const ObjectManager = React.lazy(
   () => import("./Common/ObjectManager/ObjectManager")
 );
 
-const drawerWidth = 245;
-
 const Buckets = React.lazy(() => import("./Buckets/Buckets"));
 const Policies = React.lazy(() => import("./Policies/Policies"));
 const Dashboard = React.lazy(() => import("./Dashboard/Dashboard"));
@@ -110,11 +108,6 @@ const ConfigurationOptions = React.lazy(
 
 const styles = (theme: Theme) =>
   createStyles({
-    "@global": {
-      body: {
-        backgroundColor: "#FFFFFF",
-      },
-    },
     root: {
       display: "flex",
       "& .MuiPaper-root.MuiSnackbarContent-root": {
@@ -122,87 +115,12 @@ const styles = (theme: Theme) =>
         boxShadow: "none",
       },
     },
-    toolbar: {
-      background: theme.palette.background.default,
-      color: "black",
-      paddingRight: 24, // keep right padding when drawer closed
-    },
-    toolbarIcon: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      padding: "0 8px",
-      ...theme.mixins.toolbar,
-    },
-    appBar: {
-      zIndex: theme.zIndex.drawer + 1,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-    },
-    appBarShift: {
-      marginLeft: drawerWidth,
-      width: `calc(100% - ${drawerWidth}px)`,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    },
-    menuButton: {
-      marginRight: 36,
-    },
-    menuButtonHidden: {
-      display: "none",
-    },
-    title: {
-      flexGrow: 1,
-    },
-    drawerPaper: {
-      position: "relative",
-      whiteSpace: "nowrap",
-      width: drawerWidth,
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-      overflowX: "hidden",
-      background:
-        "transparent linear-gradient(90deg, #073052 0%, #081C42 100%) 0% 0% no-repeat padding-box",
-      boxShadow: "0px 3px 7px #00000014",
-    },
-    drawerPaperClose: {
-      overflowX: "hidden",
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-      width: theme.spacing(7),
-      [theme.breakpoints.up("sm")]: {
-        width: theme.spacing(9),
-      },
-    },
     content: {
       flexGrow: 1,
       height: "100vh",
       overflow: "auto",
       position: "relative",
     },
-    container: {
-      paddingBottom: theme.spacing(4),
-      margin: 0,
-      width: "100%",
-      maxWidth: "initial",
-    },
-    paper: {
-      padding: theme.spacing(2),
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-    fixedHeight: {
-      minHeight: 240,
-    },
     warningBar: {
       background: theme.palette.primary.main,
       color: "white",

portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx

@@ -33,16 +33,6 @@ import HelpBox from "../../../../common/HelpBox";
 
 const styles = (theme: Theme) =>
   createStyles({
-    cardsContainer: {
-      maxHeight: 440,
-      overflowY: "auto",
-      overflowX: "hidden",
-    },
-    generalStatusCards: {
-      display: "flex",
-      flexDirection: "row",
-      flexWrap: "wrap",
-    },
     generalStatusTitle: {
       color: "#767676",
       fontSize: 16,

portal-ui/src/screens/Console/Dashboard/CommonCard.tsx

@@ -48,11 +48,6 @@ const styles = (theme: Theme) =>
         borderRadius: 10,
       },
     },
-    cardsContainer: {
-      maxHeight: 440,
-      overflowY: "auto",
-      overflowX: "hidden",
-    },
     metricText: {
       fontSize: 70,
       lineHeight: 1.1,

portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx

@@ -53,15 +53,6 @@ const styles = (theme: Theme) =>
   createStyles({
     ...actionsTray,
     ...widgetContainerCommon,
-    syncButton: {
-      "&.MuiButton-root .MuiButton-iconSizeMedium > *:first-of-type": {
-        fontSize: 18,
-      },
-    },
-    actionsTray: {
-      ...actionsTray.actionsTray,
-      padding: "0 10px",
-    },
     dashboardRow: {
       display: "flex",
       flexDirection: "row",
@@ -69,14 +60,6 @@ const styles = (theme: Theme) =>
       flexWrap: "wrap",
       maxWidth: 1180,
     },
-    schedulerIcon: {
-      opacity: 0.4,
-      fontSize: 10,
-      "& svg": {
-        width: 18,
-        height: 18,
-      },
-    },
   });
 
 const PrDashboard = ({

portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleRepWidget.tsx

@@ -161,9 +161,7 @@ const SingleRepWidget = ({
                 fontSize={65}
                 fill={"#07193E"}
               >
-                {result
-                  ? repNumber
-                  : ""}
+                {result ? repNumber : ""}
               </text>
             </AreaChart>
           </ResponsiveContainer>

portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/SingleValueWidget.tsx

@@ -41,13 +41,6 @@ interface ISingleValueWidget {
 const styles = (theme: Theme) =>
   createStyles({
     ...widgetCommon,
-    contentContainer: {
-      ...widgetCommon.contentContainer,
-      fontWeight: 700,
-      color: "#072045",
-      fontSize: 18,
-      textAlign: "center" as const,
-    },
     loadingAlign: {
       width: "100%",
       textAlign: "center",

portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx

@@ -60,34 +60,9 @@ interface IDirectCSIMain {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
     tableWrapper: {
       height: "calc(100vh - 275px)",
     },
-    notAvailableNotice: {
-      border: "#EAEDEE 1px solid",
-      backgroundColor: "#FFF",
-      display: "flex",
-      padding: "19px 38px",
-      overflow: "auto",
-      position: "relative",
-      boxShadow: "none",
-      minHeight: 200,
-      overflowY: "scroll",
-      borderRadius: 3,
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      height: "calc(100vh - 275px)",
-      fontSize: 18,
-      fontWeight: 600,
-      textAlign: "center",
-    },
     linkItem: {
       display: "default",
       color: theme.palette.info.main,

portal-ui/src/screens/Console/DirectCSI/DirectCSIMain.tsx

@@ -45,12 +45,6 @@ interface IDirectCSIMain {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
     tabsContainer: {
       marginBottom: 15,
     },

portal-ui/src/screens/Console/DirectCSI/DirectCSIVolumes.tsx

@@ -14,7 +14,7 @@
 // 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 React, { Fragment, useState, useEffect } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
@@ -43,16 +43,6 @@ interface IDirectCSIVolumesProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
-    breadcrumLink: {
-      textDecoration: "none",
-      color: "black",
-    },
     tableWrapper: {
       height: "calc(100vh - 267px)",
     },

portal-ui/src/screens/Console/DirectCSI/FormatErrorsResult.tsx

@@ -31,9 +31,6 @@ interface IFormatErrorsProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    warningBlock: {
-      color: "red",
-    },
     buttonContainer: {
       textAlign: "right",
     },

portal-ui/src/screens/Console/Groups/AddGroup.tsx

@@ -51,12 +51,6 @@ interface MainGroupProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
     buttonContainer: {
       textAlign: "right",
     },

portal-ui/src/screens/Console/Groups/AddGroupMember.tsx

@@ -33,10 +33,6 @@ const styles = (theme: Theme) =>
       textAlign: "right",
       marginTop: "1rem",
     },
-    predefinedTitle: {
-      color: "rgba(0,0,0,.87)",
-      fontWeight: "normal",
-    },
     ...formFieldStyles,
     ...modalBasic,
   });

portal-ui/src/screens/Console/Groups/Groups.tsx

@@ -49,6 +49,7 @@ import SecureComponent, {
 } from "../../../common/SecureComponent/SecureComponent";
 
 import withSuspense from "../Common/Components/withSuspense";
+
 const DeleteGroup = withSuspense(React.lazy(() => import("./DeleteGroup")));
 const AddGroup = withSuspense(React.lazy(() => import("../Groups/AddGroup")));
 const SetPolicy = withSuspense(
@@ -63,10 +64,6 @@ interface IGroupsProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    pageContainer: {
-      border: "1px solid #EAEAEA",
-      width: "100%",
-    },
     tableBlock: {
       ...tableStyles.tableBlock,
       marginTop: 15,

portal-ui/src/screens/Console/Groups/UsersSelectors.tsx

@@ -46,9 +46,6 @@ interface IGroupsProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
     paper: {
       display: "flex",
       overflow: "auto",

portal-ui/src/screens/Console/Heal/Heal.tsx

@@ -56,21 +56,6 @@ import SecureComponent from "../../../common/SecureComponent/SecureComponent";
 
 const styles = (theme: Theme) =>
   createStyles({
-    watchList: {
-      background: "white",
-      maxHeight: "400",
-      overflow: "auto",
-      "& ul": {
-        margin: "4",
-        padding: "0",
-      },
-      "& ul li": {
-        listStyle: "none",
-        margin: "0",
-        padding: "0",
-        borderBottom: "1px solid #dedede",
-      },
-    },
     graphContainer: {
       backgroundColor: "#fff",
       border: "#EAEDEE 1px solid",
@@ -87,9 +72,6 @@ const styles = (theme: Theme) =>
     scanData: {
       fontSize: 13,
     },
-    noMinWidthLabel: {
-      fontWeight: 400,
-    },
     formBox: {
       padding: 15,
       border: "1px solid #EAEAEA",

portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx

@@ -51,16 +51,6 @@ import PageLayout from "../Common/Layout/PageLayout";
 
 const styles = (theme: Theme) =>
   createStyles({
-    logList: {
-      background: "#fff",
-      minHeight: 400,
-      height: "calc(100vh - 270px)",
-      overflow: "auto",
-      fontSize: 13,
-      padding: "25px 45px",
-      border: "1px solid #EAEDEE",
-      borderRadius: 4,
-    },
     loading: {
       paddingTop: 8,
       paddingLeft: 40,

portal-ui/src/screens/Console/License/ActivationModal.tsx

@@ -35,9 +35,6 @@ import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     subnetLicenseKey: {
       padding: "10px 10px 10px 0px",
       borderRight: "1px solid rgba(0, 0, 0, 0.12)",

portal-ui/src/screens/Console/License/License.tsx

@@ -79,10 +79,6 @@ const styles = (theme: Theme) =>
       color: "#000000",
       fontSize: 14,
     },
-    paper: {
-      padding: "20px 52px 20px 28px",
-      backgroundColor: "#FFFFFF",
-    },
     licenseContainer: {
       display: "flex",
       flexWrap: "wrap",
@@ -131,10 +127,6 @@ const styles = (theme: Theme) =>
     detailsContainerBorder: {
       borderLeft: "1px solid #e2e2e2",
     },
-    detailsContainerBorderHighlighted: {
-      border: "1px solid #B5B5B5",
-      borderBottom: 0,
-    },
     detailsTitle: {
       fontSize: 19,
       fontWeight: 700,
@@ -146,15 +138,6 @@ const styles = (theme: Theme) =>
       backgroundColor: "#4CCB92",
       padding: 4,
     },
-    activePlanHeader: {
-      fontWeight: 700,
-      background: "#D5DDE5",
-      borderRadius: "3px 3px 0px 0px",
-      color: "#121212",
-      padding: 8,
-      borderTop: "1px solid #D5DDE5",
-      marginTop: -2,
-    },
     planHeader: {
       background: "#FFFFFF",
       borderRadius: "3px 3px 0px 0px",
@@ -173,10 +156,6 @@ const styles = (theme: Theme) =>
       marginBottom: 12,
       padding: "0% 15%",
     },
-    detailsCapacityMin: {
-      fontSize: 10,
-    },
-
     itemContainer: {
       height: 36,
       "& .item:last-child": {
@@ -235,11 +214,6 @@ const styles = (theme: Theme) =>
       fontSize: 15,
       fontWeight: 700,
     },
-    licenseButton: {
-      float: "right",
-      marginTop: 25,
-      marginRight: 25,
-    },
     openSourcePolicy: {
       color: "#1C5A8D",
       fontWeight: "bold",
@@ -263,10 +237,6 @@ const styles = (theme: Theme) =>
       cursor: "pointer",
       fontSize: 13,
     },
-    fullWidth: {
-      width: "100%",
-      height: "100%",
-    },
     licenseInfo: {
       position: "relative",
     },
@@ -280,26 +250,11 @@ const styles = (theme: Theme) =>
       fontSize: 14,
       fontWeight: "bold",
     },
-    licenseDescription: {
-      background: "#032F51",
-      padding: "30px 30px",
-      borderTop: "1px solid #e2e5e4",
-      borderLeft: "1px solid #e2e5e4",
-      borderRight: "1px solid #e2e5e4",
-      alignSelf: "flex-end",
-    },
     currentPlanBG: {
       background: "#022A4A 0% 0% no-repeat padding-box",
       color: "#FFFFFF",
       borderTop: "1px solid #52687d",
     },
-    currentPlanButton: {
-      background: "#FFFFFF",
-      color: "#022A4A",
-      "&:hover": {
-        background: "#FFFFFF",
-      },
-    },
     planItemsPadding: {
       border: "1px solid #EAEDEE",
       borderTop: 0,
@@ -321,10 +276,6 @@ const styles = (theme: Theme) =>
     loadingLoginStrategy: {
       textAlign: "center",
     },
-    clickableBlock: {
-      cursor: "pointer",
-    },
-
     ...containerForHeader(theme.spacing(4)),
     mainContainer: {
       border: "1px solid #EAEDEE",

portal-ui/src/screens/Console/License/LicenseModal.tsx

@@ -33,9 +33,6 @@ const styles = (theme: Theme) =>
     pageSubTitle: {
       textAlign: "center",
     },
-    paper: {
-      padding: "20px 52px 20px 28px",
-    },
     ...containerForHeader(theme.spacing(4)),
   });
 

portal-ui/src/screens/Console/Logs/LogSearch/LogSearchFullModal.tsx

@@ -37,10 +37,6 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    pathLabel: {
-      marginTop: 0,
-      marginBottom: 32,
-    },
     objectKeyCol: {
       fontWeight: 700,
       paddingRight: "10px",

portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx

@@ -90,16 +90,6 @@ const styles = (theme: Theme) =>
     ...tableStyles,
     ...advancedFilterToggleStyles,
 
-    buttonKit: {
-      "& div": {
-        height: 35,
-      },
-      "& .MuiOutlinedInput-notchedOutline": {
-        border: 0,
-        height: 28,
-        color: "#000000",
-      },
-    },
     searchOptions: {
       display: "flex",
       padding: 15,
@@ -107,16 +97,6 @@ const styles = (theme: Theme) =>
         flexFlow: "column",
       },
     },
-    selectorLabel: {
-      "& + div": {
-        "@media (max-width: 900px)": {
-          width: 110,
-        },
-      },
-      "@media (max-width: 900px)": {
-        marginLeft: 5,
-      },
-    },
     formBox: {
       border: "1px solid #EAEAEA",
       marginBottom: 15,
@@ -131,7 +111,6 @@ const styles = (theme: Theme) =>
       alignItems: "center",
       justifyContent: "flex-start",
     },
-    advancedFilterOptions: {},
     ...logsCommon,
     ...containerForHeader(theme.spacing(4)),
   });

portal-ui/src/screens/Console/Menu/Menu.tsx

@@ -101,16 +101,6 @@ const styles = (theme: Theme) =>
         color: "#ffffff",
       },
     },
-    logoSvg: {
-      width: 40,
-    },
-    logoSvgClosed: {
-      width: 0,
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-    },
     menuList: {
       "& .active": {
         color: "#fff",
@@ -160,17 +150,6 @@ const styles = (theme: Theme) =>
         marginLeft: 5,
       },
     },
-    groupTitle: {
-      color: "#fff",
-      fontSize: 10,
-      textTransform: "uppercase",
-      fontWeight: 700,
-      marginBottom: 3,
-      cursor: "pointer",
-      userSelect: "none",
-      display: "flex",
-      justifyContent: "space-between",
-    },
     subTitleMenu: {
       fontWeight: 700,
       marginLeft: 10,
@@ -179,44 +158,6 @@ const styles = (theme: Theme) =>
         color: "#fff",
       },
     },
-    selectorArrow: {
-      marginRight: 20,
-      marginTop: 1,
-      display: "inline-block",
-      width: 0,
-      height: 0,
-      borderStyle: "solid",
-      borderWidth: "4px 4px 0 4px",
-      borderColor:
-        "rgba(255, 255, 255, .29) transparent transparent transparent",
-      transform: "rotateZ(0deg)",
-      transitionDuration: "0.2s",
-    },
-    selectorArrowOpen: {
-      transform: "rotateZ(180deg)",
-    },
-    //new
-    appBar: {
-      zIndex: theme.zIndex.drawer + 1,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-    },
-    appBarShift: {
-      marginLeft: drawerWidth,
-      width: `calc(100% - ${drawerWidth}px)`,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    },
-    menuButton: {
-      marginRight: 36,
-    },
-    hide: {
-      display: "none",
-    },
     drawer: {
       width: drawerWidth,
       flexShrink: 0,

portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx

@@ -21,7 +21,6 @@ import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import { IElementValue, KVField } from "../Configurations/types";
 import {
-  fieldBasic,
   formFieldStyles,
   modalBasic,
 } from "../Common/FormComponents/common/styleLibrary";
@@ -43,45 +42,6 @@ const styles = (theme: Theme) =>
     formFieldRow: {
       ...formFieldStyles.formFieldRow,
     },
-    inputBoxContainer: {
-      marginBottom: 7,
-      "& .MuiInputLabel-root": {
-        minWidth: 200,
-        "& svg": {
-          width: 16,
-          height: 16,
-        },
-      },
-    },
-    textBoxContainer: {
-      flexGrow: 1,
-      position: "relative",
-      display: "flex",
-    },
-    overlayAction: {
-      top: 0,
-      right: 0,
-      position: "relative",
-      marginLeft: 10,
-      display: "flex",
-      alignItems: "center",
-      "& button": {
-        background: "#EAEAEA",
-      },
-    },
-    fieldContainer: {
-      "& .MuiInputLabel-root": {
-        minWidth: 200,
-      },
-    },
-    tooltipContainer: {
-      ...fieldBasic.tooltipContainer,
-      "& svg": {
-        width: 16,
-        height: 16,
-      },
-    },
-
     ...modalBasic,
   });
 

portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx

@@ -44,23 +44,6 @@ const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
     ...settingsCommon,
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    buttonContainer: {
-      textAlign: "right",
-    },
-    logoButton: {
-      height: "80px",
-    },
-
-    customTitle: {
-      ...settingsCommon.customTitle,
-      marginTop: 0,
-    },
   });
 
 interface IAddNotificationEndpointProps {

portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx

@@ -61,25 +61,9 @@ const styles = (theme: Theme) =>
     ...searchField,
     ...settingsCommon,
     ...containerForHeader(theme.spacing(4)),
-    strongText: {
-      fontWeight: 700,
-    },
-    keyName: {
-      marginLeft: 5,
-    },
-    iconText: {
-      lineHeight: "24px",
-    },
     twHeight: {
       minHeight: 400,
     },
-    lambdaContainer: {
-      padding: "15px 0",
-    },
-    searchField: {
-      ...searchField.searchField,
-      maxWidth: 380,
-    },
     tableBlock: {
       ...tableStyles.tableBlock,
     },

portal-ui/src/screens/Console/NotificationEndpoints/NotificationEndpoints.tsx

@@ -16,42 +16,14 @@
 
 import React, { Fragment } from "react";
 import PageHeader from "../Common/PageHeader/PageHeader";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
-
-import { AppState } from "../../../store";
-import { connect } from "react-redux";
-import { ISessionResponse } from "../types";
 
 import withSuspense from "../Common/Components/withSuspense";
+
 const ListNotificationEndpoints = withSuspense(
   React.lazy(() => import("./ListNotificationEndpoints"))
 );
 
-interface INotificationEndpoints {
-  classes: any;
-  session: ISessionResponse;
-  distributedSetup: boolean;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
-    ...containerForHeader(theme.spacing(4)),
-  });
-
-const NotificationEndpoints = ({
-  classes,
-  session,
-  distributedSetup,
-}: INotificationEndpoints) => {
+const NotificationEndpoints = () => {
   return (
     <Fragment>
       <PageHeader label="Notification Endpoints" />
@@ -60,11 +32,4 @@ const NotificationEndpoints = ({
   );
 };
 
-const mapState = (state: AppState) => ({
-  session: state.console.session,
-  distributedSetup: state.system.distributedSetup,
-});
-
-const connector = connect(mapState, {});
-
-export default withStyles(styles)(connector(NotificationEndpoints));
+export default NotificationEndpoints;

portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx

@@ -38,9 +38,6 @@ const styles = (theme: Theme) =>
   createStyles({
     ...settingsCommon,
     ...typesSelection,
-    link: {
-      maxWidth: 300,
-    },
   });
 
 const NotificationTypeSelector = ({ classes }: INotificationTypeSelector) => {

portal-ui/src/screens/Console/Policies/AddPolicy.tsx

@@ -36,10 +36,6 @@ import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMi
 
 const styles = (theme: Theme) =>
   createStyles({
-    jsonPolicyEditor: {
-      minHeight: 400,
-      width: "100%",
-    },
     buttonContainer: {
       textAlign: "right",
     },

portal-ui/src/screens/Console/Policies/ListPolicies.tsx

@@ -49,38 +49,12 @@ import SecureComponent, {
 import SearchBox from "../Common/SearchBox";
 
 import withSuspense from "../Common/Components/withSuspense";
+
 const AddPolicy = withSuspense(React.lazy(() => import("./AddPolicy")));
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
 const styles = (theme: Theme) =>
   createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-    addSideBar: {
-      width: 320,
-      padding: 20,
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
-    twHeight: {
-      minHeight: 600,
-    },
     ...actionsTray,
     ...searchField,
     searchField: {

portal-ui/src/screens/Console/Policies/PolicyDetails.tsx

@@ -56,6 +56,7 @@ import SecureComponent, {
 } from "../../../common/SecureComponent/SecureComponent";
 
 import withSuspense from "../Common/Components/withSuspense";
+
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
 interface IPolicyDetailsProps {
@@ -74,101 +75,10 @@ const styles = (theme: Theme) =>
       border: "1px solid #EAEAEA",
       height: "100%",
     },
-    multiContainer: {
-      display: "flex",
-      alignItems: "center" as const,
-      justifyContent: "flex-start" as const,
-    },
-    sizeFactorContainer: {
-      marginLeft: 8,
-    },
-    containerHeader: {
-      display: "flex",
-      justifyContent: "space-between",
-    },
     paperContainer: {
       padding: "15px 15px 15px 50px",
       minHeight: "450px",
     },
-    infoGrid: {
-      display: "grid",
-      gridTemplateColumns: "auto auto auto auto",
-      gridGap: 8,
-      "& div": {
-        display: "flex",
-        alignItems: "center",
-      },
-      "& div:nth-child(odd)": {
-        justifyContent: "flex-end",
-        fontWeight: 700,
-      },
-      "& div:nth-child(2n)": {
-        paddingRight: 35,
-      },
-    },
-    masterActions: {
-      width: "25%",
-      minWidth: "120px",
-      "& div": {
-        margin: "5px 0px",
-      },
-    },
-    updateButton: {
-      backgroundColor: "transparent",
-      border: 0,
-      padding: "0 6px",
-      cursor: "pointer",
-      "&:focus, &:active": {
-        outline: "none",
-      },
-      "& svg": {
-        height: 12,
-      },
-    },
-    noUnderLine: {
-      textDecoration: "none",
-    },
-    poolLabel: {
-      color: "#666666",
-    },
-    licenseContainer: {
-      position: "relative",
-      padding: "20px 52px 0px 28px",
-      background: "#032F51",
-      boxShadow: "0px 3px 7px #00000014",
-      "& h2": {
-        color: "#FFF",
-        marginBottom: 67,
-      },
-      "& a": {
-        textDecoration: "none",
-      },
-      "& h3": {
-        color: "#FFFFFF",
-        marginBottom: "30px",
-        fontWeight: "bold",
-      },
-      "& h6": {
-        color: "#FFFFFF !important",
-      },
-    },
-    licenseInfo: { color: "#FFFFFF", position: "relative" },
-    licenseInfoTitle: {
-      textTransform: "none",
-      color: "#BFBFBF",
-      fontSize: 11,
-    },
-    licenseInfoValue: {
-      textTransform: "none",
-      fontSize: 14,
-      fontWeight: "bold",
-    },
-    verifiedIcon: {
-      width: 96,
-      position: "absolute",
-      right: 0,
-      bottom: 29,
-    },
     breadcrumLink: {
       textDecoration: "none",
       color: "black",
@@ -182,16 +92,6 @@ const styles = (theme: Theme) =>
     labelCol: {
       fontWeight: "bold",
     },
-    statementActions: {
-      textAlign: "right",
-    },
-    addStmt: {
-      color: theme.palette.primary.main,
-    },
-    listBox: {
-      border: "1px solid #DADADA",
-      height: 100,
-    },
     ...actionsTray,
     ...searchField,
     ...modalBasic,

portal-ui/src/screens/Console/Policies/SetPolicy.tsx

@@ -56,9 +56,6 @@ const styles = (theme: Theme) =>
       textAlign: "right",
       marginTop: ".9rem",
     },
-    predefinedTitle: {
-      fontWeight: "normal",
-    },
   });
 
 const SetPolicy = ({

portal-ui/src/screens/Console/Speedtest/STResults.tsx

@@ -45,46 +45,6 @@ interface ISTResults {
 
 const styles = (theme: Theme) =>
   createStyles({
-    statContainer: {
-      padding: "18px 0 18px 25px",
-    },
-    statBlock: {
-      border: "#EEF1F4 1px solid",
-      borderRadius: 4,
-    },
-    testedAmount: {
-      display: "flex",
-      justifyContent: "space-between",
-      color: "#07193E",
-      padding: "12px 18px",
-      border: "#EEF1F4 1px solid",
-      borderLeft: 0,
-      borderRight: 0,
-    },
-    serverLength: {
-      color: "#696969",
-    },
-    serverDescrContainer: {
-      display: "flex",
-      margin: "15px 5px 0",
-      position: "relative",
-    },
-    serverDescrIcon: {
-      marginRight: 10,
-      "& svg": {
-        width: 16,
-      },
-    },
-    serverDescriptor: {
-      color: "#696969",
-      whiteSpace: "nowrap",
-      maxWidth: "100%",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-    },
-    serversResume: {
-      marginBottom: 15,
-    },
     objectGeneralTitle: {
       fontWeight: "bold",
       color: "#000",
@@ -94,9 +54,6 @@ const styles = (theme: Theme) =>
         width: 14,
       },
     },
-    generalContainer: {
-      padding: 20,
-    },
     generalUnit: {
       color: "#000",
       marginTop: 6,
@@ -108,11 +65,6 @@ const styles = (theme: Theme) =>
       color: "#081C42",
       fontWeight: "bold",
     },
-    shareResults: {
-      padding: "18px 25px",
-      color: "#07193E",
-      fontSize: 14,
-    },
     metricValContainer: {
       lineHeight: 1,
     },

portal-ui/src/screens/Console/Storage/Storage.tsx

@@ -45,12 +45,6 @@ interface IStorageProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
     pageContainer: {
       border: "1px solid #EAEAEA",
       height: "100%",

portal-ui/src/screens/Console/Storage/StoragePVCs.tsx

@@ -41,16 +41,6 @@ interface IStorageVolumesProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
-    breadcrumLink: {
-      textDecoration: "none",
-      color: "black",
-    },
     tableWrapper: {
       height: "calc(100vh - 267px)",
     },

portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx

@@ -68,9 +68,6 @@ interface IAddTenantProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     pageBox: {
       border: "1px solid #EAEAEA",
     },

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx

@@ -52,9 +52,6 @@ interface IAffinityProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     overlayAction: {
       marginLeft: 10,
       "& svg": {
@@ -65,16 +62,9 @@ const styles = (theme: Theme) =>
         background: "#EAEAEA",
       },
     },
-    radioOptionsLayout: {
-      "& div": {
-        display: "flex",
-        flexFlow: "column",
-      },
-    },
     affinityConfigField: {
       display: "flex",
     },
-
     affinityFieldLabel: {
       display: "flex",
       flexFlow: "column",

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx

@@ -75,9 +75,6 @@ interface IConfigureProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     configSectionItem: {
       marginRight: 15,
 
@@ -85,15 +82,6 @@ const styles = (theme: Theme) =>
         border: "1px solid red",
       },
     },
-    inputLabel: {
-      fontWeight: 300,
-      fontSize: 14,
-    },
-    textBoxContainer: {
-      "& input": {
-        fontWeight: 400,
-      },
-    },
     tenantCustomizationFields: {
       marginLeft: 30, // 2nd Level(15+15)
       width: "88%",

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx

@@ -14,7 +14,7 @@
 // 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 React, { Fragment, useState, useEffect, useCallback } from "react";
+import React, { Fragment, useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -22,13 +22,13 @@ import withStyles from "@mui/styles/withStyles";
 import { Paper } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import {
-  updateAddField,
-  isPageValid,
-  addFileServerCert,
   addFileClientCert,
-  addFileVaultCert,
-  addFileVaultCa,
   addFileGemaltoCa,
+  addFileServerCert,
+  addFileVaultCa,
+  addFileVaultCert,
+  isPageValid,
+  updateAddField,
 } from "../../actions";
 import {
   createTenantCommon,
@@ -105,9 +105,6 @@ interface IEncryptionProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     encryptionTypeOptions: {
       marginBottom: 15,
     },
@@ -117,15 +114,6 @@ const styles = (theme: Theme) =>
         flex: 1,
       },
     },
-    fileInputField: {
-      borderBottom: "1px solid #EAEAEA",
-      "&:last-child": {
-        borderBottom: 0,
-      },
-      "& input": {
-        borderBottom: 0,
-      },
-    },
     rightSpacer: {
       marginRight: 15,
     },

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx

@@ -72,9 +72,6 @@ interface IIdentityProviderProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     shortened: {
       gridTemplateColumns: "auto auto 50px 50px",
       display: "grid",
@@ -84,7 +81,6 @@ const styles = (theme: Theme) =>
         fontWeight: 400,
       },
     },
-
     buttonTray: {
       marginLeft: 10,
       display: "flex",
@@ -120,10 +116,6 @@ const styles = (theme: Theme) =>
     adUserDnRows: {
       display: "flex",
     },
-
-    inputLabel: {
-      minWidth: 260,
-    },
     ...createTenantCommon,
     ...formFieldStyles,
     ...modalBasic,

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx

@@ -69,14 +69,6 @@ interface IImagesProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
-    inputLabel: {
-      fontWeight: 300,
-      fontSize: 14,
-      minWidth: 200,
-    },
     ...formFieldStyles,
     ...modalBasic,
     ...wizardCommon,

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/NameTenant.tsx

@@ -61,9 +61,6 @@ import { Paper, SelectChangeEvent } from "@mui/material";
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     sizePreview: {
       position: "fixed",
       marginLeft: 10,
@@ -71,15 +68,6 @@ const styles = (theme: Theme) =>
       border: "1px solid #EAEAEA",
       padding: 2,
     },
-    inputLabel: {
-      minWidth: 200,
-    },
-    errorInField: {
-      "& .MuiFormControl-root & .MuiOutlinedInput-root & .MuiFormHelperText-root":
-        {
-          color: "blue",
-        },
-    },
     ...formFieldStyles,
     ...modalBasic,
     ...wizardCommon,

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx

@@ -61,9 +61,6 @@ interface ISecurityProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     minioCertificateRows: {
       display: "flex",
       alignItems: "center",
@@ -87,9 +84,6 @@ const styles = (theme: Theme) =>
         flexFlow: "column",
       },
     },
-    fileInputField: {
-      borderBottom: 0,
-    },
     minioCertsContainer: {
       marginBottom: 15,
     },

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/SizePreview.tsx

@@ -70,9 +70,6 @@ interface ISizePreviewProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     root: {
       margin: 4,
     },

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantSize.tsx

@@ -72,9 +72,6 @@ interface ITenantSizeProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    buttonContainer: {
-      textAlign: "right",
-    },
     compositeFieldContainer: {
       display: "flex",
       alignItems: "center",
@@ -90,9 +87,6 @@ const styles = (theme: Theme) =>
         },
       },
     },
-    inputLabel: {
-      minWidth: 200,
-    },
     ...formFieldStyles,
     ...modalBasic,
     ...wizardCommon,

portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx

@@ -49,6 +49,7 @@ import withSuspense from "../../Common/Components/withSuspense";
 const CredentialsPrompt = withSuspense(
   React.lazy(() => import("../../Common/CredentialsPrompt/CredentialsPrompt"))
 );
+
 interface ITenantsList {
   classes: any;
   setErrorSnackMessage: typeof setErrorSnackMessage;
@@ -67,9 +68,6 @@ const styles = (theme: Theme) =>
       fontSize: 14,
       fontWeight: "bold",
     },
-    addBucket: {
-      marginRight: 8,
-    },
     theaderSearch: {
       borderColor: theme.palette.grey["200"],
       "& .MuiInputBase-input": {
@@ -96,21 +94,6 @@ const styles = (theme: Theme) =>
       textAlign: "right",
       marginBottom: 8,
     },
-    healthStatusIcon: {
-      position: "relative",
-      fontSize: 10,
-      right: -30,
-      height: 10,
-      top: -50,
-    },
-    tenantItem: {
-      border: "1px solid #dedede",
-      marginBottom: 20,
-      paddingLeft: 40,
-      paddingRight: 40,
-      paddingTop: 30,
-      paddingBottom: 30,
-    },
   });
 
 const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {

portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import get from "lodash/get";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import { Theme } from "@mui/material/styles";
@@ -29,14 +29,6 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    multiContainer: {
-      display: "flex",
-      alignItems: "center" as const,
-      justifyContent: "flex-start" as const,
-    },
-    sizeFactorContainer: {
-      marginLeft: 8,
-    },
     bottomContainer: {
       display: "flex",
       flexGrow: 1,

portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx

@@ -47,18 +47,6 @@ interface IPoolsSummary {
 const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
-    redState: {
-      color: theme.palette.error.main,
-    },
-    yellowState: {
-      color: theme.palette.warning.main,
-    },
-    greenState: {
-      color: theme.palette.success.main,
-    },
-    greyState: {
-      color: "grey",
-    },
     ...actionsTray,
     ...containerForHeader(theme.spacing(4)),
   });

portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMetrics.tsx

@@ -40,10 +40,6 @@ interface ITenantMetrics {
 const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
-    flexBox: {
-      display: "flex",
-      flexFlow: "column",
-    },
     iframeStyle: {
       border: "0px",
       flex: "1 1 auto",

portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx

@@ -64,26 +64,13 @@ const styles = (theme: Theme) =>
     },
     bold: { fontWeight: "bold" },
     italic: { fontStyle: "italic" },
-    underline: { textDecorationLine: "underline" },
     paperContainer: {
       padding: "15px 15px 15px 50px",
     },
-    verifiedIcon: {
-      width: 96,
-      position: "absolute",
-      right: 0,
-      bottom: 29,
-    },
-    noUnderLine: {
-      textDecoration: "none",
-    },
     certificateInfo: {
       height: "auto",
       margin: 5,
     },
-    certificateInfoName: {
-      fontWeight: "bold",
-    },
     ...containerForHeader(theme.spacing(4)),
   });
 

portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx

@@ -33,10 +33,6 @@ import CodeMirrorWrapper from "../../Common/FormComponents/CodeMirrorWrapper/Cod
 
 const styles = (theme: Theme) =>
   createStyles({
-    jsonPolicyEditor: {
-      minHeight: 400,
-      width: "100%",
-    },
     buttonContainer: {
       textAlign: "right",
     },

portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx

@@ -41,16 +41,6 @@ interface ITenantVolumesProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    headerLabel: {
-      fontSize: 22,
-      fontWeight: 600,
-      color: "#000",
-      marginTop: 4,
-    },
-    breadcrumLink: {
-      textDecoration: "none",
-      color: "black",
-    },
     tableWrapper: {
       height: "450px",
     },

portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx

@@ -63,9 +63,6 @@ const styles = (theme: Theme) =>
       ...actionsTray.actionsTray,
       padding: "15px 0 0",
     },
-    logerror: {
-      color: "#A52A2A",
-    },
     logerror_tab: {
       color: "#A52A2A",
       paddingLeft: 25,