feat: redesign the UI with a brand theme and guided reward flow

package.json

@@ -19,6 +19,9 @@
 	},
 	"dependencies": {
 		"@ethersproject/sha2": "5.8.0",
+		"@fontsource-variable/inter": "^5.3.0",
+		"@fontsource-variable/jetbrains-mono": "^5.3.0",
+		"@lucide/svelte": "^1.51.0",
 		"@reown/appkit": "^1.8.24",
 		"@reown/appkit-adapter-ethers5": "^1.8.24",
 		"@sentry/sveltekit": "^11.4.0",

src/app.css

@@ -1,11 +1,69 @@
 @import 'tailwindcss';
 @import '@skeletonlabs/skeleton';
-@import '@skeletonlabs/skeleton/themes/legacy';
 @import '@skeletonlabs/skeleton-svelte';
+@import './theme.css';
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+@theme {
+	--font-mono: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
 html,
 body {
 	@apply h-full;
 }
+
+@layer base {
+	/* visible keyboard focus on every interactive element */
+	:where(
+		a,
+		button,
+		summary,
+		[role='button'],
+		[role='radio'],
+		input[type='checkbox']
+	):focus-visible {
+		outline: 2px solid var(--color-primary-500);
+		outline-offset: 2px;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	::before,
+	::after {
+		animation-duration: 0.01ms !important;
+		transition-duration: 0.01ms !important;
+	}
+}
+
+body {
+	/* soft brand glow behind the content */
+	background-image:
+		radial-gradient(
+			60rem 30rem at 90% -10%,
+			color-mix(in oklab, var(--color-primary-500) 12%, transparent),
+			transparent 70%
+		),
+		radial-gradient(
+			50rem 25rem at -10% 110%,
+			color-mix(in oklab, var(--color-secondary-500) 10%, transparent),
+			transparent 70%
+		);
+	background-attachment: fixed;
+
+	@variant dark {
+		background-image:
+			radial-gradient(
+				60rem 30rem at 90% -10%,
+				color-mix(in oklab, var(--color-primary-500) 22%, transparent),
+				transparent 70%
+			),
+			radial-gradient(
+				50rem 25rem at -10% 110%,
+				color-mix(in oklab, var(--color-secondary-500) 10%, transparent),
+				transparent 70%
+			);
+	}
+}

src/app.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en" class="dark" data-theme="commitkudos">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
@@ -8,8 +8,8 @@
 		<link rel="manifest" href="/site.webmanifest" />
 		<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
 		<meta name="msapplication-TileColor" content="#da532c" />
-		<meta name="theme-color" content="#ffffff" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="theme-color" content="#0a0f1a" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<script>
 			// apply the stored light/dark mode before first paint (see LightSwitch.svelte)
 			try {
@@ -21,7 +21,7 @@
 		</script>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="legacy">
+	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
 	</body>
 </html>

src/lib/badge.ts

@@ -0,0 +1,44 @@
+import type { Badge, BadgeStyle } from '#lib/types.ts';
+
+const baseURL = 'https://img.shields.io/badge';
+
+export const badgeStyles: { value: BadgeStyle; label: string }[] = [
+	{ value: 'flat', label: 'Flat' },
+	{ value: 'flat-square', label: 'Flat square' },
+	{ value: 'plastic', label: 'Plastic' },
+	{ value: 'for-the-badge', label: 'Big' },
+	{ value: 'social', label: 'Social' }
+];
+
+// shields.io static badge path segments use `-` as separator: escape `-` and `_` as `--` and `__`
+function escapeSegment(value: string) {
+	return encodeURIComponent(value.replaceAll('-', '--').replaceAll('_', '__'));
+}
+
+/** shields.io image URL of the badge, or undefined while the content or the color is missing */
+export function badgeImageURL(badge: Badge): string | undefined {
+	if (!badge.badgeContent || !badge.color) {
+		return undefined;
+	}
+	const u = new URL(
+		`${baseURL}/${escapeSegment(badge.badgeContent)}-${encodeURIComponent(badge.color)}`
+	);
+	Object.entries(badge).forEach(([key, value]) => {
+		if (key === 'badgeContent' || key === 'color') {
+			return;
+		}
+		if (value) {
+			u.searchParams.set(key, String(value));
+		}
+	});
+	return u.toString();
+}
+
+/** CommitKudos URL the badge links to, with the repository prefilled */
+export function badgeLink(repository: string, reward = 1): string {
+	const u = new URL('https://commitkudos.com');
+	u.searchParams.set('repository', repository);
+	u.searchParams.set('contributor', '5');
+	u.searchParams.set('reward', reward.toString());
+	return u.toString();
+}

src/lib/clipboard.ts

@@ -0,0 +1,10 @@
+import { toaster } from '#lib/toaster.ts';
+
+export async function copyToClipboard(text: string, title = 'Copied to clipboard') {
+	try {
+		await navigator.clipboard.writeText(text);
+		toaster.success({ title, duration: 1500 });
+	} catch {
+		toaster.error({ title: 'Could not access the clipboard' });
+	}
+}

src/lib/components/BadgeCode.svelte

@@ -1,39 +1,38 @@
 <script lang="ts">
+	import Copy from '@lucide/svelte/icons/copy';
 	import { Tabs } from '@skeletonlabs/skeleton-svelte';
 
-	import { toaster } from '#lib/toaster.ts';
+	import { copyToClipboard } from '#lib/clipboard.ts';
 
-	let { imageURL, link }: { imageURL?: string; link?: string } = $props();
+	let { imageURL, link }: { imageURL: string; link: string } = $props();
 
-	let tab = $state('html');
+	let tab = $state('markdown');
 
 	let snippets = $derived({
-		html: `<a href="${link}" target="_blank"><img src="${imageURL}" alt="CommitKudos badge" /></a>`,
-		markdown: `[![commitKudosBadge](${imageURL})](${link})`
+		markdown: `[![Give some kudos](${imageURL})](${link})`,
+		html: `<a href="${link}" target="_blank"><img src="${imageURL}" alt="Give some kudos" /></a>`
 	});
-
-	async function copy(code: string) {
-		await navigator.clipboard.writeText(code);
-		toaster.success({ title: 'Copied to clipboard', duration: 1500 });
-	}
 </script>
 
 <Tabs value={tab} onValueChange={(e) => (tab = e.value)}>
 	<Tabs.List>
-		<Tabs.Trigger value="html">HTML</Tabs.Trigger>
 		<Tabs.Trigger value="markdown">Markdown</Tabs.Trigger>
+		<Tabs.Trigger value="html">HTML</Tabs.Trigger>
 		<Tabs.Indicator />
 	</Tabs.List>
 	{#each Object.entries(snippets) as [name, code] (name)}
 		<Tabs.Content value={name}>
 			<div class="relative">
-				<pre class="pre pr-16 break-all whitespace-pre-wrap">{code}</pre>
+				<pre
+					class="pre pr-12 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap">{code}</pre>
 				<button
 					type="button"
-					class="absolute top-2 right-2 btn preset-tonal btn-sm"
-					onclick={() => copy(code)}
+					class="absolute top-2 right-2 btn-icon bg-white/10 text-white btn-icon-sm hover:bg-white/20"
+					title="Copy"
+					aria-label="Copy the {name} code"
+					onclick={() => copyToClipboard(code)}
 				>
-					Copy
+					<Copy class="size-4" aria-hidden="true" />
 				</button>
 			</div>
 		</Tabs.Content>