From 1dd0c26b1ffb30c508d6963f6bd1b4d80126073a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Pasteau?= <4895034+ClementPasteau@users.noreply.github.com> Date: Thu, 19 Dec 2024 10:20:23 +0100 Subject: [PATCH 1/5] Improve premium colors and make action more visible --- .../app/src/Profile/CurrentUsageDisplayer.js | 2 - .../Subscription/GetSubscriptionCard.js | 109 ++++++++---------- .../GetSubscriptionCard.module.css | 23 ++++ .../Subscription/SubscriptionDialog.js | 101 ++++++++-------- .../app/src/UI/CustomSvgIcons/CrownShining.js | 52 +++++++++ newIDE/app/src/UI/RaisedButton.js | 3 +- newIDE/app/src/UI/RaisedButton.module.css | 9 ++ .../app/src/UI/Theme/BlueDarkTheme/theme.json | 12 ++ .../src/UI/Theme/DefaultDarkTheme/theme.json | 12 ++ .../src/UI/Theme/DefaultLightTheme/theme.json | 12 ++ newIDE/app/src/UI/Theme/NordTheme/theme.json | 12 ++ .../app/src/UI/Theme/OneDarkTheme/theme.json | 12 ++ .../app/src/UI/Theme/RosePineTheme/theme.json | 12 ++ .../UI/Theme/SolarizedDarkTheme/theme.json | 12 ++ newIDE/app/src/UI/User/UserAvatar.js | 28 +++++ newIDE/app/src/UI/User/UserAvatar.module.css | 19 +++ newIDE/app/src/UI/User/UserChip.js | 76 +++++++++--- newIDE/app/src/Utils/Analytics/EventSender.js | 3 +- .../GetSubscriptionCard.stories.js | 84 ++++++++++++++ .../UserChip/UserChip.stories.js | 31 +++-- 20 files changed, 489 insertions(+), 135 deletions(-) create mode 100644 newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css create mode 100644 newIDE/app/src/UI/CustomSvgIcons/CrownShining.js create mode 100644 newIDE/app/src/UI/User/UserAvatar.js create mode 100644 newIDE/app/src/UI/User/UserAvatar.module.css create mode 100644 newIDE/app/src/stories/componentStories/Profile/Subscription/GetSubscriptionCard.stories.js diff --git a/newIDE/app/src/Profile/CurrentUsageDisplayer.js b/newIDE/app/src/Profile/CurrentUsageDisplayer.js index d4b50db0ee5b..daf3fb799a98 100644 --- a/newIDE/app/src/Profile/CurrentUsageDisplayer.js +++ b/newIDE/app/src/Profile/CurrentUsageDisplayer.js @@ -161,7 +161,6 @@ const CurrentUsageDisplayer = ({ !isFeatureLocked ? 'Build limit reached' : 'Unlock build type' } label={Upgrade your subscription} - makeButtonRaised payWithCreditsOptions={ hidePurchaseWithCredits ? undefined @@ -208,7 +207,6 @@ const CurrentUsageDisplayer = ({ !isFeatureLocked ? 'Build limit reached' : 'Unlock build type' } label={Get a subscription} - makeButtonRaised={quota.limitReached} payWithCreditsOptions={ !quota.limitReached || hidePurchaseWithCredits ? undefined diff --git a/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.js b/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.js index 751f2de1b490..d731ff930d93 100644 --- a/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.js +++ b/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.js @@ -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, + flex: 1, + }, diamondIcon: { - width: 50, - height: 50, + width: 70, + height: 70, }, coinIcon: { width: 12, @@ -29,7 +34,6 @@ type Props = {| children: React.Node, subscriptionDialogOpeningReason: SubscriptionDialogDisplayReason, label?: React.Node, - makeButtonRaised?: boolean, hideButton?: boolean, payWithCreditsOptions?: {| label: React.Node, @@ -41,65 +45,54 @@ const GetSubscriptionCard = ({ children, subscriptionDialogOpeningReason, label, - makeButtonRaised, hideButton, payWithCreditsOptions, }: Props) => { const { openSubscriptionDialog } = React.useContext( SubscriptionSuggestionContext ); - + const { isMobile } = useResponsiveWindowSize(); return ( - ( - diamond - )} - > - - - - {children} +
+ + + diamond + + + + {children} + + {payWithCreditsOptions && ( + } + label={payWithCreditsOptions.label} + primary + onClick={payWithCreditsOptions.onPayWithCredits} + /> + )} + {!hideButton && ( + Upgrade} + primary + onClick={() => { + openSubscriptionDialog({ + analyticsMetadata: { + reason: subscriptionDialogOpeningReason, + }, + }); + }} + icon={} + /> + )} + - {payWithCreditsOptions && ( - } - label={payWithCreditsOptions.label} - primary - onClick={payWithCreditsOptions.onPayWithCredits} - /> - )} - {!hideButton && - (!makeButtonRaised ? ( - { - openSubscriptionDialog({ - analyticsMetadata: { - reason: subscriptionDialogOpeningReason, - }, - }); - }} - > - - {label || Upgrade} - - - ) : ( - Upgrade} - primary - onClick={() => { - openSubscriptionDialog({ - analyticsMetadata: { - reason: subscriptionDialogOpeningReason, - }, - }); - }} - /> - ))} - - - + + +
); }; diff --git a/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css b/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css new file mode 100644 index 000000000000..f44056949788 --- /dev/null +++ b/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css @@ -0,0 +1,23 @@ +.premiumContainer { + position: relative; + overflow: hidden; + padding: 2px; + border-radius: 10px; + display: flex; +} + +.premiumContainer::before { + content: ''; + display: block; + background: linear-gradient(90deg, var(--theme-premium-green) 0%, var(--theme-premium-orange) 100%); + width: 100%; + padding-bottom: 100%; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.contentContainer { + z-index: 2; /* Make it appear above the colored background */ +} \ No newline at end of file diff --git a/newIDE/app/src/Profile/Subscription/SubscriptionDialog.js b/newIDE/app/src/Profile/Subscription/SubscriptionDialog.js index 09c30982c25d..5e9543a79918 100644 --- a/newIDE/app/src/Profile/Subscription/SubscriptionDialog.js +++ b/newIDE/app/src/Profile/Subscription/SubscriptionDialog.js @@ -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( @@ -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' @@ -465,54 +471,51 @@ export default function SubscriptionDialog({ open={open} fixedContent={ <> - {hasValidSubscriptionPlan(authenticatedUser.subscription) && - userSubscriptionPlanWithPricingSystems && ( - - - Your plan: - - + + Your plan: + + + - - - {getPlanIcon({ - subscriptionPlan: userSubscriptionPlanWithPricingSystems, - logoSize: 20, - })} - - {selectMessageByLocale( - i18n, - userSubscriptionPlanWithPricingSystems.nameByLocale - )} - - - {!hasSubscriptionBeenManuallyAdded( - authenticatedUser.subscription - ) && - !isSubscriptionComingFromTeam( - authenticatedUser.subscription - ) && - !willCancelAtPeriodEnd && - userPricingSystemId !== 'REDEMPTION_CODE' && ( - Cancel subscription} - onClick={() => - buyUpdateOrCancelPlan(i18n, null) - } - /> + + {getPlanIcon({ + subscriptionPlan: userSubscriptionPlanWithPricingSystems, + logoSize: 20, + })} + + {selectMessageByLocale( + i18n, + userSubscriptionPlanWithPricingSystems.nameByLocale )} + - - - )} + {!hasSubscriptionBeenManuallyAdded( + authenticatedUser.subscription + ) && + !isSubscriptionComingFromTeam( + authenticatedUser.subscription + ) && + !willCancelAtPeriodEnd && + userPricingSystemId !== 'REDEMPTION_CODE' && ( + Cancel subscription} + onClick={() => buyUpdateOrCancelPlan(i18n, null)} + /> + )} + + + + )} Subscription plans diff --git a/newIDE/app/src/UI/CustomSvgIcons/CrownShining.js b/newIDE/app/src/UI/CustomSvgIcons/CrownShining.js new file mode 100644 index 000000000000..afa7d89249b1 --- /dev/null +++ b/newIDE/app/src/UI/CustomSvgIcons/CrownShining.js @@ -0,0 +1,52 @@ +import React from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; + +export default React.memo(props => ( + + + + + + + + + + + +)); diff --git a/newIDE/app/src/UI/RaisedButton.js b/newIDE/app/src/UI/RaisedButton.js index 76518612bc6b..edb377b49966 100644 --- a/newIDE/app/src/UI/RaisedButton.js +++ b/newIDE/app/src/UI/RaisedButton.js @@ -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, @@ -69,6 +69,7 @@ const RaisedButton = React.forwardRef( className={classNames({ [classes.buttonSuccess]: color === 'success', [classes.buttonDanger]: color === 'danger', + [classes.buttonPremium]: color === 'premium', })} style={ style || !label diff --git a/newIDE/app/src/UI/RaisedButton.module.css b/newIDE/app/src/UI/RaisedButton.module.css index 6136f7cb0438..88e50000a8f1 100644 --- a/newIDE/app/src/UI/RaisedButton.module.css +++ b/newIDE/app/src/UI/RaisedButton.module.css @@ -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-green) 0%, var(--theme-premium-orange) 100%); + color: var(--theme-premium-text-contrast-color); +} + +button.buttonPremium:hover { + background: linear-gradient(90deg, var(--theme-premium-orange) 0%, var(--theme-premium-green) 100%); } \ No newline at end of file diff --git a/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json b/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json index 2d004fe9d55b..21fcd831b8b9 100644 --- a/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json +++ b/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json @@ -75,6 +75,18 @@ "comment": "Palette/Grey/100" } }, + "premium": { + "green": { + "value": "#3BF7F4" + }, + "orange": { + "value": "#FFBC57" + }, + "text-contrast-color": { + "value": "#1D1D26", + "comment": "Palette/Grey/100" + } + }, "hover": { "background-color": { "value": "rgba(255, 255, 255, 0.08)" diff --git a/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json b/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json index 186c73e2a331..f4532fac910a 100644 --- a/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json +++ b/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json @@ -108,6 +108,18 @@ "comment": "Palette/Grey/100" } }, + "premium": { + "green": { + "value": "#3BF7F4" + }, + "orange": { + "value": "#FFBC57" + }, + "text-contrast-color": { + "value": "#1D1D26", + "comment": "Palette/Grey/100" + } + }, "hover": { "background-color": { "value": "rgba(255, 255, 255, 0.08)" diff --git a/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json b/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json index e79b68738eac..05173d1b5fc0 100644 --- a/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json +++ b/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json @@ -108,6 +108,18 @@ "comment": "Palette/Grey/100" } }, + "premium": { + "green": { + "value": "#09F0EC" + }, + "orange": { + "value": "#FFA929" + }, + "text-contrast-color": { + "value": "#1D1D26", + "comment": "Palette/Grey/100" + } + }, "hover": { "background-color": { "value": "rgba(0, 0, 0, 0.04)" diff --git a/newIDE/app/src/UI/Theme/NordTheme/theme.json b/newIDE/app/src/UI/Theme/NordTheme/theme.json index bebd0db72f03..4a3bb8b1a50d 100644 --- a/newIDE/app/src/UI/Theme/NordTheme/theme.json +++ b/newIDE/app/src/UI/Theme/NordTheme/theme.json @@ -73,6 +73,18 @@ "comment": "Palette/Grey/100" } }, + "premium": { + "green": { + "value": "#3BF7F4" + }, + "orange": { + "value": "#FFBC57" + }, + "text-contrast-color": { + "value": "#1D1D26", + "comment": "Palette/Grey/100" + } + }, "hover": { "background-color": { "value": "rgba(255, 255, 255, 0.08)" diff --git a/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json b/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json index e8ba50b15d4b..2a85b36f32c0 100644 --- a/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json +++ b/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json @@ -73,6 +73,18 @@ "comment": "Palette/Grey/100" } }, + "premium": { + "green": { + "value": "#3BF7F4" + }, + "orange": { + "value": "#FFBC57" + }, + "text-contrast-color": { + "value": "#1D1D26", + "comment": "Palette/Grey/100" + } + }, "hover": { "background-color": { "value": "rgba(255, 255, 255, 0.08)" diff --git a/newIDE/app/src/UI/Theme/RosePineTheme/theme.json b/newIDE/app/src/UI/Theme/RosePineTheme/theme.json index cfdc08d79b6e..a4e4d65724e3 100644 --- a/newIDE/app/src/UI/Theme/RosePineTheme/theme.json +++ b/newIDE/app/src/UI/Theme/RosePineTheme/theme.json @@ -37,6 +37,18 @@ "comment": "Palette/Grey/100" } }, + "premium": { + "green": { + "value": "#3BF7F4" + }, + "orange": { + "value": "#FFBC57" + }, + "text-contrast-color": { + "value": "#1D1D26", + "comment": "Palette/Grey/100" + } + }, "warning": { "dark": { "value": "#FFA929", diff --git a/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json b/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json index 002723792175..360702002924 100644 --- a/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json +++ b/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json @@ -73,6 +73,18 @@ "comment": "Palette/Grey/100" } }, + "premium": { + "green": { + "value": "#3BF7F4" + }, + "orange": { + "value": "#FFBC57" + }, + "text-contrast-color": { + "value": "#1D1D26", + "comment": "Palette/Grey/100" + } + }, "hover": { "background-color": { "value": "rgba(255, 255, 255, 0.08)" diff --git a/newIDE/app/src/UI/User/UserAvatar.js b/newIDE/app/src/UI/User/UserAvatar.js new file mode 100644 index 000000000000..ba2ab94acf2a --- /dev/null +++ b/newIDE/app/src/UI/User/UserAvatar.js @@ -0,0 +1,28 @@ +// @flow +import * as React from 'react'; +import { Avatar } from '@material-ui/core'; +import { getGravatarUrl } from '../GravatarUrl'; +import classes from './UserAvatar.module.css'; + +const styles = { + avatar: { + width: 20, + height: 20, + }, + premiumAvatar: { + width: 16, + height: 16, + }, +}; + +type Props = {| iconUrl: string, isPremium: boolean |}; + +export default function UserAvatar({ iconUrl, isPremium }: Props) { + return isPremium ? ( +
+ +
+ ) : ( + + ); +} diff --git a/newIDE/app/src/UI/User/UserAvatar.module.css b/newIDE/app/src/UI/User/UserAvatar.module.css new file mode 100644 index 000000000000..57407f3d3bcb --- /dev/null +++ b/newIDE/app/src/UI/User/UserAvatar.module.css @@ -0,0 +1,19 @@ +.premiumContainer { + position: relative; + overflow: hidden; + padding: 2px; + border-radius: 16px; + display: flex; +} + +.premiumContainer::before { + content: ''; + display: block; + background: linear-gradient(90deg, var(--theme-premium-green) 0%, var(--theme-premium-orange) 100%); + width: 100%; + padding-bottom: 100%; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} \ No newline at end of file diff --git a/newIDE/app/src/UI/User/UserChip.js b/newIDE/app/src/UI/User/UserChip.js index 8974e5abe982..28ee1c059550 100644 --- a/newIDE/app/src/UI/User/UserChip.js +++ b/newIDE/app/src/UI/User/UserChip.js @@ -1,7 +1,6 @@ // @flow import * as React from 'react'; import { Trans } from '@lingui/macro'; -import Avatar from '@material-ui/core/Avatar'; import { getGravatarUrl } from '../GravatarUrl'; import RaisedButton from '../RaisedButton'; import { shortenString } from '../../Utils/StringHelpers'; @@ -10,44 +9,87 @@ import { LineStackLayout } from '../Layout'; import AuthenticatedUserContext from '../../Profile/AuthenticatedUserContext'; import CircularProgress from '../CircularProgress'; import User from '../CustomSvgIcons/User'; +import { SubscriptionSuggestionContext } from '../../Profile/Subscription/SubscriptionSuggestionContext'; +import { hasValidSubscriptionPlan } from '../../Utils/GDevelopServices/Usage'; +import CrownShining from '../CustomSvgIcons/CrownShining'; +import UserAvatar from './UserAvatar'; +import { useResponsiveWindowSize } from '../Responsive/ResponsiveWindowMeasurer'; +import IconButton from '../IconButton'; const styles = { - avatar: { - width: 20, - height: 20, - }, buttonContainer: { flexShrink: 0 }, }; +const GetPremiumButton = () => { + const { openSubscriptionDialog } = React.useContext( + SubscriptionSuggestionContext + ); + return ( + } + onClick={() => { + openSubscriptionDialog({ + analyticsMetadata: { + reason: 'Account get premium', + }, + }); + }} + id="get-premium-button" + label={Get premium} + color="premium" + /> + ); +}; + type Props = {| onOpenProfile: () => void, |}; const UserChip = ({ onOpenProfile }: Props) => { const authenticatedUser = React.useContext(AuthenticatedUserContext); - const { profile, onOpenCreateAccountDialog, loginState } = authenticatedUser; + const { + profile, + onOpenCreateAccountDialog, + loginState, + subscription, + } = authenticatedUser; + + const isPremium = hasValidSubscriptionPlan(subscription); + const { isMobile } = useResponsiveWindowSize(); return !profile && loginState === 'loggingIn' ? ( ) : profile ? ( - + {!isMobile ? ( + + } /> - } - /> + ) : ( + + + + )} + {isPremium ? null : } + ) : (
- Create account + Account } onClick={onOpenCreateAccountDialog} diff --git a/newIDE/app/src/Utils/Analytics/EventSender.js b/newIDE/app/src/Utils/Analytics/EventSender.js index a443fc371ffe..0792c987f208 100644 --- a/newIDE/app/src/Utils/Analytics/EventSender.js +++ b/newIDE/app/src/Utils/Analytics/EventSender.js @@ -375,7 +375,8 @@ export type SubscriptionDialogDisplayReason = | 'Callout in Classroom tab' | 'Unlock build type' | 'Manage subscription as teacher' - | 'Unlock course chapter'; + | 'Unlock course chapter' + | 'Account get premium'; export const sendSubscriptionDialogShown = (metadata: {| reason: SubscriptionDialogDisplayReason, diff --git a/newIDE/app/src/stories/componentStories/Profile/Subscription/GetSubscriptionCard.stories.js b/newIDE/app/src/stories/componentStories/Profile/Subscription/GetSubscriptionCard.stories.js new file mode 100644 index 000000000000..293bacaafb34 --- /dev/null +++ b/newIDE/app/src/stories/componentStories/Profile/Subscription/GetSubscriptionCard.stories.js @@ -0,0 +1,84 @@ +// @flow +import * as React from 'react'; +import { action } from '@storybook/addon-actions'; + +import paperDecorator from '../../../PaperDecorator'; +import AuthenticatedUserContext from '../../../../Profile/AuthenticatedUserContext'; +import { fakeNotAuthenticatedUser } from '../../../../fixtures/GDevelopServicesTestData'; +import GetSubscriptionCard from '../../../../Profile/Subscription/GetSubscriptionCard'; +import { Column, Line } from '../../../../UI/Grid'; +import Text from '../../../../UI/Text'; + +export default { + title: 'Subscription/GetSubscriptionCard', + component: GetSubscriptionCard, + decorators: [paperDecorator], +}; + +export const Default = () => ( + + + + + + Upgrade your GDevelop subscription to unlock this packaging. + + + + + +); + +export const CustomLabel = () => ( + + + + + + Upgrade your GDevelop subscription to unlock this packaging. + + + + + +); + +export const ButtonHidden = () => ( + + + + + + Upgrade your GDevelop subscription to unlock this packaging. + + + + + +); + +export const PayWithCreditsOptions = () => ( + + + + + + Upgrade your GDevelop subscription to unlock this packaging. + + + + + +); diff --git a/newIDE/app/src/stories/componentStories/UserChip/UserChip.stories.js b/newIDE/app/src/stories/componentStories/UserChip/UserChip.stories.js index eaf0d2d830cc..63f5bab14251 100644 --- a/newIDE/app/src/stories/componentStories/UserChip/UserChip.stories.js +++ b/newIDE/app/src/stories/componentStories/UserChip/UserChip.stories.js @@ -8,10 +8,12 @@ import UserChipComponent from '../../../UI/User/UserChip'; import { fakeSilverAuthenticatedUser, fakeNotAuthenticatedUser, - fakeAuthenticatedUserWithBadges, fakeAuthenticatedUserLoggingIn, + defaultAuthenticatedUserWithNoSubscription, } from '../../../fixtures/GDevelopServicesTestData'; import AuthenticatedUserContext from '../../../Profile/AuthenticatedUserContext'; +import { ColumnStackLayout } from '../../../UI/Layout'; +import Text from '../../../UI/Text'; export default { title: 'User chips/UserChip', @@ -19,7 +21,7 @@ export default { decorators: [paperDecorator], }; -export const Anonymous = () => { +const LoggedOut = () => { return ( @@ -27,7 +29,7 @@ export const Anonymous = () => { ); }; -export const LoggingIn = () => { +const LoggingIn = () => { return ( @@ -35,18 +37,33 @@ export const LoggingIn = () => { ); }; -export const SignedIn = () => { +const SignedInNoSubscription = () => { return ( - + ); }; -export const SignedInWithNotifications = () => { +const SignedInWithSubscription = () => { return ( - + ); }; + +export const UserChips = () => ( + + Logged Out + + Logging In + + Signed in - No Subscription + + Signed in - With Subscription + + +); From 3311493247db547582add245c708397aadce2823 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Pasteau?= <4895034+ClementPasteau@users.noreply.github.com> Date: Thu, 19 Dec 2024 10:52:31 +0100 Subject: [PATCH 2/5] Update colors --- .../Subscription/GetSubscriptionCard.module.css | 2 +- newIDE/app/src/UI/RaisedButton.module.css | 4 ++-- newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json | 16 +++++++++++++--- .../app/src/UI/Theme/DefaultDarkTheme/theme.json | 16 +++++++++++++--- .../src/UI/Theme/DefaultLightTheme/theme.json | 16 +++++++++++++--- newIDE/app/src/UI/Theme/NordTheme/theme.json | 16 +++++++++++++--- newIDE/app/src/UI/Theme/OneDarkTheme/theme.json | 16 +++++++++++++--- newIDE/app/src/UI/Theme/RosePineTheme/theme.json | 16 +++++++++++++--- .../src/UI/Theme/SolarizedDarkTheme/theme.json | 16 +++++++++++++--- newIDE/app/src/UI/User/UserAvatar.module.css | 2 +- .../UserChip/UserChip.stories.js | 4 ++-- 11 files changed, 97 insertions(+), 27 deletions(-) diff --git a/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css b/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css index f44056949788..305dbded5bce 100644 --- a/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css +++ b/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css @@ -9,7 +9,7 @@ .premiumContainer::before { content: ''; display: block; - background: linear-gradient(90deg, var(--theme-premium-green) 0%, var(--theme-premium-orange) 100%); + background: linear-gradient(90deg, var(--theme-premium-teal) 0%, var(--theme-premium-orange) 100%); width: 100%; padding-bottom: 100%; position: absolute; diff --git a/newIDE/app/src/UI/RaisedButton.module.css b/newIDE/app/src/UI/RaisedButton.module.css index 88e50000a8f1..92d343370bff 100644 --- a/newIDE/app/src/UI/RaisedButton.module.css +++ b/newIDE/app/src/UI/RaisedButton.module.css @@ -19,10 +19,10 @@ button.buttonDanger:hover { } button.buttonPremium { - background: linear-gradient(90deg, var(--theme-premium-green) 0%, var(--theme-premium-orange) 100%); + 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-orange) 0%, var(--theme-premium-green) 100%); + background: linear-gradient(90deg, var(--theme-premium-teal-dark) 0%, var(--theme-premium-orange-dark) 100%); } \ No newline at end of file diff --git a/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json b/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json index 21fcd831b8b9..8d03868b9ef8 100644 --- a/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json +++ b/newIDE/app/src/UI/Theme/BlueDarkTheme/theme.json @@ -76,11 +76,21 @@ } }, "premium": { - "green": { - "value": "#3BF7F4" + "teal": { + "value": "#3BF7F4", + "comment": "Palette/Teal/40" + }, + "teal-dark": { + "value": "#09F0EC", + "comment": "Palette/Teal/50" }, "orange": { - "value": "#FFBC57" + "value": "#FFBC57", + "comment": "Palette/Yellow/40" + }, + "orange-dark": { + "value": "#FFA929", + "comment": "Palette/Yellow/50" }, "text-contrast-color": { "value": "#1D1D26", diff --git a/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json b/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json index f4532fac910a..832c00151cb4 100644 --- a/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json +++ b/newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json @@ -109,11 +109,21 @@ } }, "premium": { - "green": { - "value": "#3BF7F4" + "teal": { + "value": "#3BF7F4", + "comment": "Palette/Teal/40" + }, + "teal-dark": { + "value": "#09F0EC", + "comment": "Palette/Teal/50" }, "orange": { - "value": "#FFBC57" + "value": "#FFBC57", + "comment": "Palette/Yellow/40" + }, + "orange-dark": { + "value": "#FFA929", + "comment": "Palette/Yellow/50" }, "text-contrast-color": { "value": "#1D1D26", diff --git a/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json b/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json index 05173d1b5fc0..a2c0064cf50d 100644 --- a/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json +++ b/newIDE/app/src/UI/Theme/DefaultLightTheme/theme.json @@ -109,11 +109,21 @@ } }, "premium": { - "green": { - "value": "#09F0EC" + "teal": { + "value": "#3BF7F4", + "comment": "Palette/Teal/40" + }, + "teal-dark": { + "value": "#09F0EC", + "comment": "Palette/Teal/50" }, "orange": { - "value": "#FFA929" + "value": "#FFBC57", + "comment": "Palette/Yellow/40" + }, + "orange-dark": { + "value": "#FFA929", + "comment": "Palette/Yellow/50" }, "text-contrast-color": { "value": "#1D1D26", diff --git a/newIDE/app/src/UI/Theme/NordTheme/theme.json b/newIDE/app/src/UI/Theme/NordTheme/theme.json index 4a3bb8b1a50d..be6f37307693 100644 --- a/newIDE/app/src/UI/Theme/NordTheme/theme.json +++ b/newIDE/app/src/UI/Theme/NordTheme/theme.json @@ -74,11 +74,21 @@ } }, "premium": { - "green": { - "value": "#3BF7F4" + "teal": { + "value": "#3BF7F4", + "comment": "Palette/Teal/40" + }, + "teal-dark": { + "value": "#09F0EC", + "comment": "Palette/Teal/50" }, "orange": { - "value": "#FFBC57" + "value": "#FFBC57", + "comment": "Palette/Yellow/40" + }, + "orange-dark": { + "value": "#FFA929", + "comment": "Palette/Yellow/50" }, "text-contrast-color": { "value": "#1D1D26", diff --git a/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json b/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json index 2a85b36f32c0..7669723bbe5a 100644 --- a/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json +++ b/newIDE/app/src/UI/Theme/OneDarkTheme/theme.json @@ -74,11 +74,21 @@ } }, "premium": { - "green": { - "value": "#3BF7F4" + "teal": { + "value": "#3BF7F4", + "comment": "Palette/Teal/40" + }, + "teal-dark": { + "value": "#09F0EC", + "comment": "Palette/Teal/50" }, "orange": { - "value": "#FFBC57" + "value": "#FFBC57", + "comment": "Palette/Yellow/40" + }, + "orange-dark": { + "value": "#FFA929", + "comment": "Palette/Yellow/50" }, "text-contrast-color": { "value": "#1D1D26", diff --git a/newIDE/app/src/UI/Theme/RosePineTheme/theme.json b/newIDE/app/src/UI/Theme/RosePineTheme/theme.json index a4e4d65724e3..374a18703c17 100644 --- a/newIDE/app/src/UI/Theme/RosePineTheme/theme.json +++ b/newIDE/app/src/UI/Theme/RosePineTheme/theme.json @@ -38,11 +38,21 @@ } }, "premium": { - "green": { - "value": "#3BF7F4" + "teal": { + "value": "#3BF7F4", + "comment": "Palette/Teal/40" + }, + "teal-dark": { + "value": "#09F0EC", + "comment": "Palette/Teal/50" }, "orange": { - "value": "#FFBC57" + "value": "#FFBC57", + "comment": "Palette/Yellow/40" + }, + "orange-dark": { + "value": "#FFA929", + "comment": "Palette/Yellow/50" }, "text-contrast-color": { "value": "#1D1D26", diff --git a/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json b/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json index 360702002924..3aa73175f9e6 100644 --- a/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json +++ b/newIDE/app/src/UI/Theme/SolarizedDarkTheme/theme.json @@ -74,11 +74,21 @@ } }, "premium": { - "green": { - "value": "#3BF7F4" + "teal": { + "value": "#3BF7F4", + "comment": "Palette/Teal/40" + }, + "teal-dark": { + "value": "#09F0EC", + "comment": "Palette/Teal/50" }, "orange": { - "value": "#FFBC57" + "value": "#FFBC57", + "comment": "Palette/Yellow/40" + }, + "orange-dark": { + "value": "#FFA929", + "comment": "Palette/Yellow/50" }, "text-contrast-color": { "value": "#1D1D26", diff --git a/newIDE/app/src/UI/User/UserAvatar.module.css b/newIDE/app/src/UI/User/UserAvatar.module.css index 57407f3d3bcb..cf45c15488d4 100644 --- a/newIDE/app/src/UI/User/UserAvatar.module.css +++ b/newIDE/app/src/UI/User/UserAvatar.module.css @@ -9,7 +9,7 @@ .premiumContainer::before { content: ''; display: block; - background: linear-gradient(90deg, var(--theme-premium-green) 0%, var(--theme-premium-orange) 100%); + background: linear-gradient(90deg, var(--theme-premium-teal) 0%, var(--theme-premium-orange) 100%); width: 100%; padding-bottom: 100%; position: absolute; diff --git a/newIDE/app/src/stories/componentStories/UserChip/UserChip.stories.js b/newIDE/app/src/stories/componentStories/UserChip/UserChip.stories.js index 63f5bab14251..ec5b049bc4e3 100644 --- a/newIDE/app/src/stories/componentStories/UserChip/UserChip.stories.js +++ b/newIDE/app/src/stories/componentStories/UserChip/UserChip.stories.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { action } from '@storybook/addon-actions'; -import paperDecorator from '../../PaperDecorator'; +import { getPaperDecorator } from '../../PaperDecorator'; import UserChipComponent from '../../../UI/User/UserChip'; import { @@ -18,7 +18,7 @@ import Text from '../../../UI/Text'; export default { title: 'User chips/UserChip', component: UserChipComponent, - decorators: [paperDecorator], + decorators: [getPaperDecorator('medium')], }; const LoggedOut = () => { From 93c1a959d2846f45334828d593808f68db0dfc4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Pasteau?= <4895034+ClementPasteau@users.noreply.github.com> Date: Thu, 19 Dec 2024 11:01:03 +0100 Subject: [PATCH 3/5] Fix unused style --- newIDE/app/src/Profile/Subscription/GetSubscriptionCard.js | 2 +- .../src/Profile/Subscription/GetSubscriptionCard.module.css | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.js b/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.js index d731ff930d93..0175cfa2cd2b 100644 --- a/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.js +++ b/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.js @@ -15,7 +15,7 @@ import { useResponsiveWindowSize } from '../../UI/Responsive/ResponsiveWindowMea const styles = { paper: { - zIndex: 2, + zIndex: 2, // Make sure the paper is above the background for the border effect. flex: 1, }, diamondIcon: { diff --git a/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css b/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css index 305dbded5bce..295640c3cfbf 100644 --- a/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css +++ b/newIDE/app/src/Profile/Subscription/GetSubscriptionCard.module.css @@ -16,8 +16,4 @@ left: 50%; top: 50%; transform: translate(-50%, -50%); -} - -.contentContainer { - z-index: 2; /* Make it appear above the colored background */ } \ No newline at end of file From f3ff6e7322a464f11e92115fc6796cabac9aefc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Pasteau?= <4895034+ClementPasteau@users.noreply.github.com> Date: Thu, 19 Dec 2024 11:18:57 +0100 Subject: [PATCH 4/5] Go back to 2 buttons --- newIDE/app/src/UI/User/UserChip.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/newIDE/app/src/UI/User/UserChip.js b/newIDE/app/src/UI/User/UserChip.js index 28ee1c059550..3edf01bd1b30 100644 --- a/newIDE/app/src/UI/User/UserChip.js +++ b/newIDE/app/src/UI/User/UserChip.js @@ -8,13 +8,13 @@ import TextButton from '../TextButton'; import { LineStackLayout } from '../Layout'; import AuthenticatedUserContext from '../../Profile/AuthenticatedUserContext'; import CircularProgress from '../CircularProgress'; -import User from '../CustomSvgIcons/User'; import { SubscriptionSuggestionContext } from '../../Profile/Subscription/SubscriptionSuggestionContext'; import { hasValidSubscriptionPlan } from '../../Utils/GDevelopServices/Usage'; import CrownShining from '../CustomSvgIcons/CrownShining'; import UserAvatar from './UserAvatar'; import { useResponsiveWindowSize } from '../Responsive/ResponsiveWindowMeasurer'; import IconButton from '../IconButton'; +import FlatButton from '../FlatButton'; const styles = { buttonContainer: { flexShrink: 0 }, @@ -50,6 +50,7 @@ const UserChip = ({ onOpenProfile }: Props) => { const { profile, onOpenCreateAccountDialog, + onOpenLoginDialog, loginState, subscription, } = authenticatedUser; @@ -86,15 +87,23 @@ const UserChip = ({ onOpenProfile }: Props) => { ) : (
+ + Log in + + } + onClick={onOpenLoginDialog} + primary + /> - Account + Sign up } onClick={onOpenCreateAccountDialog} primary - icon={} />
From 06d1de2e6b15b43e0af80aa6c6f1569e5ae395a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Pasteau?= <4895034+ClementPasteau@users.noreply.github.com> Date: Thu, 19 Dec 2024 11:32:15 +0100 Subject: [PATCH 5/5] Typo icon --- newIDE/app/src/UI/CustomSvgIcons/CrownShining.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/newIDE/app/src/UI/CustomSvgIcons/CrownShining.js b/newIDE/app/src/UI/CustomSvgIcons/CrownShining.js index afa7d89249b1..69ca6c2ca717 100644 --- a/newIDE/app/src/UI/CustomSvgIcons/CrownShining.js +++ b/newIDE/app/src/UI/CustomSvgIcons/CrownShining.js @@ -43,8 +43,8 @@ export default React.memo(props => ( fill="currentColor" />