From 0339925d153090796e33e8cb319e4f4740438b2c Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Tue, 31 May 2022 17:29:55 -0500 Subject: [PATCH] Added plan name icons to license page (#2060) Signed-off-by: Benjamin Perez --- portal-ui/src/icons/ConsoleAgpl.tsx | 2 - portal-ui/src/icons/ConsoleEnterprise.tsx | 2 - portal-ui/src/icons/ConsoleStandard.tsx | 2 - .../screens/Console/License/LicensePlans.tsx | 81 ++++++++++--------- 4 files changed, 42 insertions(+), 45 deletions(-) diff --git a/portal-ui/src/icons/ConsoleAgpl.tsx b/portal-ui/src/icons/ConsoleAgpl.tsx index 71dc00eea..c58daeaa9 100644 --- a/portal-ui/src/icons/ConsoleAgpl.tsx +++ b/portal-ui/src/icons/ConsoleAgpl.tsx @@ -40,12 +40,10 @@ const ConsoleAgpl = (props: SVGProps) => { diff --git a/portal-ui/src/icons/ConsoleEnterprise.tsx b/portal-ui/src/icons/ConsoleEnterprise.tsx index a3faff53b..54fa6e4c0 100644 --- a/portal-ui/src/icons/ConsoleEnterprise.tsx +++ b/portal-ui/src/icons/ConsoleEnterprise.tsx @@ -31,12 +31,10 @@ const ConsoleEnterprise = (props: SVGProps) => { diff --git a/portal-ui/src/icons/ConsoleStandard.tsx b/portal-ui/src/icons/ConsoleStandard.tsx index 164ca9978..c80b21f77 100644 --- a/portal-ui/src/icons/ConsoleStandard.tsx +++ b/portal-ui/src/icons/ConsoleStandard.tsx @@ -31,12 +31,10 @@ const ConsoleStandard = (props: SVGProps) => { diff --git a/portal-ui/src/screens/Console/License/LicensePlans.tsx b/portal-ui/src/screens/Console/License/LicensePlans.tsx index 2c88c441e..e0fd3f254 100644 --- a/portal-ui/src/screens/Console/License/LicensePlans.tsx +++ b/portal-ui/src/screens/Console/License/LicensePlans.tsx @@ -24,7 +24,12 @@ import { SubnetInfo } from "./types"; import withStyles from "@mui/styles/withStyles"; import { Box } from "@mui/material"; import useMediaQuery from "@mui/material/useMediaQuery"; -import { LicenseDocIcon } from "../../../icons"; +import { + ConsoleAgpl, + ConsoleEnterprise, + ConsoleStandard, + LicenseDocIcon, +} from "../../../icons"; import { LICENSE_PLANS, FEATURE_ITEMS, @@ -87,29 +92,23 @@ const PlanHeader = ({ }, "& .title-block": { - paddingTop: "20px", display: "flex", alignItems: "center", flexFlow: "column", width: "100%", - - marginTop: "auto", - marginBottom: "auto", "& .title-main": { display: "flex", alignItems: "center", justifyContent: "center", flex: 1, }, - "& .min-icon": { - marginLeft: "13px", - height: "13px", - width: "13px", - }, - - "& .title": { - fontSize: "22px", - fontWeight: 600, + "& .iconContainer": { + "& .min-icon": { + minWidth: 140, + width: "100%", + maxHeight: 55, + height: "100%", + }, }, }, @@ -143,10 +142,26 @@ const PlanHeader = ({ "&.active, &.active.xs-active": { borderTop: "3px solid #2781B0", color: "#ffffff", + position: "relative", "& .min-icon": { fill: "#ffffff", }, + + "&:before": { + content: "' '", + position: "absolute", + width: "100%", + height: "15px", + backgroundColor: "#2781B0", + display: "block", + top: -16, + }, + "& .iconContainer": { + "& .min-icon": { + marginTop: "-12px", + }, + }, }, "&.active": { background: "#2781B0", @@ -228,11 +243,10 @@ const LicensePlans = ({ > -
Community
+
+ +
-
- {isCommunityPlan ? "Current Plan" : ""} -
); @@ -248,11 +262,10 @@ const LicensePlans = ({ > -
Standard
+
+ +
-
- {isStandardPlan ? "Current Plan" : ""} -
); @@ -268,11 +281,10 @@ const LicensePlans = ({ > -
Enterprise
+
+ +
-
- {isEnterprisePlan ? "Current Plan" : ""} -
); @@ -293,6 +305,8 @@ const LicensePlans = ({ target="_blank" rel="noopener noreferrer" sx={{ + marginTop: "12px", + width: "80%", "&.MuiButton-contained": { padding: 0, paddingLeft: "8px", @@ -339,8 +353,6 @@ const LicensePlans = ({ border: "1px solid #eaeaea", borderTop: "0px", marginBottom: "45px", - overflow: "auto", - overflowY: "hidden", "&::-webkit-scrollbar": { width: "5px", height: "5px", @@ -400,7 +412,7 @@ const LicensePlans = ({ display: "flex", alignItems: "center", justifyContent: "center", - padding: "5px 0px 5px 0px", + padding: "5px 0px 25px 0px", borderLeft: "1px solid #eaeaea", }, "& .plan-header": { @@ -491,15 +503,6 @@ const LicensePlans = ({ "& .feature-title": { background: "#F7F7F7", }, - - "& .title-main": { - position: "relative", - top: "-17px", - }, - "& .cur-plan-text": { - position: "relative", - top: "-17px", - }, }, }} > @@ -717,7 +720,7 @@ const LicensePlans = ({ return ( -
+