New Vertical Tab UX refactor (#1210)

Co-authored-by: Daniel Valdivia <[email protected]>

Author: prakashsvmx

portal-ui/src/common/BackLink.tsx

@@ -19,18 +19,27 @@ import { Link } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import Grid from "@mui/material/Grid";
 import { BackSettingsIcon } from "../icons";
 
 const styles = (theme: Theme) =>
   createStyles({
     link: {
+      display: "flex",
+      alignItems: "center",
       textDecoration: "none",
-      color: theme.palette.primary.main,
-      fontSize: 18,
-      fontWeight: 600,
-      marginBottom: 10,
-      marginTop: 10,
+      maxWidth: "250px",
+      padding: "2rem 2rem 0rem 2rem",
+      color: theme.palette.primary.light,
+      fontSize: ".8rem",
+      "&:hover": {
+        textDecoration: "underline",
+      },
+    },
+    icon: {
+      marginRight: ".3rem",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
     },
   });
 
@@ -43,12 +52,10 @@ interface IBackLink {
 const BackLink = ({ to, label, classes }: IBackLink) => {
   return (
     <Link to={to} className={classes.link}>
-      <Grid container spacing={1}>
-        <Grid item>
-          <BackSettingsIcon />
-        </Grid>
-        <Grid item>{label}</Grid>
-      </Grid>
+      <div className={classes.icon}>
+        <BackSettingsIcon />
+      </div>
+      <div>{label}</div>
     </Link>
   );
 };

portal-ui/src/common/HelpBox.tsx

@@ -61,11 +61,11 @@ const HelpBox = ({ classes, iconComponent, title, help }: IHelpBox) => {
   return (
     <div className={classes.root}>
       <Grid container>
-        <Grid xs={12} className={classes.icon}>
+        <Grid item xs={12} className={classes.icon}>
           {iconComponent}
           {title}
         </Grid>
-        <Grid xs={12} className={classes.helpText}>
+        <Grid item xs={12} className={classes.helpText}>
           {help}
         </Grid>
       </Grid>

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

@@ -42,6 +42,7 @@ import { ErrorResponseHandler } from "../../../common/types";
 import ChangePasswordModal from "./ChangePasswordModal";
 import SearchIcon from "../../../icons/SearchIcon";
 import HelpBox from "../../../common/HelpBox";
+import PageLayout from "../Common/Layout/PageLayout";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -75,9 +76,6 @@ const styles = (theme: Theme) =>
         },
       },
     },
-    twHeight: {
-      minHeight: 600,
-    },
     imageIcon: {
       height: "100%",
     },
@@ -234,7 +232,7 @@ const Account = ({
           </React.Fragment>
         }
       />
-      <Grid container className={classes.container}>
+      <PageLayout>
         <Grid item xs={12} className={classes.actionsTray}>
           <TextField
             placeholder="Search Service Accounts"
@@ -277,7 +275,6 @@ const Account = ({
             idField={""}
             columns={[{ label: "Service Account", elementKey: "" }]}
             itemActions={tableActions}
-            customPaperHeight={classes.twHeight}
           />
         </Grid>
         <Grid item xs={12}>
@@ -308,7 +305,7 @@ const Account = ({
             }
           />
         </Grid>
-      </Grid>
+      </PageLayout>
     </React.Fragment>
   );
 };

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

@@ -16,9 +16,6 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import { Paper } from "@mui/material";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
@@ -42,8 +39,6 @@ import {
 } from "../../../../types";
 import PanelTitle from "../../Common/PanelTitle/PanelTitle";
 
-const styles = (theme: Theme) => createStyles({});
-
 const mapState = (state: AppState) => ({
   session: state.console.session,
   loadingBucket: state.buckets.bucketDetails.loadingBucket,
@@ -206,4 +201,4 @@ const AccessDetails = ({
   );
 };
 
-export default withStyles(styles)(connector(AccessDetails));
+export default connector(AccessDetails);

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

@@ -99,9 +99,7 @@ const BrowserHandler = ({
           )
         }
       />
-      <Grid container className={classes.container}>
-        {fileMode ? <ObjectDetails /> : <ListObjects />}
-      </Grid>
+      <Grid>{fileMode ? <ObjectDetails /> : <ListObjects />}</Grid>
     </Fragment>
   );
 };