pro modal

src/components/Icons.jsx

@@ -125,6 +125,9 @@ export function Icons() {
 				<symbol id="eye-striked" viewBox="0 0 24 24">
 					<path d="M11.83 9 15 12.16V12a3 3 0 0 0-3-3h-.17m-4.3.8 1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22 21 20.73 3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7Z" />
 				</symbol>
+				<symbol id="check-circle" viewBox="0 0 24 24">
+					<path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" />
+				</symbol>
 				<symbol id="loader-icon" viewBox="0 0 44 44">
 					{/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */}
 					<g fill="none" fillRule="evenodd" strokeWidth={10}>
@@ -179,7 +182,7 @@ export function Icons() {
 	);
 }
 
-export const Icon = ({ name, color, size, ...rest }) => {
+export const Icon = ({ name, color = 'currentColor', size, ...rest }) => {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

src/components/Pro.jsx

@@ -5,6 +5,8 @@ import Switch from './Switch';
 import { alertsService } from '../notifications';
 import { A, Button } from './common';
 import { useCheckout } from '../hooks/useCheckout';
+import { Text } from './Text';
+import { Icon } from './Icons';
 
 export function Pro({ user }) {
 	const hasCheckoutLoaded = useCheckout();
@@ -24,12 +26,71 @@ export function Pro({ user }) {
 	}, [hasCheckoutLoaded]);
 	return (
 		<VStack gap={4} align="stretch">
-			<A
+			<Stack gap={2} align="stretch">
-				class="btn lemonsqueezy-button"
+				<Card
-				href={`https://web-maker.lemonsqueezy.com/checkout/buy/1601bc00-9623-435b-b1de-2a70a2445c13?embed=1&checkout[custom][userId]=${user.uid}`}
+					price="Free"
-			>
+					name="Starter"
-				Go <ProBadge />
+					features={[
-			</A>
+						'Unlimited private creations',
+						'2 Public creations',
+						'1 Files mode creation'
+					]}
+				/>
+				<Card
+					bg="#674dad"
+					price="$6/mo"
+					name="Pro"
+					action={
+						<A
+							class="btn btn--primary lemonsqueezy-button d-f jc-c ai-c"
+							style="gap:0.2rem"
+							href={`https://web-maker.lemonsqueezy.com/checkout/buy/1601bc00-9623-435b-b1de-2a70a2445c13?embed=1&checkout[custom][userId]=${user.uid}`}
+						>
+							Go <ProBadge />
+						</A>
+					}
+					features={[
+						'Unlimited private creations',
+						'Unlimited public creations',
+						'Unlimited files mode creations',
+						'Asset hosting',
+						'Priority support',
+						'No Ads'
+					]}
+				/>
+			</Stack>
 		</VStack>
 	);
 }
+
+const Card = ({ bg, name, price, action, features }) => {
+	return (
+		<div class="plan-card" style={{ background: bg }}>
+			<VStack gap={2} align="stretch" justify="flex-start">
+				<VStack gap={0} align="stretch" justify="flex-start">
+					<Text transform="uppercase" weight="600">
+						{name}
+					</Text>
+					<Text size="5" weight="800" appearance="primary">
+						{' '}
+						{price}
+					</Text>
+				</VStack>
+				{action}
+				{!action && (
+					<a class="btn" aria-hidden="true" style="visibility:hidden">
+						s
+					</a>
+				)}
+				<VStack gap={1} align="flex-start">
+					{features.map(f => (
+						<HStack gap={1} align="center">
+							<Icon name="check-circle" size="1.4rem" />
+							{f}
+						</HStack>
+					))}
+				</VStack>
+			</VStack>
+		</div>
+	);
+};

src/components/Text.jsx

@@ -18,6 +18,17 @@ const appearanceStyles = {
 	}
 };
 
+const sizes = {
+	0: '0.875rem',
+	1: '1rem',
+	2: '1.125rem',
+	3: '1.25rem',
+	4: '1.5rem',
+	5: '2rem',
+	6: '2.5rem',
+	7: '3rem',
+	8: '4rem'
+};
 export const Text = forwardRef(
 	(
 		{
@@ -29,6 +40,7 @@ export const Text = forwardRef(
 			letterSpacing = 0,
 			lineHeight = 1.4,
 			align = 'left',
+			transform,
 			classes = '',
 			children
 		},
@@ -38,8 +50,8 @@ export const Text = forwardRef(
 
 		const styles = {
 			letterSpacing: letterSpacing,
-			fontSize: `var(--font-size-${size})`,
+			fontSize: sizes[size],
-
+			textTransform: transform,
 			fontWeight: weight,
 			textAlign: align,
 			lineHeight: lineHeight,

src/components/app.jsx

@@ -1827,6 +1827,7 @@ export default class App extends Component {
 					<Modal
 						show={this.state.isProModalOpen}
 						closeHandler={() => this.setState({ isProModalOpen: false })}
+						extraClasses="pro-modal"
 					>
 						<Pro user={this.state.user} />
 					</Modal>

src/style.css

@@ -10,11 +10,14 @@
 	--color-focus-outline: #d3a447;
 	--color-form-control-bg: #2c214b;
 
-	--color-heading: #efecf9;
+	--color-heading: #fff;
 	--color-text-light: #b0a5d6;
 	--color-text-lightest-final: #787090;
 	--clr-brand: purple;
 
+	--color-pro-1: #1fffb3;
+	--color-pro-2: #f2ff00;
+
 	--footer-height: 37px;
 	--console-height: 32px;
 
@@ -128,11 +131,13 @@ button {
 .ai-c {
 	align-items: center;
 }
-.flex-h-center {
+.flex-h-center,
+.jc-c {
 	justify-content: center;
 }
 
-.flex-h-end {
+.flex-h-end,
+.jc-fe {
 	justify-content: flex-end;
 }
 
@@ -395,7 +400,7 @@ a > svg {
 	font-size: inherit;
 	background: transparent;
 	border: 3px solid var(--color-button);
-	border-radius: 5px;
+	border-radius: 2rem;
 	padding: 9px 15px;
 	cursor: pointer;
 	letter-spacing: 0.2px;
@@ -803,6 +808,7 @@ body > #demo-frame {
 	margin-left: 10px;
 	padding: 3px 8px;
 	border: 1px solid rgba(0, 0, 0, 0.9);
+	border-radius: 5px;
 	background: linear-gradient(180deg, hsl(0, 0%, 25%) 0, hsl(0, 0%, 13%) 100%);
 	box-shadow: inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
 }
@@ -2175,7 +2181,7 @@ while the theme CSS file is loading */
 .pro-badge {
 	display: inline-block;
 	padding: 0.1rem 0.3rem;
-	background-color: #fff91f;
+	background: linear-gradient(45deg, var(--color-pro-1), var(--color-pro-2));
 	border-radius: 1rem;
 	font-size: 0.7em;
 	color: #222;
@@ -2191,6 +2197,14 @@ while the theme CSS file is loading */
 .templates-container .saved-item-tile {
 	margin: 0;
 }
+.pro-modal {
+	background: url('/assets/pro-panda-flying.png') no-repeat;
+	background-position: bottom right;
+}
+.plan-card {
+	border-radius: 0.4rem;
+	padding: 1rem;
+}
 @media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;