till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-18 18:21:22 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

💄 fix(onboarding): use correct elevation layer colors for modal

Browse source
This commit is contained in:
Till-JS 2026-02-16 10:48:01 +01:00
parent d7ce61565f
commit 7b2ae94474
2 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
View file

@ -54,10 +54,10 @@
</script>
<!-- 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="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
<!-- Modal Container - uses surface-elevated-2 for proper elevation hierarchy -->
<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"
class="bg-surface-elevated-2 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 border border-border"
>
<!-- Header with progress -->
<header class="border-b px-5 py-4 flex-shrink-0">

8
apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
View file

@ -18,9 +18,9 @@
- alles an einem Ort.
</p>
<!-- Feature highlights -->
<!-- Feature highlights - using surface-elevated-1 (one level below the modal) -->
<div class="space-y-2 text-left">
<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
<div
class="h-8 w-8 rounded-md bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0"
>
@ -44,7 +44,7 @@
</div>
</div>
<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
<div
class="h-8 w-8 rounded-md bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0"
>
@ -68,7 +68,7 @@
</div>
</div>
<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
<div
class="h-8 w-8 rounded-md bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0"
>