Added plan name icons to license page (#2060)
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
GitHub
File diff suppressed because one or more lines are too long
@@ -31,12 +31,10 @@ const ConsoleEnterprise = (props: SVGProps<SVGSVGElement>) => {
|
||||
<path
|
||||
d="M12.537-8.4H4.594v-4.437h7.593v-1.612H4.594v-4.34H12.44v-1.6H2.886V-6.8h9.651ZM27.5-20.4H25.79V-9.725l-8.224-10.68H16.022V-6.8h1.709l.01-10.671,8.214,10.68H27.5Zm13.312,0H29.829v1.621H34.47V-6.8h1.709V-18.774h4.631ZM52.782-8.4H44.84v-4.437h7.593v-1.612H44.84v-4.34h7.845v-1.6H43.131V-6.8h9.651ZM56.268-20.4V-6.8h1.709v-5.865h1.592L64.239-6.8h2.117l-4.787-5.865h.107c2.913,0,4.748-1.515,4.748-3.874,0-2.476-1.689-3.855-4.758-3.855Zm5.36,1.6c1.971,0,3.02.748,3.02,2.253,0,1.524-1.019,2.321-3.02,2.321H57.977v-4.573ZM74.609-12.24c3.068,0,4.806-1.534,4.806-4.078S77.677-20.4,74.609-20.4H69.444V-6.8h1.709V-12.24Zm-.039-6.544c2.01,0,3.068.816,3.068,2.466s-1.058,2.466-3.068,2.466H71.153v-4.932ZM82.328-20.4V-6.8h1.709v-5.865h1.592L90.3-6.8h2.117l-4.787-5.865h.107c2.913,0,4.748-1.515,4.748-3.874,0-2.476-1.689-3.855-4.758-3.855Zm5.36,1.6c1.971,0,3.02.748,3.02,2.253,0,1.524-1.02,2.321-3.02,2.321H84.037v-4.573Zm9.525-1.6H95.5V-6.8h1.709ZM110.835-19.1a8.323,8.323,0,0,0-4.894-1.486c-2.864,0-5.195,1.466-5.195,4.088,0,2.321,1.787,3.359,4.029,3.631l1.262.155c2.117.262,3.253.864,3.253,2.126,0,1.534-1.592,2.359-3.622,2.359a7.261,7.261,0,0,1-4.428-1.5l-.932,1.359a8.808,8.808,0,0,0,5.36,1.767c2.942,0,5.4-1.418,5.4-4.127,0-2.4-1.971-3.33-4.272-3.612l-1.194-.146c-2.039-.252-3.078-.884-3.078-2.117,0-1.466,1.418-2.359,3.408-2.359a7.113,7.113,0,0,1,4.029,1.253ZM123.817-8.4h-7.942v-4.437h7.593v-1.612h-7.593v-4.34h7.845v-1.6h-9.554V-6.8h9.651Z"
|
||||
transform="translate(-0.407 35.155)"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="M15.34.122H17.7V7.1H15.34Zm-2.865.1L7.68,3.147a.214.214,0,0,1-.223,0L2.662.218a.66.66,0,0,0-.344-.1H2.313a.659.659,0,0,0-.658.658V7.091H4.017v-3a.236.236,0,0,1,.36-.2L7.063,5.53a.841.841,0,0,0,.865.009l2.836-1.664a.239.239,0,0,1,.236,0,.234.234,0,0,1,.12.2V7.089h2.361V.778a.656.656,0,0,0-.657-.658h-.006a.656.656,0,0,0-.344.1Zm17.009-.1h-2.4V3.3a.234.234,0,0,1-.115.2.237.237,0,0,1-.232.006L20.531.2a.663.663,0,0,0-.309-.077h0a.659.659,0,0,0-.658.658V7.092h2.377V3.919a.236.236,0,0,1,.347-.208l6.235,3.307a.656.656,0,0,0,.308.077h0a.659.659,0,0,0,.658-.658ZM31.342,7.1V.122H32.43V7.1Zm7.485.125c-2.925,0-5-1.387-5-3.611S35.916,0,38.827,0,43.84,1.387,43.84,3.613s-2.05,3.611-5.012,3.611Zm0-6.3c-2.175,0-3.85.95-3.85,2.687S36.652,6.3,38.827,6.3s3.862-.937,3.862-2.687S41,.925,38.827.925Z"
|
||||
transform="translate(0)"
|
||||
fill="#fff"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@ -31,12 +31,10 @@ const ConsoleStandard = (props: SVGProps<SVGSVGElement>) => {
|
||||
<path
|
||||
d="M12.721-19.038A8.7,8.7,0,0,0,7.609-20.59c-2.992,0-5.427,1.532-5.427,4.27,0,2.424,1.866,3.51,4.209,3.794l1.319.162c2.211.274,3.4.9,3.4,2.221,0,1.6-1.664,2.465-3.783,2.465A7.586,7.586,0,0,1,2.7-9.25L1.726-7.83a9.2,9.2,0,0,0,5.6,1.846c3.073,0,5.64-1.481,5.64-4.311,0-2.505-2.059-3.479-4.463-3.773L7.254-14.22c-2.13-.264-3.215-.923-3.215-2.211,0-1.532,1.481-2.465,3.56-2.465a7.431,7.431,0,0,1,4.209,1.308Zm13.338-1.349H14.587v1.694h4.849V-6.187h1.785V-18.693h4.838Zm7.668,0H31.506l-5.772,14.2h1.856l1.552-3.875H36.03l1.562,3.875h1.917Zm-1.136,1.765,2.759,6.867H29.822Zm21.281-1.765H52.087V-9.24L43.5-20.4H41.883V-6.187h1.785l.01-11.147L52.259-6.176h1.613Zm4.047,0v14.2h5.417c4.585,0,7.526-2.779,7.526-7.1s-2.942-7.1-7.526-7.1Zm5.417,1.694c3.723,0,5.65,2.171,5.65,5.406,0,3.215-1.927,5.406-5.65,5.406H59.7V-18.693Zm16.686-1.694H77.8l-5.772,14.2h1.856l1.552-3.875h6.887l1.562,3.875H85.8Zm-1.136,1.765,2.759,6.867H76.117Zm9.291-1.765v14.2h1.785v-6.127h1.664L96.5-6.187h2.211l-5-6.127h.112c3.043,0,4.96-1.582,4.96-4.047,0-2.587-1.765-4.027-4.97-4.027Zm5.6,1.674c2.059,0,3.155.781,3.155,2.353,0,1.592-1.065,2.424-3.155,2.424H89.962v-4.777Zm8.165-1.674v14.2h5.417c4.585,0,7.526-2.779,7.526-7.1s-2.942-7.1-7.526-7.1Zm5.417,1.694c3.723,0,5.65,2.171,5.65,5.406,0,3.215-1.927,5.406-5.65,5.406h-3.631V-18.693Z"
|
||||
transform="translate(-0.021 35.806)"
|
||||
fill="#fff"
|
||||
/>
|
||||
<path
|
||||
d="M15.951.127h2.468V7.417H15.951Zm-2.993.1L7.949,3.288a.224.224,0,0,1-.233,0L2.707.228a.69.69,0,0,0-.359-.1H2.342a.688.688,0,0,0-.687.687V7.407H4.122V4.269a.247.247,0,0,1,.376-.21L7.305,5.777a.879.879,0,0,0,.9.009l2.963-1.738a.249.249,0,0,1,.246,0,.245.245,0,0,1,.125.212V7.406H14.01V.813a.686.686,0,0,0-.686-.687h-.006a.686.686,0,0,0-.359.1Zm17.769-.1h-2.5V3.445a.245.245,0,0,1-.12.211.248.248,0,0,1-.243.006L21.374.208a.693.693,0,0,0-.323-.08h0a.688.688,0,0,0-.687.687V7.409h2.483V4.094a.247.247,0,0,1,.362-.218L29.719,7.33a.686.686,0,0,0,.322.08h0a.688.688,0,0,0,.687-.687Zm1.941,7.289V.127h1.136V7.417Zm7.819.13c-3.056,0-5.223-1.449-5.223-3.773S37.447,0,40.488,0s5.236,1.449,5.236,3.774-2.141,3.773-5.236,3.773Zm0-6.58c-2.272,0-4.022.992-4.022,2.807s1.749,2.807,4.022,2.807,4.035-.979,4.035-2.807S42.761.967,40.488.967Z"
|
||||
transform="translate(0)"
|
||||
fill="#fff"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@ -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 = ({
|
||||
>
|
||||
<Box className="title-block">
|
||||
<Box className="title-main">
|
||||
<div className="title">Community</div>
|
||||
<div className="iconContainer">
|
||||
<ConsoleAgpl />
|
||||
</div>
|
||||
</Box>
|
||||
<div className="cur-plan-text">
|
||||
{isCommunityPlan ? "Current Plan" : ""}
|
||||
</div>
|
||||
</Box>
|
||||
</PlanHeader>
|
||||
);
|
||||
@@ -248,11 +262,10 @@ const LicensePlans = ({
|
||||
>
|
||||
<Box className="title-block">
|
||||
<Box className="title-main">
|
||||
<div className="title">Standard</div>
|
||||
<div className="iconContainer">
|
||||
<ConsoleStandard />
|
||||
</div>
|
||||
</Box>
|
||||
<div className="cur-plan-text">
|
||||
{isStandardPlan ? "Current Plan" : ""}
|
||||
</div>
|
||||
</Box>
|
||||
</PlanHeader>
|
||||
);
|
||||
@@ -268,11 +281,10 @@ const LicensePlans = ({
|
||||
>
|
||||
<Box className="title-block">
|
||||
<Box className="title-main">
|
||||
<div className="title">Enterprise</div>
|
||||
<div className="iconContainer">
|
||||
<ConsoleEnterprise />
|
||||
</div>
|
||||
</Box>
|
||||
<div className="cur-plan-text">
|
||||
{isEnterprisePlan ? "Current Plan" : ""}
|
||||
</div>
|
||||
</Box>
|
||||
</PlanHeader>
|
||||
);
|
||||
@@ -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 (
|
||||
<Box className="feature-item">
|
||||
<Box className="feature-item-info">
|
||||
<div className="xs-only"> </div>
|
||||
<div className="xs-only"></div>
|
||||
<Box className="plan-feature">
|
||||
<CheckCircleIcon />
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user