ui changes and cs prices

src/routes/projects/language-learner/+page.svelte

@@ -3,6 +3,9 @@
 	import ArrowRight from 'lucide-svelte/icons/arrow-right';
 	import Flame from 'lucide-svelte/icons/flame';
 	import ProgressBar from '$lib/components/ProgressBar.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
 	import { COURSES } from '$lib/language-learner/courses';
 	import { progress } from '$lib/language-learner/progress.svelte';
 	import type { LangCode } from '$lib/language-learner/types';
@@ -51,37 +54,43 @@
 
 {#if progress.loaded}
 	<section class="mb-10 grid gap-3 sm:grid-cols-3" aria-label="Today">
-		<div class="ll-card">
-			<p class="text-sm ll-muted">streak</p>
-			<p class="flex items-center gap-2 text-3xl font-semibold">
-				<Flame
-					size={26}
-					aria-hidden="true"
-					class={progress.streak() ? 'text-[var(--ll-gold)]' : 'll-muted'}
+		<Card.Root
+			><Card.Content class="p-5">
+				<p class="text-sm ll-muted">streak</p>
+				<p class="flex items-center gap-2 text-3xl font-semibold">
+					<Flame
+						size={26}
+						aria-hidden="true"
+						class={progress.streak() ? 'text-[var(--ll-gold)]' : 'll-muted'}
+					/>
+					{progress.streak()}
+					{progress.streak() === 1 ? 'day' : 'days'}
+				</p>
+			</Card.Content></Card.Root
+		>
+		<Card.Root
+			><Card.Content class="p-5">
+				<p class="text-sm ll-muted">today</p>
+				<p class="mb-2 text-3xl font-semibold">
+					{progress.todayXp()}
+					<span class="text-base font-normal ll-muted">/ {progress.settings.goal} XP</span>
+				</p>
+				<ProgressBar
+					value={Math.min(progress.todayXp(), progress.settings.goal)}
+					max={progress.settings.goal}
+					label="Daily goal"
+					small
 				/>
-				{progress.streak()}
-				{progress.streak() === 1 ? 'day' : 'days'}
-			</p>
-		</div>
-		<div class="ll-card">
-			<p class="text-sm ll-muted">today</p>
-			<p class="mb-2 text-3xl font-semibold">
-				{progress.todayXp()}
-				<span class="text-base font-normal ll-muted">/ {progress.settings.goal} XP</span>
-			</p>
-			<ProgressBar
-				value={Math.min(progress.todayXp(), progress.settings.goal)}
-				max={progress.settings.goal}
-				label="Daily goal"
-				small
-			/>
-		</div>
-		<div class="ll-card">
-			<p class="text-sm ll-muted">total</p>
-			<p class="text-3xl font-semibold">
-				{Object.values(progress.data.langs).reduce((n, p) => n + (p?.xp ?? 0), 0)} XP
-			</p>
-		</div>
+			</Card.Content></Card.Root
+		>
+		<Card.Root
+			><Card.Content class="p-5">
+				<p class="text-sm ll-muted">total</p>
+				<p class="text-3xl font-semibold">
+					{Object.values(progress.data.langs).reduce((n, p) => n + (p?.xp ?? 0), 0)} XP
+				</p>
+			</Card.Content></Card.Root
+		>
 	</section>
 {/if}
 
@@ -93,7 +102,7 @@
 			class="ll-card flex flex-col gap-3"
 		>
 			<div class="flex items-center justify-between">
-				<span class="ll-badge">{c.code.toUpperCase()}</span>
+				<Badge variant="outline">{c.code.toUpperCase()}</Badge>
 				{#if progress.loaded && progress.streak(c.code)}
 					<span class="ll-pill"
 						><Flame size={14} aria-hidden="true" /> {progress.streak(c.code)}</span
@@ -195,14 +204,15 @@
 					<span>Daily goal</span>
 					<div class="flex gap-2">
 						{#each goals as goal (goal)}
-							<button
+							<Button
+								variant={progress.settings.goal === goal ? 'secondary' : 'outline'}
+								size="sm"
 								type="button"
-								class="ll-chip"
 								aria-pressed={progress.settings.goal === goal}
 								onclick={() => {
 									progress.settings.goal = goal;
 									progress.save();
-								}}>{goal} XP</button
+								}}>{goal} XP</Button
 							>
 						{/each}
 					</div>
@@ -212,13 +222,9 @@
 						Progress is saved in this browser. Export it to move it to another device.
 					</p>
 					<div class="flex flex-wrap gap-2">
-						<button type="button" class="ll-button ll-button-quiet" onclick={exportProgress}
-							>Export</button
-						>
-						<button
-							type="button"
-							class="ll-button ll-button-quiet"
-							onclick={() => fileInput?.click()}>Import</button
+						<Button type="button" variant="outline" onclick={exportProgress}>Export</Button>
+						<Button variant="outline" type="button" onclick={() => fileInput?.click()}
+							>Import</Button
 						>
 						<input
 							bind:this={fileInput}
@@ -229,10 +235,8 @@
 						/>
 						{#each COURSES as c (c.code)}
 							{#if progress.data.langs[c.code]}
-								<button
-									type="button"
-									class="ll-button ll-button-quiet"
-									onclick={() => reset(c.code, c.name)}>Reset {c.name}</button
+								<Button variant="outline" type="button" onclick={() => reset(c.code, c.name)}
+									>Reset {c.name}</Button
 								>
 							{/if}
 						{/each}