mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated design of License page (#3540)

Browse Source 
- This change doesn't include the new logo for Object Store, this needs to be addressed on MDS

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2025-05-16 12:04:38 -06:00
committed by GitHub
parent 7871f6bc27
commit 0398c69c7f
3 changed files with 58 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web-app/src/screens/Console/License/License.tsx
View File

@@ -30,7 +30,7 @@ const License = () => {
return (
<Fragment>
<PageHeaderWrapper label="MinIO License and Support Plan" />
<PageHeaderWrapper label="Community and Enterprise Editions" />
<PageLayout>
<LicensePlans />
</PageLayout>

102
web-app/src/screens/Console/License/LicensePlans.tsx
View File

@@ -23,51 +23,49 @@ import CheckIcon from "./CheckIcon";
const LicensesInformation = styled.div(({ theme }) => ({
display: "grid",
gridTemplateColumns: "repeat(3, minmax(350px, 400px))",
gridTemplateColumns: "repeat(3, minmax(270px, 320px))",
justifyContent: "flex-start",
marginTop: 30,
marginLeft: 30,
"& > div": {
borderBottom: `${get(theme, "borderColor", "#EAEAEA")} 1px solid`,
padding: "25px 40px",
padding: "25px 30px",
justifyContent: "center",
"&.first": {
padding: 0,
},
"&.openSource": {
borderRight: `#002562 2px solid`,
borderLeft: `#002562 2px solid`,
position: "relative",
"&.first:before": {
content: "' '",
width: "calc(100% + 4px)",
height: 16,
display: "block",
backgroundColor: "#001F55",
position: "absolute",
top: -14,
left: -2,
border: `#002562 2px solid`,
borderBottom: 0,
borderRight: `${get(theme, "signalColors.main", "#002562")} 2px solid`,
borderLeft: `${get(theme, "signalColors.main", "#002562")} 2px solid`,
"&.first": {
borderTop: `${get(theme, "signalColors.main", "#002562")} 2px solid`,
borderTopLeftRadius: 12,
borderTopRightRadius: 12,
},
"&.last": {
paddingBottom: 30,
"&:after": {
content: "' '",
width: "calc(100% + 4px)",
height: 16,
display: "block",
position: "absolute",
bottom: -14,
left: -2,
border: `#002562 2px solid`,
borderTop: 0,
borderBottomLeftRadius: 12,
borderBottomRightRadius: 12,
},
borderBottom: `${get(theme, "signalColors.main", "#002562")} 2px solid`,
borderBottomLeftRadius: 12,
borderBottomRightRadius: 12,
},
},
"&.enterprise": {
borderRight: `#a0a0a0 2px solid`,
borderLeft: `#a0a0a0 2px solid`,
"&.first": {
borderTop: `#a0a0a0 2px solid`,
borderTopLeftRadius: 12,
borderTopRightRadius: 12,
},
"&.last": {
paddingBottom: 30,
borderBottom: `#a0a0a0 2px solid`,
borderBottomLeftRadius: 12,
borderBottomRightRadius: 12,
},
},
"&.feature-information": {
textAlign: "center",
textAlign: "center" as const,
},
"&.feature-label": {
paddingLeft: 5,
@@ -78,23 +76,27 @@ const LicensesInformation = styled.div(({ theme }) => ({
},
"& .planName": {
fontWeight: 600,
fontSize: 32,
marginBottom: 24,
textAlign: "center",
marginTop: 8,
fontSize: 18,
textAlign: "center" as const,
color: "#fff",
marginBottom: 30,
padding: "8px 0",
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
"&.openSource": {
backgroundColor: `${get(theme, "signalColors.main", "#002562")}`,
},
"&.enterprise": {
backgroundColor: "#a0a0a0",
},
},
"& .planIcon": {
height: 100,
height: 90,
display: "flex",
alignItems: "flex-start",
justifyContent: "center",
"& svg": {
height: 80,
},
"&.commercial": {
"& svg": {
height: 70,
},
height: 50,
},
},
"& .planDescription": {
@@ -116,7 +118,7 @@ const LicensePlans = () => {
sx={{
marginTop: "12px",
width: "80%",
height: "55px",
height: "40px",
}}
onClick={(e) => {
e.preventDefault();
@@ -145,10 +147,16 @@ const LicensePlans = () => {
<LicensesInformation>
{[null, ...LICENSE_PLANS_INFORMATION].map((element, index) => {
return (
<Box className={`${index === 1 ? "openSource first" : ""}`}>
<Box
className={`first ${index === 1 ? "openSource" : index === 2 ? "enterprise" : ""}`}
>
{element !== null && (
<Box>
<Box className={"planName"}>{element.planName}</Box>
<Box
className={`planName ${index === 1 ? "openSource" : index === 2 ? "enterprise" : ""}`}
>
{element.planName}
</Box>
<Box
className={`planIcon ${
element.planType === "commercial" ? "commercial" : ""
@@ -178,7 +186,7 @@ const LicensePlans = () => {
feature.featurePlans.openSource || null,
)}
</Box>
<Box className={`feature-information ${lastItem}`}>
<Box className={`feature-information enterprise ${lastItem}`}>
{renderFeatureInformation(feature.featurePlans.eosPlus || null)}
</Box>
</Fragment>
@@ -187,8 +195,8 @@ const LicensePlans = () => {
{[null, ...LICENSE_PLANS_INFORMATION].map((element, index) => {
return (
<Box
className={`${
index === 1 ? "openSource last" : ""
className={`last ${
index === 1 ? "openSource" : index === 2 ? "enterprise" : ""
} noBorderBottom`}
sx={{
display: "flex",

4
web-app/src/screens/Console/License/utils.tsx
View File

@@ -123,7 +123,7 @@ export const FEATURE_ITEMS: PlansFeatures[] = [
export const LICENSE_PLANS_INFORMATION: LicensePlanOption[] = [
{
planId: "openSource",
planName: "Community Edition",
planName: "Community",
planType: "open-source",
planIcon: (
<ApplicationLogo applicationName={"console"} subVariant={"AGPL"} />
@@ -132,7 +132,7 @@ export const LICENSE_PLANS_INFORMATION: LicensePlanOption[] = [
},
{
planId: "eosPlus",
planName: "Enterprise Edition",
planName: "Enterprise",
planType: "commercial",
planIcon: (
<ApplicationLogo applicationName={"aistor"} subVariant={"enterprise"} />