style quota modal

src/lib/components/label-pro.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		size?: "xs" | "sm" | "md";
+	}
+
+	let { class: classNames = "", size = "md" }: Props = $props();
+
+	const sizeClasses: Record<string, string> = {
+		xs: "rounded-md px-1 py-0",
+		sm: "rounded-md px-1.5 py-0",
+		md: "rounded-lg px-2.5 py-0.5",
+	};
+</script>
+
+<span
+	class="inline-block -skew-x-12 border border-gray-200 bg-linear-to-br from-pink-300 via-emerald-200 to-yellow-200
+	text-sm font-bold text-black shadow-lg shadow-emerald-500/10 dark:border-gray-800
+	dark:from-pink-500 dark:via-emerald-500 dark:to-yellow-500 dark:text-black dark:shadow-emerald-500/20
+	{sizeClasses[size]} {classNames}"
+>
+	PRO
+</span>

src/lib/components/quota-modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	let open = $state(false);
+	let open = $state(true);
 
 	export function showQuotaModal() {
 		open = true;
@@ -12,6 +12,7 @@
 	import IconCheck from "~icons/carbon/checkmark";
 	import IconExternal from "~icons/carbon/arrow-up-right";
 	import { fade, scale } from "svelte/transition";
+	import LabelPro from "./label-pro.svelte";
 	let dialog: HTMLDialogElement | undefined = $state();
 
 	$effect(() => {
@@ -21,158 +22,79 @@
 			setTimeout(() => dialog?.close(), 250);
 		}
 	});
-</script>
 
-{#snippet pro()}
-	<span
-		class="inline-block -skew-x-12 rounded-md border border-gray-200 bg-linear-to-br from-pink-300 via-green-200 to-yellow-200 px-1.5 py-0 text-sm font-bold text-black shadow-lg shadow-green-500/10 dark:border-gray-800 dark:from-pink-500 dark:via-green-500 dark:to-yellow-500 dark:text-black dark:shadow-green-500/20"
-	>
-		PRO
-	</span>
-{/snippet}
+	const actions: string[] = [
+		"Exchange a million words with leading models",
+		"Use the fastest inference providers",
+		"Compare 80+ conversational models",
+		"Process hundreds of images",
+	];
+</script>
 
 <dialog class="backdrop:bg-transparent" bind:this={dialog} onclose={() => (open = false)}>
 	{#if open}
+		<!-- Backdrop -->
 		<div
 			class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm"
 			transition:fade={{ duration: 150 }}
 		>
+			<!-- Content -->
 			<div
-				class="relative w-3xl rounded-lg bg-white shadow-sm dark:bg-gray-900"
+				class="relative w-lg rounded-xl bg-white shadow-sm dark:bg-gray-900"
 				use:clickOutside={() => (open = false)}
 				transition:scale={{ start: 0.975, duration: 250 }}
 			>
-				<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
-					<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">
-						<img
-							alt="Hugging Face's logo"
-							class="w-7"
-							src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
-						/> Increase your usage limits
-					</h3>
-					<button
-						type="button"
-						class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-						onclick={() => (open = false)}
-					>
-						<div class="text-xl">
-							<IconCross />
-						</div>
-						<span class="sr-only">Close modal</span>
-					</button>
-				</div>
+				<h2 class="mt-8 text-center text-2xl font-semibold text-balance text-white sm:text-3xl">
+					Upgrade Your AI Experience with a <LabelPro
+						class="mx-0.5 -translate-y-px align-middle leading-6 max-sm:py-0! sm:text-xl"
+					/> Account
+				</h2>
+				<button
+					type="button"
+					class="absolute top-3 right-3 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+					onclick={() => (open = false)}
+					aria-label="Close modal"
+				>
+					<div class="text-xl">
+						<IconCross />
+					</div>
+				</button>
+
 				<!-- Modal body -->
-				<div class="flex flex-col gap-2 p-4 text-white md:p-5">
-					<p>
-						It seems you have reached your usage limits. If you want to continue using the playground, please consider
-						creating a {@render pro()} account!
+				<div class="p-4 text-white md:p-5">
+					<p class="rounded-xl border border-amber-900 bg-amber-800/25 p-4 font-medium text-amber-200">
+						You have reached your usage limits. To continue using the playground, please consider creating a PRO
+						account!
 					</p>
-					<p>You'll also gain access to:</p>
-					<div
-						class="grid grid-cols-1 flex-col gap-2 text-base text-gray-500 md:col-span-3 md:grid-cols-2 md:flex-row dark:text-gray-400"
-					>
-						<ul class="grid gap-1">
-							<li class="flex items-start">
-								<IconCheck class="text-md shrink-0 pt-2" />
-								<p>
-									<a
-										href="/spaces/enzostvs/zero-gpu-spaces"
-										class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
-										target="_blank">ZeroGPU</a
-									>: Get 5x usage quota and highest GPU queue priority
-								</p>
-							</li>
-							<li class="flex items-start">
-								<IconCheck class="text-md shrink-0 pt-2" />
-								<p>
-									<a
-										href="/docs/hub/spaces-zerogpu"
-										class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
-										target="_blank">Spaces Hosting</a
-									>: Create ZeroGPU Spaces with A100 hardware
-								</p>
-							</li>
-							<li class="flex items-start">
-								<IconCheck class="text-md shrink-0 pt-2" />
-								<p>
-									<a
-										href="/docs/hub/spaces-dev-mode"
-										class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
-										target="_blank">Spaces Dev Mode</a
-									>: Fast iterations via SSH/VS Code for Spaces
-								</p>
-							</li>
-
-							<li class="flex items-start">
-								<IconCheck class="text-md shrink-0 pt-2" />
-								<p>
-									<a
-										href="https://huggingface.co/blog/inference-providers"
-										class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
-										target="_blank">Inference Providers</a
-									>: Get $2 included credits across all Inference Providers
-								</p>
-							</li>
-						</ul>
-						<ul class="grid gap-1">
-							<li class="flex items-start">
-								<IconCheck class="text-md shrink-0 pt-2" />
-								<p>
-									<a
-										href="/docs/hub/datasets-viewer"
-										class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
-										target="_blank">Dataset Viewer</a
-									>: Activate it on private datasets
-								</p>
-							</li>
-							<li class="flex items-start">
-								<IconCheck class="text-md shrink-0 pt-2" />
-								<p>
-									<a
-										href="/blog"
-										class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
-										target="_blank">Blog Articles</a
-									>: Publish articles to the Hugging Face blog
-								</p>
-							</li>
-							<li class="flex items-start">
-								<IconCheck class="text-md shrink-0 pt-2" />
-								<p>
-									<a
-										href="/posts"
-										class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
-										target="_blank">Social Posts</a
-									>: Share short updates with the community
-								</p>
-							</li>
-
-							<li class="flex items-start">
-								<IconCheck class="text-md shrink-0 pt-2" />
-								<p>
-									<span class="font-semibold text-gray-700 dark:text-gray-200">Features Preview</span>: Get early access
-									to upcoming features
-								</p>
-							</li>
-							<li class="flex items-start">
-								<IconCheck class="text-md shrink-0 pt-2" />
-								<p>
-									{@render pro()}<span class="ml-1.5 font-semibold text-gray-700 dark:text-gray-200">Badge</span>: Show
-									your support on your profile
-								</p>
+					<p class="mt-4 text-gray-400">
+						By subscribing to PRO, you get <span class="text-white">$2 worth of Inference credits every month.</span> Meaning
+						you could:
+					</p>
+					<ul class="mt-4 flex flex-col gap-2">
+						{#each actions as action}
+							<li class="flex items-center justify-start gap-2.5">
+								<div
+									class="flex size-5 items-center justify-center rounded-full border border-green-500/15 bg-green-500/10 dark:bg-green-500/20"
+								>
+									<IconCheck class="text-xs text-green-600 dark:text-green-300" />
+								</div>
+								{action}
 							</li>
-						</ul>
-					</div>
+						{/each}
+					</ul>
 				</div>
 
 				<!-- Modal footer -->
-				<div class="flex rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800">
+				<div class="flex rounded-b p-4 !pb-8 md:p-5 dark:border-gray-800">
 					<a
-						class="ml-auto flex items-center gap-1.5 rounded-lg bg-black px-4 py-2.5 pl-3 text-sm font-medium text-white hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
 						href="https://huggingface.co/settings/billing/subscription#subscribe"
-						target="_blank"
+						class="mx-auto mt-1 flex w-fit items-center justify-between gap-6 rounded-full bg-black py-2.5 pr-4 pl-5 text-white hover:bg-gray-900 dark:bg-white/85 dark:text-black dark:hover:bg-white"
 					>
+						<p>
+							Subscribe to PRO
+							<span class="text-gray-400 dark:text-gray-500">($9/month)</span>
+						</p>
 						<IconExternal />
-						Get Pro ($9/month)
 					</a>
 				</div>
 			</div>