New Menu Adjustments (#2450)

Author: bexsoft

portal-ui/package.json

@@ -30,7 +30,7 @@
     "kbar": "^0.1.0-beta.34",
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
-    "mds": "https://github.com/minio/mds.git#v0.0.3",
+    "mds": "https://github.com/minio/mds.git#v0.0.4",
     "minio": "^7.0.28",
     "moment": "^2.29.4",
     "react": "^18.1.0",

portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx

@@ -21,16 +21,13 @@ import Grid from "@mui/material/Grid";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { AppState, useAppDispatch } from "../../../../store";
-import OperatorLogo from "../../../../icons/OperatorLogo";
-import ConsoleLogo from "../../../../icons/ConsoleLogo";
-import DirectPVLogo from "../../../../icons/DirectPVLogo";
 
 import { CircleIcon, ObjectManagerIcon } from "../../../../icons";
 import { Box } from "@mui/material";
 import { toggleList } from "../../ObjectBrowser/objectBrowserSlice";
 import { selFeatures } from "../../consoleSlice";
 import { selDirectPVMode, selOpMode } from "../../../../systemSlice";
-import { Button } from "mds";
+import { ApplicationLogo, Button } from "mds";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -57,9 +54,8 @@ const styles = (theme: Theme) =>
     },
     logo: {
       marginLeft: 34,
-      fill: theme.palette.primary.main,
-      "& .min-icon": {
-        width: 120,
+      "& svg": {
+        width: 150,
       },
     },
     middleComponent: {
@@ -124,9 +120,20 @@ const PageHeader = ({
   const newItems = useSelector(
     (state: AppState) => state.objectBrowser.objectManager.newItems
   );
+  const licenseInfo = useSelector(
+    (state: AppState) => state?.system?.licenseInfo
+  );
 
   const [newObject, setNewObject] = useState<boolean>(false);
 
+  const { plan = "" } = licenseInfo || {};
+
+  let logoPlan = "AGPL";
+
+  if (plan === "STANDARD" || plan === "ENTERPRISE") {
+    logoPlan = plan.toLowerCase();
+  }
+
   useEffect(() => {
     if (managerObjects.length > 0 && !managerOpen) {
       setNewObject(true);
@@ -159,10 +166,24 @@ const PageHeader = ({
         {!sidebarOpen && (
           <div className={classes.logo}>
             {!operatorMode && !directPVMode ? (
-              <ConsoleLogo />
+              <ApplicationLogo
+                applicationName={"console"}
+                subVariant={
+                  logoPlan as
+                    | "AGPL"
+                    | "simple"
+                    | "standard"
+                    | "enterprise"
+                    | undefined
+                }
+              />
             ) : (
               <Fragment>
-                {directPVMode ? <DirectPVLogo /> : <OperatorLogo />}
+                {directPVMode ? (
+                  <ApplicationLogo applicationName={"directpv"} />
+                ) : (
+                  <ApplicationLogo applicationName={"operator"} />
+                )}
               </Fragment>
             )}
           </div>

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

@@ -21,15 +21,29 @@ interface ITooltipWrapperProps {
   tooltip: string;
   children: any;
   errorProps?: any;
+  placement?:
+    | "bottom-end"
+    | "bottom-start"
+    | "bottom"
+    | "left-end"
+    | "left-start"
+    | "left"
+    | "right-end"
+    | "right-start"
+    | "right"
+    | "top-end"
+    | "top-start"
+    | "top";
 }
 
 const TooltipWrapper = ({
   tooltip,
   children,
   errorProps = null,
+  placement,
 }: ITooltipWrapperProps) => {
   return (
-    <Tooltip title={tooltip}>
+    <Tooltip title={tooltip} placement={placement}>
       <span>
         {errorProps ? cloneElement(children, { ...errorProps }) : children}
       </span>

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

@@ -24,10 +24,13 @@ const MenuSectionHeader = ({ label }: IMenuSectionHeader) => {
   return (
     <div
       style={{
-        fontSize: 18,
-        color: "#fff",
+        fontSize: 15,
+        color: "#b3c9d9",
         marginTop: 20,
         marginBottom: 10,
+        borderBottom: "#0F446C 1px solid",
+        marginRight: 25,
+        paddingBottom: 5,
       }}
       className={"menuHeader"}
     >

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

@@ -15,15 +15,15 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 export const menuItemContainerStyles: any = {
-  padding: "12px 0",
+  padding: "7px 0",
   "div:nth-of-type(2)": {
     flexGrow: 0,
     marginRight: "15px",
   },
 
   "&.active": {
     background:
-      "transparent linear-gradient(270deg, #00000000 0%, #051d39 53%, #54545400 100%) 0% 0% no-repeat padding-box",
+      "transparent linear-gradient(270deg, #00000000 0%, #005F81 53%, #54545400 100%) 0% 0% no-repeat padding-box",
     backgroundBlendMode: "multiply",
 
     "& span": {