From d7ce61565fe302dbfadee8c182ca4666a41ebedb Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Mon, 16 Feb 2026 10:41:44 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style(onboarding):=20convert=20f?=
 =?UTF-8?q?ullscreen=20to=20compact=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../onboarding/OnboardingWizard.svelte        | 86 ++++++++++---------
 .../onboarding/steps/WelcomeStep.svelte       | 54 ++++++------
 2 files changed, 72 insertions(+), 68 deletions(-)

diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
index b1b514855..4e6bf4b81 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
@@ -53,50 +53,54 @@
 	}
 </script>
 
-<div class="fixed inset-0 z-50 bg-background flex flex-col">
-	<!-- Header with progress -->
-	<header class="border-b px-6 py-4">
-		<div class="max-w-3xl mx-auto">
-			<div class="flex items-center justify-between mb-4">
+<!-- Backdrop -->
+<div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
+	<!-- Modal Container -->
+	<div
+		class="bg-background rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200"
+	>
+		<!-- Header with progress -->
+		<header class="border-b px-5 py-4 flex-shrink-0">
+			<div class="flex items-center justify-between mb-3">
 				<div class="flex items-center gap-3">
 					<div
-						class="h-10 w-10 rounded-xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center"
+						class="h-9 w-9 rounded-lg bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center"
 					>
-						<span class="text-xl">M</span>
+						<span class="text-lg font-semibold text-primary-foreground">M</span>
 					</div>
 					<div>
-						<h1 class="font-semibold text-lg">Willkommen bei ManaCore</h1>
-						<p class="text-sm text-muted-foreground">
+						<h1 class="font-semibold">Willkommen bei ManaCore</h1>
+						<p class="text-xs text-muted-foreground">
 							Schritt {currentStep + 1} von {STEPS.length}
 						</p>
 					</div>
 				</div>
 				<button
 					onclick={handleSkip}
-					class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+					class="text-xs text-muted-foreground hover:text-foreground transition-colors"
 				>
 					Überspringen
 				</button>
 			</div>
 
 			<!-- Progress bar -->
-			<div class="h-1.5 bg-muted rounded-full overflow-hidden">
+			<div class="h-1 bg-muted rounded-full overflow-hidden">
 				<div
 					class="h-full bg-primary transition-all duration-300 ease-out rounded-full"
 					style="width: {progress}%"
 				></div>
 			</div>
 
-			<!-- Step indicators -->
-			<div class="flex justify-between mt-3">
+			<!-- Step indicators (compact) -->
+			<div class="flex justify-between mt-2">
 				{#each STEPS as step, index}
 					<button
 						onclick={() => handleStepClick(index)}
 						disabled={index > currentStep}
-						class="flex flex-col items-center gap-1 group"
+						class="flex flex-col items-center gap-0.5 group"
 					>
 						<div
-							class="h-8 w-8 rounded-full flex items-center justify-center text-sm font-medium transition-all
+							class="h-6 w-6 rounded-full flex items-center justify-center text-xs font-medium transition-all
 								{index < currentStep
 								? 'bg-primary text-primary-foreground'
 								: index === currentStep
@@ -104,7 +108,7 @@
 									: 'bg-muted text-muted-foreground'}"
 						>
 							{#if index < currentStep}
-								<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+								<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 									<path
 										stroke-linecap="round"
 										stroke-linejoin="round"
@@ -117,7 +121,7 @@
 							{/if}
 						</div>
 						<span
-							class="text-xs {index === currentStep
+							class="text-[10px] {index === currentStep
 								? 'text-foreground font-medium'
 								: 'text-muted-foreground'} hidden sm:block"
 						>
@@ -126,12 +130,10 @@
 					</button>
 				{/each}
 			</div>
-		</div>
-	</header>
+		</header>
 
-	<!-- Step content -->
-	<main class="flex-1 overflow-y-auto">
-		<div class="max-w-3xl mx-auto px-6 py-8">
+		<!-- Step content -->
+		<main class="flex-1 overflow-y-auto px-5 py-4">
 			{#if currentStepData.id === 'welcome'}
 				<WelcomeStep />
 			{:else if currentStepData.id === 'profile'}
@@ -143,25 +145,25 @@
 			{:else if currentStepData.id === 'complete'}
 				<CompleteStep />
 			{/if}
-		</div>
-	</main>
+		</main>
 
-	<!-- Footer with navigation -->
-	<footer class="border-t px-6 py-4">
-		<div class="max-w-3xl mx-auto flex justify-between">
-			<button
-				onclick={handlePrev}
-				disabled={isFirstStep}
-				class="px-6 py-2.5 border rounded-lg hover:bg-muted transition-colors disabled:opacity-0 disabled:pointer-events-none"
-			>
-				Zurück
-			</button>
-			<button
-				onclick={handleNext}
-				class="px-6 py-2.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium"
-			>
-				{isLastStep ? "Los geht's!" : 'Weiter'}
-			</button>
-		</div>
-	</footer>
+		<!-- Footer with navigation -->
+		<footer class="border-t px-5 py-3 flex-shrink-0">
+			<div class="flex justify-between">
+				<button
+					onclick={handlePrev}
+					disabled={isFirstStep}
+					class="px-4 py-2 text-sm border rounded-lg hover:bg-muted transition-colors disabled:opacity-0 disabled:pointer-events-none"
+				>
+					Zurück
+				</button>
+				<button
+					onclick={handleNext}
+					class="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium"
+				>
+					{isLastStep ? "Los geht's!" : 'Weiter'}
+				</button>
+			</div>
+		</footer>
+	</div>
 </div>
diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
index 7e0743098..fd3f71120 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
@@ -2,30 +2,30 @@
 	// Welcome step - introduces ManaCore
 </script>
 
-<div class="text-center max-w-xl mx-auto">
+<div class="text-center">
 	<!-- Hero Icon -->
-	<div class="mb-8">
+	<div class="mb-4">
 		<div
-			class="inline-flex h-24 w-24 rounded-2xl bg-gradient-to-br from-primary via-primary/80 to-primary/60 items-center justify-center shadow-lg shadow-primary/25"
+			class="inline-flex h-16 w-16 rounded-xl bg-gradient-to-br from-primary via-primary/80 to-primary/60 items-center justify-center shadow-lg shadow-primary/25"
 		>
-			<span class="text-5xl text-primary-foreground font-bold">M</span>
+			<span class="text-3xl text-primary-foreground font-bold">M</span>
 		</div>
 	</div>
 
-	<h2 class="text-3xl font-bold mb-4">Willkommen bei ManaCore!</h2>
-	<p class="text-lg text-muted-foreground mb-8">
+	<h2 class="text-xl font-bold mb-2">Willkommen bei ManaCore!</h2>
+	<p class="text-sm text-muted-foreground mb-4">
 		Dein zentrales Dashboard für alle Mana-Apps. Verwalte deine Aufgaben, Termine, Kontakte und mehr
 		- alles an einem Ort.
 	</p>
 
 	<!-- Feature highlights -->
-	<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-left">
-		<div class="p-4 rounded-xl bg-card border">
+	<div class="space-y-2 text-left">
+		<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
 			<div
-				class="h-10 w-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-3"
+				class="h-8 w-8 rounded-md bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0"
 			>
 				<svg
-					class="h-5 w-5 text-blue-600 dark:text-blue-400"
+					class="h-4 w-4 text-blue-600 dark:text-blue-400"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
@@ -38,18 +38,18 @@
 					/>
 				</svg>
 			</div>
-			<h3 class="font-semibold mb-1">Alle Apps</h3>
-			<p class="text-sm text-muted-foreground">
-				Zugriff auf Todo, Kalender, Chat, Picture und mehr.
-			</p>
+			<div>
+				<h3 class="font-medium text-sm">Alle Apps</h3>
+				<p class="text-xs text-muted-foreground">Todo, Kalender, Chat, Picture und mehr.</p>
+			</div>
 		</div>
 
-		<div class="p-4 rounded-xl bg-card border">
+		<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
 			<div
-				class="h-10 w-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-3"
+				class="h-8 w-8 rounded-md bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0"
 			>
 				<svg
-					class="h-5 w-5 text-green-600 dark:text-green-400"
+					class="h-4 w-4 text-green-600 dark:text-green-400"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
@@ -62,16 +62,18 @@
 					/>
 				</svg>
 			</div>
-			<h3 class="font-semibold mb-1">Credits-System</h3>
-			<p class="text-sm text-muted-foreground">Ein Guthaben für alle AI-Features in allen Apps.</p>
+			<div>
+				<h3 class="font-medium text-sm">Credits-System</h3>
+				<p class="text-xs text-muted-foreground">Ein Guthaben für alle AI-Features.</p>
+			</div>
 		</div>
 
-		<div class="p-4 rounded-xl bg-card border">
+		<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
 			<div
-				class="h-10 w-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center mb-3"
+				class="h-8 w-8 rounded-md bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0"
 			>
 				<svg
-					class="h-5 w-5 text-purple-600 dark:text-purple-400"
+					class="h-4 w-4 text-purple-600 dark:text-purple-400"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
@@ -84,10 +86,10 @@
 					/>
 				</svg>
 			</div>
-			<h3 class="font-semibold mb-1">Personalisierung</h3>
-			<p class="text-sm text-muted-foreground">
-				Themes, Widgets und Einstellungen nach deinem Geschmack.
-			</p>
+			<div>
+				<h3 class="font-medium text-sm">Personalisierung</h3>
+				<p class="text-xs text-muted-foreground">Themes und Einstellungen nach deinem Geschmack.</p>
+			</div>
 		</div>
 	</div>
 </div>