some pro improvements

src/components/MainHeader.jsx

@@ -2,6 +2,8 @@ import { h } from 'preact';
 import { Button } from './common';
 import { Trans, NumberFormat, t } from '@lingui/macro';
 import { I18n } from '@lingui/react';
+import { ProBadge } from './ProBadge';
+import { Stack } from './Stack';
 
 const DEFAULT_PROFILE_IMG =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E";
@@ -46,7 +48,9 @@ export function MainHeader(props) {
 							class="btn btn--dark hint--rounded hint--bottom-left"
 							aria-label={i18n._(t`Upload/Use assets`)}
 						>
-							<Trans>Assets</Trans>{' '}
+							<Stack gap={1}>
+								<Trans>Assets</Trans> <ProBadge />
+							</Stack>
 						</Button>
 
 						{!props.isFileMode && (

src/components/ProBadge.jsx

@@ -0,0 +1,3 @@
+export const ProBadge = () => {
+	return <div className="pro-badge">PRO</div>;
+};

src/components/Profile.jsx

@@ -1,4 +1,6 @@
 import { h } from 'preact';
+import { ProBadge } from './ProBadge';
+import { HStack, Stack, VStack } from './Stack';
 
 const DEFAULT_PROFILE_IMG =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E";
@@ -13,18 +15,29 @@ export function Profile({ user, logoutBtnHandler }) {
 				id="profileAvatarImg"
 				alt="Profile image"
 			/>
-			<h3 id="profileUserName" class="mb-2">
+
-				{user && user.displayName ? user.displayName : 'Anonymous Creator'}
+			<VStack gap={4}>
-			</h3>
+				<VStack gap={1}>
-			<p>
+					<h3 id="profileUserName">
-				<button
+						{user && user.displayName ? user.displayName : 'Anonymous Creator'}
-					class="btn"
+					</h3>
-					aria-label="Logout from your account"
+					{user.isPro && (
-					onClick={logoutBtnHandler}
+						<Stack justify="center">
-				>
+							<ProBadge />
-					Logout
+						</Stack>
-				</button>
+					)}
-			</p>
+				</VStack>
+
+				<HStack>
+					<button
+						class="btn btn--primary"
+						aria-label="Logout from your account"
+						onClick={logoutBtnHandler}
+					>
+						Logout
+					</button>
+				</HStack>
+			</VStack>
 		</div>
 	);
 }

src/components/Stack.jsx

@@ -1,9 +1,54 @@
 const gaps = [0, '0.5rem', '1rem', '1.5rem', '3rem', '5rem'];
 
-export const Stack = ({ gap = 0, children }) => {
+const Stack = function ({
+	classes = '',
+	gap = 0,
+	align = 'center',
+	justify = 'flex-start',
+	direction = 'horizontal',
+	fullWidth = false,
+	fullHeight = false,
+	wrap,
+	children
+}) {
 	return (
-		<div class="stack" style={{ gap: gaps[gap] }}>
+		<div
+			style={{
+				display: 'flex',
+				gap: gaps[gap] || gap,
+				alignItems: align,
+				justifyContent: justify,
+				flexDirection: direction === 'vertical' ? 'column' : 'row',
+				height: fullHeight ? '100%' : null,
+				width: fullWidth ? '100%' : null,
+				flexWrap: wrap ? 'wrap' : null
+			}}
+			class={`stack ${classes}`}
+		>
 			{children}
 		</div>
 	);
 };
+
+const VStack = props => {
+	return <Stack {...props} direction="vertical" />;
+};
+
+const HStack = props => {
+	return (
+		<Stack
+			classes={`hstack ${props.responsive ? 'hstack--responsive' : ''}`}
+			{...props}
+		/>
+	);
+};
+
+const Spacer = () => {
+	return (
+		<>
+			<div style={{ flexGrow: '1' }}></div>
+		</>
+	);
+};
+
+export { Stack, VStack, HStack, Spacer };

src/style.css

@@ -2112,11 +2112,22 @@ while the theme CSS file is loading */
 }
 .stack {
 	display: flex;
+	align-items: center;
 }
 .stack > * {
 	margin: 0;
 }
 
+.pro-badge {
+	padding: 0.1rem 0.3rem;
+	background-color: #fff91f;
+	border-radius: 1rem;
+	font-size: 0.8em;
+	color: #222;
+	box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
+	font-weight: 700;
+	line-height: 1;
+}
 @media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;