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
-				class="btn lemonsqueezy-button"
-				href={`https://web-maker.lemonsqueezy.com/checkout/buy/1601bc00-9623-435b-b1de-2a70a2445c13?embed=1&checkout[custom][userId]=${user.uid}`}
-			>
-				Go <ProBadge />
-			</A>
+			<Stack gap={2} align="stretch">
+				<Card
+					price="Free"
+					name="Starter"
+					features={[
+						'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>