Top Bar UX back icon and link (#1860)

portal-ui/src/common/BackLink.tsx

@@ -24,37 +24,6 @@ import { Box } from "@mui/material";
 
 const styles = (theme: Theme) =>
   createStyles({
-    link: {
-      display: "block",
-      textDecoration: "none",
-      "&:active": {
-        color: theme.palette.primary.light,
-      },
-    },
-    iconBox: {
-      display: "flex",
-      flexDirection: "row",
-      "&:hover": {
-        background: "rgba(234,237,238)",
-      },
-      height: "30px",
-      paddingBottom: 4,
-      paddingTop: 8,
-      paddingRight: 16,
-      paddingLeft: 0,
-      borderRadius: 4,
-    },
-    icon: {
-      lineHeight: 1,
-      marginRight: "14px",
-      alignItems: "center",
-      width: "22px",
-      "& .min-icon": {
-        color: theme.palette.primary.light,
-        width: "16px",
-        height: "16px",
-      },
-    },
     label: {
       lineHeight: 1,
       alignItems: "center",
@@ -62,6 +31,7 @@ const styles = (theme: Theme) =>
       fontSize: "14px",
       fontWeight: 600,
       color: theme.palette.primary.light,
+      marginRight: "10px",
     },
   });
 
@@ -85,6 +55,42 @@ const BackLink = ({
       sx={{
         display: "flex",
         alignItems: "center",
+        textDecoration: "none",
+        "& .icon-box": {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "row",
+          height: "30px",
+          paddingLeft: 0,
+
+          "&:hover .icon": {
+            background: "rgba(234,237,238)",
+            borderRadius: "2px",
+          },
+
+          "& .icon": {
+            lineHeight: 1,
+            marginRight: "3px",
+            display: "flex",
+            alignItems: "center",
+            width: "28px",
+            height: "30px",
+
+            "& .min-icon": {
+              width: "17px",
+              height: "11px",
+              margin: "auto",
+            },
+          },
+        },
+        "& a": {
+          textDecoration: "none",
+          textDecorationColor: "#081C42",
+          "&:active": {
+            color: "#081C42",
+          },
+        },
       }}
     >
       <Link
@@ -96,10 +102,10 @@ const BackLink = ({
           }
         }}
       >
-        <div className={classes.iconBox}>
-          <div className={classes.icon}>
+        <div className="icon-box">
+          <Box className="icon">
             <BackSettingsIcon />
-          </div>
+          </Box>
           <div className={classes.label}>{label}</div>
         </div>
       </Link>

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

@@ -20,7 +20,6 @@ import { connect } from "react-redux";
 import Grid from "@mui/material/Grid";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
 import { AppState } from "../../../../store";
 import OperatorLogo from "../../../../icons/OperatorLogo";
@@ -28,6 +27,7 @@ import ConsoleLogo from "../../../../icons/ConsoleLogo";
 import { IFileItem } from "../../ObjectBrowser/types";
 import { toggleList } from "../../ObjectBrowser/actions";
 import { ObjectManagerIcon } from "../../../../icons";
+import { Box } from "@mui/material";
 
 interface IPageHeader {
   classes: any;
@@ -56,13 +56,6 @@ const styles = (theme: Theme) =>
       justifyContent: "flex-start",
       alignItems: "center",
     },
-    labelStyle: {
-      color: "#000",
-      fontSize: 18,
-      fontWeight: 700,
-      marginLeft: 21,
-      marginTop: 8,
-    },
     rightMenu: {
       textAlign: "right",
     },
@@ -116,9 +109,17 @@ const PageHeader = ({
             {operatorMode ? <OperatorLogo /> : <ConsoleLogo />}
           </div>
         )}
-        <Typography variant="h4" className={classes.labelStyle}>
+        <Box
+          sx={{
+            color: "#000",
+            fontSize: 18,
+            fontWeight: 700,
+            marginLeft: "21px",
+            display: "flex",
+          }}
+        >
           {label}
-        </Typography>
+        </Box>
       </Grid>
       {middleComponent && (
         <Grid

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

@@ -74,7 +74,7 @@ const PoolsSummary = ({
             executeOnClick={() => {
               setOpenPoolDetails(false);
             }}
-            label={"Back to Pools list"}
+            label={"Pools list"}
             to={match.url}
           />
         </Grid>