Match button's height. Remove Margin+Padding on Panel Titles. Move List bucket Buttons. (#1191)

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

Author: dvaldivia

portal-ui/src/index.tsx

@@ -21,9 +21,9 @@ import Routes from "./Routes";
 import configureStore from "./store";
 import * as serviceWorker from "./serviceWorker";
 import {
-  ThemeProvider,
-  Theme,
   StyledEngineProvider,
+  Theme,
+  ThemeProvider,
 } from "@mui/material/styles";
 import withStyles from "@mui/styles/withStyles";
 import "react-virtualized/styles.css";
@@ -42,10 +42,13 @@ const GlobalCss = withStyles({
   // @global is handled by jss-plugin-global.
   "@global": {
     // You should target [class*="MuiButton-root"] instead if you nest themes.
+    ".MuiButton-root": {
+      height: 38,
+    },
     ".MuiButton-contained": {
       fontSize: "14px",
       textTransform: "capitalize",
-      padding: "16px 25px 16px 25px",
+      padding: "15px 25px 15px 25px",
       borderRadius: 3,
     },
     ".MuiButton-sizeSmall": {

portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.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, { useEffect, useState, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -40,6 +40,7 @@ import {
   ADMIN_LIST_USER_POLICIES,
   ADMIN_LIST_USERS,
 } from "../../../../types";
+import PanelTitle from "../../Common/PanelTitle";
 
 const styles = (theme: Theme) => createStyles({});
 
@@ -159,7 +160,7 @@ const AccessDetails = ({
 
   return (
     <Fragment>
-      <h1 className={classes.sectionTitle}>Access Audit</h1>
+      <PanelTitle>Access Audit</PanelTitle>
       <Tabs
         value={curTab}
         onChange={(e: React.ChangeEvent<{}>, newValue: number) => {

portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.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, { useEffect, useState, Fragment } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -40,6 +40,7 @@ import {
 import { BucketInfo } from "../types";
 import { displayComponent } from "../../../../utils/permissions";
 import { S3_GET_BUCKET_POLICY, S3_PUT_BUCKET_POLICY } from "../../../../types";
+import PanelTitle from "../../Common/PanelTitle";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -240,7 +241,7 @@ const AccessRule = ({
         />
       )}
       <Grid item xs={12} className={classes.actionsTray}>
-        <h1 className={classes.sectionTitle}>Access Rules</h1>
+        <PanelTitle>Access Rules</PanelTitle>
         {displayAddAccessRules && (
           <Button
             variant="contained"
@@ -256,9 +257,6 @@ const AccessRule = ({
           </Button>
         )}
       </Grid>
-      <Grid item xs={12}>
-        <br />
-      </Grid>
       <Paper>
         <TableWrapper
           disabled={!displayAccessRules}

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

@@ -42,6 +42,7 @@ import {
   S3_GET_BUCKET_NOTIFICATIONS,
   S3_PUT_BUCKET_NOTIFICATIONS,
 } from "../../../../types";
+import PanelTitle from "../../Common/PanelTitle";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -157,7 +158,7 @@ const BucketEventsPanel = ({
 
       <Grid container>
         <Grid item xs={12} className={classes.actionsTray}>
-          <h1 className={classes.sectionTitle}>Events</h1>
+          <PanelTitle>Events</PanelTitle>
           {displaySubscribeToEvents && (
             <Button
               variant="contained"

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

@@ -41,10 +41,9 @@ import { displayComponent } from "../../../../utils/permissions";
 import {
   ADMIN_LIST_TIERS,
   S3_GET_LIFECYCLE_CONFIGURATION,
-  S3_GET_REPLICATION_CONFIGURATION,
   S3_PUT_LIFECYCLE_CONFIGURATION,
-  S3_PUT_REPLICATION_CONFIGURATION,
 } from "../../../../types";
+import PanelTitle from "../../Common/PanelTitle";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -207,7 +206,7 @@ const BucketLifecyclePanel = ({
       )}
       <Grid container>
         <Grid item xs={12} className={classes.actionsTray}>
-          <h1 className={classes.sectionTitle}>Lifecycle Rules</h1>
+          <PanelTitle>Lifecycle Rules</PanelTitle>
           {displayAddLifeCycleRules && (
             <Button
               variant="contained"

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

@@ -32,7 +32,6 @@ import {
   BucketReplication,
   BucketReplicationDestination,
   BucketReplicationRule,
-  HasPermissionResponse,
 } from "../types";
 import { ErrorResponseHandler } from "../../../../common/types";
 import { AppState } from "../../../../store";
@@ -43,12 +42,10 @@ import DeleteReplicationRule from "./DeleteReplicationRule";
 import HelpBox from "../../../../common/HelpBox";
 import { displayComponent } from "../../../../utils/permissions";
 import {
-  ADMIN_SERVER_INFO,
-  S3_GET_BUCKET_NOTIFICATIONS,
   S3_GET_REPLICATION_CONFIGURATION,
-  S3_PUT_BUCKET_NOTIFICATIONS,
   S3_PUT_REPLICATION_CONFIGURATION,
 } from "../../../../types";
+import PanelTitle from "../../Common/PanelTitle";
 
 interface IBucketReplicationProps {
   classes: any;
@@ -179,7 +176,7 @@ const BucketReplicationPanel = ({
       )}
       <Grid container>
         <Grid item xs={12} className={classes.actionsTray}>
-          <h1 className={classes.sectionTitle}>Replication</h1>
+          <PanelTitle>Replication</PanelTitle>
           {displayAddReplicationRules && (
             <Button
               variant="contained"

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

@@ -68,6 +68,7 @@ import {
   S3_PUT_BUCKET_VERSIONING,
   S3_PUT_OBJECT_RETENTION,
 } from "../../../../types";
+import PanelTitle from "../../Common/PanelTitle";
 
 interface IBucketSummaryProps {
   classes: any;
@@ -483,7 +484,7 @@ const BucketSummary = ({
       )}
       <Grid container>
         <Grid item xs={12} className={classes.actionsTray}>
-          <h1 className={classes.sectionTitle}>Summary</h1>
+          <PanelTitle>Summary</PanelTitle>
         </Grid>
       </Grid>
       <Paper className={classes.paperContainer}>