Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve premium colors and make button more visible #7251

Merged
merged 5 commits into from
Dec 19, 2024
Merged

Improve premium colors and make button more visible #7251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1dd0c26
Improve premium colors and make action more visible
ClementPasteau Dec 19, 2024
3311493
Update colors
ClementPasteau Dec 19, 2024
93c1a95
Fix unused style
ClementPasteau Dec 19, 2024
f3ff6e7
Go back to 2 buttons
ClementPasteau Dec 19, 2024
06d1de2
Typo icon
ClementPasteau Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions newIDE/app/src/Profile/CurrentUsageDisplayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,6 @@ const CurrentUsageDisplayer = ({
!isFeatureLocked ? 'Build limit reached' : 'Unlock build type'
}
label={<Trans>Upgrade your subscription</Trans>}
makeButtonRaised
payWithCreditsOptions={
hidePurchaseWithCredits
? undefined
Expand Down Expand Up @@ -208,7 +207,6 @@ const CurrentUsageDisplayer = ({
!isFeatureLocked ? 'Build limit reached' : 'Unlock build type'
}
label={<Trans>Get a subscription</Trans>}
makeButtonRaised={quota.limitReached}
payWithCreditsOptions={
!quota.limitReached || hidePurchaseWithCredits
? undefined
Expand Down
109 changes: 51 additions & 58 deletions newIDE/app/src/Profile/Subscription/GetSubscriptionCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
// @flow
import * as React from 'react';
import { Trans } from '@lingui/macro';
import Text from '../../UI/Text';
import { Column } from '../../UI/Grid';
import { Column, Line } from '../../UI/Grid';
import { ResponsiveLineStackLayout } from '../../UI/Layout';
import Link from '../../UI/Link';
import { type SubscriptionDialogDisplayReason } from '../../Utils/Analytics/EventSender';
import { SubscriptionSuggestionContext } from './SubscriptionSuggestionContext';
import RaisedButton from '../../UI/RaisedButton';
import FlatButton from '../../UI/FlatButton';
import Coin from '../../Credits/Icons/Coin';
import { CalloutCard } from '../../UI/CalloutCard';
import classes from './GetSubscriptionCard.module.css';
import Paper from '../../UI/Paper';
import CrownShining from '../../UI/CustomSvgIcons/CrownShining';
import { useResponsiveWindowSize } from '../../UI/Responsive/ResponsiveWindowMeasurer';

const styles = {
paper: {
zIndex: 2, // Make sure the paper is above the background for the border effect.
flex: 1,
},
diamondIcon: {
width: 50,
height: 50,
width: 70,
height: 70,
},
coinIcon: {
width: 12,
Expand All @@ -29,7 +34,6 @@ type Props = {|
children: React.Node,
subscriptionDialogOpeningReason: SubscriptionDialogDisplayReason,
label?: React.Node,
makeButtonRaised?: boolean,
hideButton?: boolean,
payWithCreditsOptions?: {|
label: React.Node,
Expand All @@ -41,65 +45,54 @@ const GetSubscriptionCard = ({
children,
subscriptionDialogOpeningReason,
label,
makeButtonRaised,
hideButton,
payWithCreditsOptions,
}: Props) => {
const { openSubscriptionDialog } = React.useContext(
SubscriptionSuggestionContext
);

const { isMobile } = useResponsiveWindowSize();
return (
<CalloutCard
renderImage={style => (
<img src="res/diamond.svg" style={styles.diamondIcon} alt="diamond" />
)}
>
<Column expand justifyContent="center">
<ResponsiveLineStackLayout alignItems="center" noColumnMargin noMargin>
<Column noMargin expand>
{children}
<div className={classes.premiumContainer}>
<Paper style={styles.paper} background="medium">
<Line expand alignItems="center" noMargin={!isMobile}>
<img src="res/diamond.svg" style={styles.diamondIcon} alt="diamond" />
<Column expand justifyContent="center">
<ResponsiveLineStackLayout
alignItems="center"
noColumnMargin
noMargin
>
<Column noMargin expand>
{children}
</Column>
{payWithCreditsOptions && (
<FlatButton
leftIcon={<Coin style={styles.coinIcon} />}
label={payWithCreditsOptions.label}
primary
onClick={payWithCreditsOptions.onPayWithCredits}
/>
)}
{!hideButton && (
<RaisedButton
label={label || <Trans>Upgrade</Trans>}
primary
onClick={() => {
openSubscriptionDialog({
analyticsMetadata: {
reason: subscriptionDialogOpeningReason,
},
});
}}
icon={<CrownShining fontSize="small" />}
/>
)}
</ResponsiveLineStackLayout>
</Column>
{payWithCreditsOptions && (
<FlatButton
leftIcon={<Coin style={styles.coinIcon} />}
label={payWithCreditsOptions.label}
primary
onClick={payWithCreditsOptions.onPayWithCredits}
/>
)}
{!hideButton &&
(!makeButtonRaised ? (
<Link
href="#"
onClick={() => {
openSubscriptionDialog({
analyticsMetadata: {
reason: subscriptionDialogOpeningReason,
},
});
}}
>
<Text noMargin color="inherit">
{label || <Trans>Upgrade</Trans>}
</Text>
</Link>
) : (
<RaisedButton
label={label || <Trans>Upgrade</Trans>}
primary
onClick={() => {
openSubscriptionDialog({
analyticsMetadata: {
reason: subscriptionDialogOpeningReason,
},
});
}}
/>
))}
</ResponsiveLineStackLayout>
</Column>
</CalloutCard>
</Line>
</Paper>
</div>
);
};

Expand Down
19 changes: 19 additions & 0 deletions newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.premiumContainer {
position: relative;
overflow: hidden;
padding: 2px;
border-radius: 10px;
display: flex;
}

.premiumContainer::before {
content: '';
display: block;
background: linear-gradient(90deg, var(--theme-premium-teal) 0%, var(--theme-premium-orange) 100%);
width: 100%;
padding-bottom: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
101 changes: 52 additions & 49 deletions newIDE/app/src/Profile/Subscription/SubscriptionDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,9 +406,13 @@ export default function SubscriptionDialog({
.filter(Boolean)
.filter(plan => {
if (filter === 'individual') {
return ['free', 'gdevelop_silver', 'gdevelop_gold'].includes(
plan.id
);
if (isPlanValid) {
return ['free', 'gdevelop_silver', 'gdevelop_gold'].includes(
plan.id
);
} else {
return ['gdevelop_silver', 'gdevelop_gold'].includes(plan.id);
}
}
if (filter === 'team') {
return ['gdevelop_startup', 'gdevelop_enterprise'].includes(
Expand All @@ -419,13 +423,15 @@ export default function SubscriptionDialog({
return ['gdevelop_education'].includes(plan.id);
}

return plan.id !== 'gdevelop_education';
return !['gdevelop_education', 'free'].includes(plan.id);
})
: null;

const dialogMaxWidth =
!displayedSubscriptionPlanWithPricingSystems ||
displayedSubscriptionPlanWithPricingSystems.length === 1
? 'sm'
: displayedSubscriptionPlanWithPricingSystems.length < 3
? 'md'
: displayedSubscriptionPlanWithPricingSystems.length < 4
? 'lg'
Expand Down Expand Up @@ -465,54 +471,51 @@ export default function SubscriptionDialog({
open={open}
fixedContent={
<>
{hasValidSubscriptionPlan(authenticatedUser.subscription) &&
userSubscriptionPlanWithPricingSystems && (
<Column noMargin>
<Text>
<Trans>Your plan:</Trans>
</Text>
<Paper
background="medium"
variant="outlined"
style={styles.currentPlanPaper}
{isPlanValid && userSubscriptionPlanWithPricingSystems && (
<Column noMargin>
<Text>
<Trans>Your plan:</Trans>
</Text>
<Paper
background="medium"
variant="outlined"
style={styles.currentPlanPaper}
>
<Line
justifyContent="space-between"
alignItems="center"
noMargin
>
<Line
justifyContent="space-between"
alignItems="center"
noMargin
>
<Line alignItems="center" noMargin>
{getPlanIcon({
subscriptionPlan: userSubscriptionPlanWithPricingSystems,
logoSize: 20,
})}
<Text size="block-title">
{selectMessageByLocale(
i18n,
userSubscriptionPlanWithPricingSystems.nameByLocale
)}
</Text>
</Line>
{!hasSubscriptionBeenManuallyAdded(
authenticatedUser.subscription
) &&
!isSubscriptionComingFromTeam(
authenticatedUser.subscription
) &&
!willCancelAtPeriodEnd &&
userPricingSystemId !== 'REDEMPTION_CODE' && (
<FlatButton
primary
label={<Trans>Cancel subscription</Trans>}
onClick={() =>
buyUpdateOrCancelPlan(i18n, null)
}
/>
<Line alignItems="center" noMargin>
{getPlanIcon({
subscriptionPlan: userSubscriptionPlanWithPricingSystems,
logoSize: 20,
})}
<Text size="block-title">
{selectMessageByLocale(
i18n,
userSubscriptionPlanWithPricingSystems.nameByLocale
)}
</Text>
</Line>
</Paper>
</Column>
)}
{!hasSubscriptionBeenManuallyAdded(
authenticatedUser.subscription
) &&
!isSubscriptionComingFromTeam(
authenticatedUser.subscription
) &&
!willCancelAtPeriodEnd &&
userPricingSystemId !== 'REDEMPTION_CODE' && (
<FlatButton
primary
label={<Trans>Cancel subscription</Trans>}
onClick={() => buyUpdateOrCancelPlan(i18n, null)}
/>
)}
</Line>
</Paper>
</Column>
)}
<Line justifyContent="space-between" alignItems="center">
<Text size="block-title">
<Trans>Subscription plans</Trans>
Expand Down
52 changes: 52 additions & 0 deletions newIDE/app/src/UI/CustomSvgIcons/CrownShining.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from 'react';
import SvgIcon from '@material-ui/core/SvgIcon';

export default React.memo(props => (
<SvgIcon
{...props}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.99999 0.166656C8.27613 0.166656 8.49999 0.390514 8.49999 0.666656V1.33332C8.49999 1.60947 8.27613 1.83332 7.99999 1.83332C7.72385 1.83332 7.49999 1.60947 7.49999 1.33332V0.666656C7.49999 0.390514 7.72385 0.166656 7.99999 0.166656Z"
fill="currentColor"
/>
<path
d="M14.1667 7.99999C14.1667 7.72385 14.3905 7.49999 14.6667 7.49999H15.3333C15.6095 7.49999 15.8333 7.72385 15.8333 7.99999C15.8333 8.27613 15.6095 8.49999 15.3333 8.49999H14.6667C14.3905 8.49999 14.1667 8.27613 14.1667 7.99999Z"
fill="currentColor"
/>
<path
d="M8.49999 14.6667C8.49999 14.3905 8.27613 14.1667 7.99999 14.1667C7.72385 14.1667 7.49999 14.3905 7.49999 14.6667V15.3333C7.49999 15.6095 7.72385 15.8333 7.99999 15.8333C8.27613 15.8333 8.49999 15.6095 8.49999 15.3333V14.6667Z"
fill="currentColor"
/>
<path
d="M12.3131 12.3131C12.5084 12.1178 12.8249 12.1178 13.0202 12.3131L13.6869 12.9798C13.8821 13.175 13.8821 13.4916 13.6869 13.6869C13.4916 13.8821 13.175 13.8821 12.9798 13.6869L12.3131 13.0202C12.1178 12.8249 12.1178 12.5084 12.3131 12.3131Z"
fill="currentColor"
/>
<path
d="M13.6869 3.02021C13.8821 2.82495 13.8821 2.50837 13.6869 2.3131C13.4916 2.11784 13.175 2.11784 12.9798 2.3131L12.3131 2.97977C12.1178 3.17503 12.1178 3.49161 12.3131 3.68688C12.5084 3.88214 12.8249 3.88214 13.0202 3.68688L13.6869 3.02021Z"
fill="currentColor"
/>
<path
d="M3.68688 12.3131C3.88214 12.5084 3.88214 12.8249 3.68688 13.0202L3.02021 13.6869C2.82495 13.8821 2.50837 13.8821 2.3131 13.6869C2.11784 13.4916 2.11784 13.175 2.3131 12.9798L2.97977 12.3131C3.17503 12.1178 3.49161 12.1178 3.68688 12.3131Z"
fill="currentColor"
/>
<path
d="M3.02021 2.3131C2.82495 2.11784 2.50837 2.11784 2.3131 2.3131C2.11784 2.50837 2.11784 2.82495 2.3131 3.02021L2.97977 3.68688C3.17503 3.88214 3.49161 3.88214 3.68688 3.68688C3.88214 3.49161 3.88214 3.17503 3.68688 2.97977L3.02021 2.3131Z"
fill="currentColor"
/>
<path
d="M0.166656 7.99999C0.166656 7.72385 0.390514 7.49999 0.666656 7.49999H1.33332C1.60947 7.49999 1.83332 7.72385 1.83332 7.99999C1.83332 8.27613 1.60947 8.49999 1.33332 8.49999H0.666656C0.390514 8.49999 0.166656 8.27613 0.166656 7.99999Z"
fill="currentColor"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.22361 5.21944C4.05503 5.13515 3.85337 5.15282 3.70202 5.26515C3.55067 5.37748 3.47535 5.56537 3.50719 5.75114L4.30719 10.4178C4.34834 10.6578 4.55646 10.8333 4.8 10.8333H11.2C11.4435 10.8333 11.6517 10.6578 11.6928 10.4178L12.4928 5.75114C12.5247 5.56537 12.4493 5.37748 12.298 5.26515C12.1466 5.15282 11.945 5.13515 11.7764 5.21944L9.32557 6.44486L8.37963 5.34126C8.28464 5.23044 8.14597 5.16666 8 5.16666C7.85404 5.16666 7.71537 5.23044 7.62037 5.34126L6.67444 6.44486L4.22361 5.21944ZM5.22158 9.83332L4.65967 6.55551L6.5764 7.51387C6.78161 7.61648 7.03032 7.56625 7.17963 7.39205L8 6.43495L8.82038 7.39205C8.96969 7.56625 9.2184 7.61648 9.42361 7.51387L11.3403 6.55551L10.7784 9.83332H5.22158Z"
fill="currentColor"
/>
</SvgIcon>
));
3 changes: 2 additions & 1 deletion newIDE/app/src/UI/RaisedButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import classNames from 'classnames';
export type RaisedButtonPropsWithoutOnClick = {|
label?: React.Node,
primary?: boolean,
color?: 'primary' | 'success' | 'danger',
color?: 'primary' | 'success' | 'danger' | 'premium',
size?: 'medium',
disabled?: boolean,
keyboardFocused?: boolean,
Expand Down Expand Up @@ -69,6 +69,7 @@ const RaisedButton = React.forwardRef<RaisedButtonProps, ButtonInterface>(
className={classNames({
[classes.buttonSuccess]: color === 'success',
[classes.buttonDanger]: color === 'danger',
[classes.buttonPremium]: color === 'premium',
})}
style={
style || !label
Expand Down
9 changes: 9 additions & 0 deletions newIDE/app/src/UI/RaisedButton.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,13 @@ button.buttonDanger {
button.buttonDanger:hover {
background-color: var(--theme-error-dark);
color: var(--theme-error-text-contrast-color);
}

button.buttonPremium {
background: linear-gradient(90deg, var(--theme-premium-teal) 0%, var(--theme-premium-orange) 100%);
color: var(--theme-premium-text-contrast-color);
}

button.buttonPremium:hover {
background: linear-gradient(90deg, var(--theme-premium-teal-dark) 0%, var(--theme-premium-orange-dark) 100%);
}
Loading
Loading