styling

src/components/HelpModal.jsx

@@ -1,5 +1,5 @@
-import { h } from 'preact';
 import Modal from './Modal';
+import { Stack, VStack } from './Stack';
 import { Button } from './common';
 import { Trans } from '@lingui/macro';
 
@@ -7,15 +7,21 @@ export function HelpModal(props) {
 	return (
 		<Modal show={props.show} closeHandler={props.closeHandler}>
 			<h1>
-				<div class="web-maker-with-tag">Web Maker</div>
-				<small style="font-size:14px;">{props.version}</small>
+				<Stack gap={1} align="center">
+					<div class="web-maker-with-tag">Web Maker</div>
+					<span className="badge">{props.version}</span>
+				</Stack>
 			</h1>
 
 			<div>
 				<p>
 					<Trans>
 						Made with <span style="margin-right: 8px;">💖</span>&{' '}
-						<span style="margin-right: 8px;"> 🙌</span> by{' '}
+						<span style="margin-right: 0.2rem;position:relative;top:-3px;">
+							{' '}
+							🙌
+						</span>{' '}
+						by{' '}
 						<a
 							href="https://twitter.com/chinchang457"
 							target="_blank"
@@ -56,7 +62,7 @@ export function HelpModal(props) {
 						.
 					</Trans>
 				</p>
-				<p>
+				<p style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
 					<Button
 						onClick={props.onSupportBtnClick}
 						data-event-action="supportDeveloperHelpBtnClick"
@@ -190,29 +196,31 @@ export function HelpModal(props) {
 					</details>
 				</p>
 
-				<p>
+				<VStack gap={1} align="stretch" fullWidth={true}>
 					<h3>
 						<Trans>License</Trans>
 					</h3>
-					<Trans>
-						"Web Maker" is{' '}
-						<a
-							target="_blank"
-							rel="noopener noreferrer"
-							href="https://github.com/chinchang/web-maker"
-						>
-							open-source
-						</a>{' '}
-						under the{' '}
-						<a
-							href="https://opensource.org/licenses/MIT"
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							MIT License
-						</a>
-					</Trans>
-				</p>
+					<p>
+						<Trans>
+							"Web Maker" is{' '}
+							<a
+								target="_blank"
+								rel="noopener noreferrer"
+								href="https://github.com/chinchang/web-maker"
+							>
+								open-source
+							</a>{' '}
+							under the{' '}
+							<a
+								href="https://opensource.org/licenses/MIT"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								MIT License
+							</a>
+						</Trans>
+					</p>
+				</VStack>
 			</div>
 		</Modal>
 	);

src/components/Profile.jsx

@@ -68,7 +68,7 @@ export function Profile({ user, logoutBtnHandler }) {
 		}
 	}, [user]);
 	return (
-		<VStack gap={2}>
+		<VStack gap={4}>
 			<Header user={user} logoutBtnHandler={logoutBtnHandler} />
 			{window.user?.isPro && (
 				<Panel>

src/style.css

@@ -2251,9 +2251,9 @@ while the theme CSS file is loading */
 	text-transform: uppercase;
 	display: inline-block;
 	padding: 0.1rem 0.3rem;
-	background: crimson;
+	background: rgb(255 255 255 / 40%);
 	border-radius: 1rem;
-	font-size: 0.75em;
+	font-size: 0.75rem;
 	color: #222;
 	font-weight: 800;
 	line-height: 1;