From e3836538fcbe2b64764bccf85afd68184379722b Mon Sep 17 00:00:00 2001
From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com>
Date: Wed, 16 Mar 2022 17:22:02 +0000
Subject: [PATCH] UX back button to be consistent in all screens (#1726)

---
 portal-ui/src/common/BackLink.tsx             | 66 ++++++++++++-------
 portal-ui/src/icons/BackIcon.tsx              | 44 +++++++++++++
 portal-ui/src/icons/index.ts                  |  1 +
 .../Buckets/BucketDetails/BrowserHandler.tsx  |  9 +--
 .../Console/Buckets/ListBuckets/AddBucket.tsx |  2 +-
 .../screens/Console/Common/IconsScreen.tsx    |  5 ++
 .../Common/ModalWrapper/ModalWrapper.tsx      |  5 --
 .../Console/Common/PageHeader/PageHeader.tsx  |  2 +-
 .../AddTierConfiguration.tsx                  | 11 +++-
 .../TiersConfiguration/TierTypeSelector.tsx   | 10 ++-
 .../Console/Groups/GroupDetailsHeader.tsx     |  6 +-
 .../src/screens/Console/Groups/Groups.tsx     |  2 +-
 .../screens/Console/Groups/GroupsDetails.tsx  |  2 -
 portal-ui/src/screens/Console/Menu/Menu.tsx   |  2 +-
 .../AddNotificationEndpoint.tsx               | 14 ++--
 .../NotificationTypeSelector.tsx              | 15 +++--
 .../Console/Policies/PolicyDetails.tsx        |  7 +-
 .../src/screens/Console/Support/Register.tsx  | 47 ++++++-------
 .../Console/Tenants/AddTenant/AddTenant.tsx   |  2 +-
 .../Tenants/TenantDetails/TenantDetails.tsx   |  8 +--
 .../src/screens/Console/Users/ListUsers.tsx   |  2 +-
 .../src/screens/Console/Users/UserDetails.tsx |  7 +-
 22 files changed, 168 insertions(+), 101 deletions(-)
 create mode 100644 portal-ui/src/icons/BackIcon.tsx

diff --git a/portal-ui/src/common/BackLink.tsx b/portal-ui/src/common/BackLink.tsx
index 4966d483e..9e9168200 100644
--- a/portal-ui/src/common/BackLink.tsx
+++ b/portal-ui/src/common/BackLink.tsx
@@ -19,30 +19,45 @@ 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 { BackSettingsIcon } from "../icons";
+import { BackIcon } from "../icons";
+import { Box } from "@mui/material";
 
 const styles = (theme: Theme) =>
   createStyles({
     link: {
-      display: "flex",
+      display: "inline-block",
       alignItems: "center",
+      justifyContent: "center",
       textDecoration: "none",
-      maxWidth: "300px",
-      padding: "2rem 2rem 0rem 2rem",
-      color: theme.palette.primary.light,
-      fontSize: ".8rem",
-      "&:hover": {
-        textDecoration: "underline",
+      maxWidth: "40px",
+      "&:active": {
+        color: theme.palette.primary.light,
       },
     },
     icon: {
-      marginRight: ".3rem",
+      marginRight: "11px",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      "& svg.min-icon": {
-        width: 12,
+      height: "35px",
+      width: "35px",
+      borderRadius: "2px",
+      "&:hover": {
+        background: "rgba(234,237,238)",
       },
+      "& svg.min-icon": {
+        width: "18px",
+        height: "12px",
+      },
+    },
+    label: {
+      display: "flex",
+      alignItems: "center",
+      height: "35px",
+      padding: "0 0px 0 5px",
+      fontSize: "18px",
+      fontWeight: 600,
+      color: theme.palette.primary.light,
     },
   });
 
@@ -62,20 +77,27 @@ const BackLink = ({
   executeOnClick,
 }: IBackLink) => {
   return (
-    <Link
-      to={to}
-      className={`${classes.link} ${className ? className : ""}`}
-      onClick={() => {
-        if (executeOnClick) {
-          executeOnClick();
-        }
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
       }}
     >
-      <div className={classes.icon}>
-        <BackSettingsIcon />
-      </div>
+      <Link
+        to={to}
+        className={`${classes.link} ${className ? className : ""}`}
+        onClick={() => {
+          if (executeOnClick) {
+            executeOnClick();
+          }
+        }}
+      >
+        <div className={classes.icon}>
+          <BackIcon />
+        </div>
+      </Link>
       <div className={classes.label}>{label}</div>
-    </Link>
+    </Box>
   );
 };
 
diff --git a/portal-ui/src/icons/BackIcon.tsx b/portal-ui/src/icons/BackIcon.tsx
new file mode 100644
index 000000000..12c0d7a01
--- /dev/null
+++ b/portal-ui/src/icons/BackIcon.tsx
@@ -0,0 +1,44 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { SVGProps } from "react";
+
+const BackIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={`min-icon`}
+      fill={"currentcolor"}
+      {...props}
+      viewBox="0 0 18 12"
+    >
+      <defs />
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g fill={"currentcolor"} id="Fill-2">
+          <polygon points="17.9999987 4.99999934 3.82999951 4.99999934 7.40999918 1.4099994 5.99999946 -3.60000001e-07 -1.80000029e-07 5.99999928 5.99999946 11.9999989 7.40999918 10.5899991 3.82999951 6.99999922 17.9999987 6.99999922"></polygon>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default BackIcon;
diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts
index 6994b618f..9466931df 100644
--- a/portal-ui/src/icons/index.ts
+++ b/portal-ui/src/icons/index.ts
@@ -179,3 +179,4 @@ export { default as OpenSourceIcon } from "./OpenSourceIcon";
 export { default as ArrowRightLink } from "./ArrowRightLink";
 export { default as LicenseDocIcon } from "./LicenseDocIcon";
 export { default as SelectAllIcon } from "./SelectAllIcon";
+export { default as BackIcon } from "./BackIcon";
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
index d549941f8..5ada4164a 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
@@ -38,6 +38,7 @@ import {
   IAM_PERMISSIONS,
   IAM_ROLES,
   IAM_SCOPES,
+  IAM_PAGES,
 } from "../../../../common/SecureComponent/permissions";
 import SearchBox from "../../Common/SearchBox";
 import BackLink from "../../../../common/BackLink";
@@ -98,13 +99,7 @@ const BrowserHandler = ({
   return (
     <Fragment>
       <PageHeader
-        label={
-          <BackLink
-            label={"Back to Buckets"}
-            to={"/buckets"}
-            className={classes.backToBuckets}
-          />
-        }
+        label={<BackLink label={"Buckets"} to={IAM_PAGES.BUCKETS} />}
         actions={
           <SecureComponent
             scopes={IAM_PERMISSIONS[IAM_ROLES.BUCKET_ADMIN]}
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
index a36b415ba..d8a3cedff 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -266,7 +266,7 @@ const AddBucket = ({
   return (
     <Fragment>
       <PageHeader label={"Create a Bucket"} />
-      <BackLink label={"Return to Buckets"} to={"/buckets"} />
+      <BackLink label={"Buckets"} to={"/buckets"} />
       <PageLayout>
         <Grid item xs={12} className={classes.boxy}>
           <form
diff --git a/portal-ui/src/screens/Console/Common/IconsScreen.tsx b/portal-ui/src/screens/Console/Common/IconsScreen.tsx
index 81017b04c..ce0585356 100644
--- a/portal-ui/src/screens/Console/Common/IconsScreen.tsx
+++ b/portal-ui/src/screens/Console/Common/IconsScreen.tsx
@@ -1082,6 +1082,11 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
           <br />
           LicenseDocIcon
         </Grid>
+        <Grid item xs={3} sm={2} md={1}>
+          <cicons.BackIcon />
+          <br />
+          BackIcon
+        </Grid>
       </Grid>
       <h1>Menu Icons</h1>
       <Grid
diff --git a/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx b/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
index 2db5af3dd..f3236dc81 100644
--- a/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/ModalWrapper/ModalWrapper.tsx
@@ -47,11 +47,6 @@ interface IModalProps {
 const styles = (theme: Theme) =>
   createStyles({
     ...deleteDialogStyles,
-    root: {
-      "& .MuiPaper-root": {
-        padding: "0 2rem 2rem 1rem",
-      },
-    },
     content: {
       padding: 25,
       paddingBottom: 0,
diff --git a/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx b/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx
index 27dad51c0..5bb47b565 100644
--- a/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx
+++ b/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx
@@ -60,7 +60,7 @@ const styles = (theme: Theme) =>
       color: "#000",
       fontSize: 18,
       fontWeight: 700,
-      marginLeft: 34,
+      marginLeft: 21,
       marginTop: 8,
     },
     rightMenu: {
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
index 74d207f5a..92432779c 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
@@ -310,9 +310,14 @@ const AddTierConfiguration = ({
 
   return (
     <Fragment>
-      <PageHeader label="Tiers" />
-
-      <BackLink to={IAM_PAGES.TIERS_ADD} label="Back To Tier Type Selection" />
+      <PageHeader
+        label={
+          <Fragment>
+            <BackLink to={IAM_PAGES.TIERS_ADD} label={"Add Tier"} />
+          </Fragment>
+        }
+        actions={<React.Fragment />}
+      />
 
       <PageLayout>
         <Grid
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
index 87df42dab..dcf073ba1 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
@@ -35,8 +35,14 @@ const TierTypeSelector = ({ history }: ITypeTiersConfig) => {
 
   return (
     <Fragment>
-      <PageHeader label="Tier Configuration" />
-      <BackLink to={IAM_PAGES.TIERS} label="Return to Configured Tiers" />
+      <PageHeader
+        label={
+          <Fragment>
+            <BackLink to={IAM_PAGES.TIERS} label="Tier Types" />
+          </Fragment>
+        }
+        actions={<React.Fragment />}
+      />
 
       <PageLayout>
         <Box
diff --git a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx b/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
index fafc33383..3b7a2d179 100644
--- a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
@@ -1,10 +1,10 @@
 import React, { Fragment } from "react";
 import PageHeader from "../Common/PageHeader/PageHeader";
-import { Link } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
+import BackLink from "../../../common/BackLink";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -23,9 +23,7 @@ const GroupDetailsHeader = ({ classes }: DetailsHeaderProps) => {
     <PageHeader
       label={
         <Fragment>
-          <Link to={IAM_PAGES.GROUPS} className={classes.breadcrumLink}>
-            Groups
-          </Link>
+          <BackLink to={IAM_PAGES.GROUPS} label={"Groups"} />
         </Fragment>
       }
       actions={<React.Fragment />}
diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
index 1f4780294..dadc508f1 100644
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -259,7 +259,7 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => {
                     />
                   </SecureComponent>
                 </Grid>
-                <Grid item xs={12}>
+                <Grid item xs={12} marginTop={"25px"}>
                   <HelpBox
                     title={"Groups"}
                     iconComponent={<GroupsIcon />}
diff --git a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
index da2254e2b..e46ad9cb3 100644
--- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
@@ -33,7 +33,6 @@ import DeleteGroup from "./DeleteGroup";
 import VerticalTabs from "../Common/VerticalTabs/VerticalTabs";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import PageLayout from "../Common/Layout/PageLayout";
-import BackLink from "../../../common/BackLink";
 import PanelTitle from "../Common/PanelTitle/PanelTitle";
 import SearchBox from "../Common/SearchBox";
 import {
@@ -277,7 +276,6 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
   return (
     <React.Fragment>
       <GroupDetailsHeader />
-      <BackLink to={IAM_PAGES.GROUPS} label={"Return to Groups"} />
 
       <PageLayout className={classes.pageContainer}>
         <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Menu/Menu.tsx b/portal-ui/src/screens/Console/Menu/Menu.tsx
index ead77bcaa..d184d2cea 100644
--- a/portal-ui/src/screens/Console/Menu/Menu.tsx
+++ b/portal-ui/src/screens/Console/Menu/Menu.tsx
@@ -35,7 +35,7 @@ import MenuToggle from "./MenuToggle";
 import ConsoleMenuList from "./ConsoleMenuList";
 import { validRoutes } from "../valid-routes";
 
-const drawerWidth = 245;
+const drawerWidth = 250;
 
 const styles = (theme: Theme) =>
   createStyles({
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
index a80ae621f..8e46e229a 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
@@ -187,10 +187,16 @@ const AddNotificationEndpoint = ({
 
   return (
     <Fragment>
-      <PageHeader label="Notifications" />
-      <BackLink
-        to="/notification-endpoints/add"
-        label={" Back To Supported Services"}
+      <PageHeader
+        label={
+          <Fragment>
+            <BackLink
+              to={IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD}
+              label="Notification Endpoint"
+            />
+          </Fragment>
+        }
+        actions={<React.Fragment />}
       />
 
       <PageLayout>
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
index af9e62da9..88bf8cdc3 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
@@ -44,11 +44,16 @@ const styles = (theme: Theme) =>
 const NotificationTypeSelector = ({ classes }: INotificationTypeSelector) => {
   return (
     <Fragment>
-      <PageHeader label="Notification Endpoints" />
-      <BackLink
-        to={IAM_PAGES.NOTIFICATIONS_ENDPOINTS}
-        label="Return to Configured Endpoints"
-        className={classes.link}
+      <PageHeader
+        label={
+          <Fragment>
+            <BackLink
+              to={IAM_PAGES.NOTIFICATIONS_ENDPOINTS}
+              label="Notification Targets"
+            />
+          </Fragment>
+        }
+        actions={<React.Fragment />}
       />
       <PageLayout>
         <div className={classes.iconContainer}>
diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
index 7ac9417d1..f34490046 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -31,7 +31,6 @@ import { Button, LinearProgress } from "@mui/material";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import api from "../../../common/api";
 import PageHeader from "../Common/PageHeader/PageHeader";
-import { Link } from "react-router-dom";
 import { setErrorSnackMessage, setSnackBarMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
@@ -333,13 +332,11 @@ const PolicyDetails = ({
       <PageHeader
         label={
           <Fragment>
-            <Link to={IAM_PAGES.POLICIES} className={classes.breadcrumLink}>
-              Policy
-            </Link>
+            <BackLink to={IAM_PAGES.POLICIES} label={"Policy"} />
           </Fragment>
         }
       />
-      <BackLink to={IAM_PAGES.POLICIES} label={"Return to Policies"} />
+
       <PageLayout className={classes.pageContainer}>
         <Grid item xs={12}>
           <ScreenTitle
diff --git a/portal-ui/src/screens/Console/Support/Register.tsx b/portal-ui/src/screens/Console/Support/Register.tsx
index f90fc5c44..76a672c64 100644
--- a/portal-ui/src/screens/Console/Support/Register.tsx
+++ b/portal-ui/src/screens/Console/Support/Register.tsx
@@ -33,7 +33,6 @@ import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import OnlineRegistrationIcon from "../../../icons/OnlineRegistrationIcon";
 import OfflineRegistrationIcon from "../../../icons/OfflineRegistrationIcon";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import OnlineRegistrationBackIcon from "../../../icons/OnlineRegistrationBackIcon";
 import OfflineRegistrationBackIcon from "../../../icons/OfflineRegistrationBackIcon";
 import api from "../../../common/api";
 
@@ -63,6 +62,7 @@ import { AppState } from "../../../store";
 
 import RegisterHelpBox from "./RegisterHelpBox";
 import RegistrationStatusBanner from "./RegistrationStatusBanner";
+import BackLink from "../../../common/BackLink";
 
 interface IRegister {
   classes: any;
@@ -854,30 +854,6 @@ const Register = ({
           </Grid>
         ) : null}
 
-        {!onlineActivation ? (
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "flex-start",
-              marginBottom: "30px",
-              "& .min-icon": {
-                height: "25px",
-                width: "25px",
-                marginRight: "15px",
-              },
-            }}
-          >
-            <OnlineRegistrationBackIcon />
-            <Link
-              className={classes.link}
-              onClick={() => setOnlineActivation(!onlineActivation)}
-            >
-              Back to Online Activation
-            </Link>
-          </Box>
-        ) : null}
-
         {clusterRegistered ? null : formTitle}
 
         {clusterRegistered ? null : clusterRegistrationForm}
@@ -1019,7 +995,26 @@ const Register = ({
 
   return (
     <Fragment>
-      <PageHeader label="Register" />
+      <PageHeader
+        label={
+          <Fragment>
+            {!onlineActivation ? (
+              <BackLink
+                to={IAM_PAGES.REGISTER_SUPPORT}
+                label={"Offline Registration"}
+                executeOnClick={() => {
+                  fetchSubnetRegToken();
+                  setOnlineActivation(!onlineActivation);
+                }}
+              />
+            ) : (
+              "Register"
+            )}
+          </Fragment>
+        }
+        actions={<React.Fragment />}
+      />
+
       <PageLayout>{uiToShow}</PageLayout>
     </Fragment>
   );
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
index fefd1f98f..9c7f834bb 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
@@ -766,7 +766,7 @@ const AddTenant = ({
       <PageHeader label={"Create New Tenant"} />
       <BackLink
         to={"/tenants"}
-        label={"Return to Tenant List"}
+        label={"Tenant List"}
         executeOnClick={resetAddTenantForm}
       />
       <PageLayout>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
index e7f3b77e5..9fa446411 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -328,16 +328,16 @@ const TenantDetails = ({
           closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
         />
       )}
+
       <PageHeader
         label={
           <Fragment>
-            <Link to={"/tenants"} className={classes.breadcrumLink}>
-              Tenants
-            </Link>
+            <BackLink to={IAM_PAGES.TENANTS} label="Tenants" />
           </Fragment>
         }
+        actions={<React.Fragment />}
       />
-      <BackLink to={"/tenants"} label={"Return to Tenants"} />
+
       <PageLayout className={classes.pageContainer}>
         <Grid item xs={12}>
           <ScreenTitle
diff --git a/portal-ui/src/screens/Console/Users/ListUsers.tsx b/portal-ui/src/screens/Console/Users/ListUsers.tsx
index b50e9b667..0532fd48b 100644
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -318,7 +318,7 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
                     />
                   </SecureComponent>
                 </Grid>
-                <Grid item xs={12}>
+                <Grid item xs={12} marginTop={"25px"}>
                   <HelpBox
                     title={"Users"}
                     iconComponent={<UsersIcon />}
diff --git a/portal-ui/src/screens/Console/Users/UserDetails.tsx b/portal-ui/src/screens/Console/Users/UserDetails.tsx
index 389d3b339..eba1984ab 100644
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -16,8 +16,6 @@
 
 import React, { Fragment, useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
-
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -189,9 +187,7 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
       <PageHeader
         label={
           <Fragment>
-            <Link to={"/users"} className={classes.breadcrumLink}>
-              Users
-            </Link>
+            <BackLink label={"User"} to={IAM_PAGES.USERS} />
           </Fragment>
         }
         actions={<React.Fragment></React.Fragment>}
@@ -233,7 +229,6 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
           closeModal={() => setChangeUserPasswordModalOpen(false)}
         />
       )}
-      <BackLink label={"Return to Users"} to={IAM_PAGES.USERS} />
       <PageLayout className={classes.pageContainer}>
         <Grid item xs={12}>
           <ScreenTitle