SirBlob/TypstDrive
1
0
Fork 0
Code Actions Packages Activity

Rework UI to match typst-desktop's design system

Browse Source
This commit is contained in:
SirBlob
2026-07-20 23:59:12 -04:00
parent de2c2aaccc
commit 2110d408bd
48 changed files with 1319 additions and 1315 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+error.svelte
+14 -14
View File
@@ -4,29 +4,29 @@
</script>
<div class="min-h-[80vh] flex flex-col items-center justify-center p-4">
<div class="text-center max-w-md bg-white dark:bg-zinc-900 rounded-2xl shadow-xl border border-gray-200 dark:border-zinc-800 p-8">
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-red-100 dark:bg-red-500/10 mb-6">
<Icon icon="mdi:alert-circle-outline" class="h-10 w-10 text-red-600 dark:text-red-500" />
<div class="text-center max-w-md bg-[var(--color-surface)] rounded-2xl shadow-xl border border-[var(--color-line)] p-8">
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-[var(--color-danger)]/10 mb-6">
<Icon icon="mdi:alert-circle-outline" class="h-10 w-10 text-[var(--color-danger)]" />
</div>
<h1 class="text-6xl font-bold text-gray-900 dark:text-white mb-2 tracking-tight">
<h1 class="text-6xl font-bold text-[var(--color-ink)] mb-2 tracking-tight">
{$page.status}
</h1>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
<h2 class="text-xl font-semibold text-[var(--color-ink)] mb-4">
Something went wrong
</h2>
<p class="text-base text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
<p class="text-base text-[var(--color-ink-muted)] mb-8 leading-relaxed">
{$page.error?.message || 'We experienced an unexpected error processing your request.'}
</p>
<a
href="/"
class="inline-flex items-center justify-center gap-2 px-6 py-3 border border-transparent text-sm font-semibold rounded-xl shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 transition-colors w-full"
<a
href="/"
class="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm font-semibold rounded-xl shadow-sm text-white bg-[var(--color-accent)] hover:opacity-90 focus:outline-none transition w-full"
>
<Icon icon="mdi:home" class="text-lg" />
Return to Dashboard
</a>
</div>
</div>
</div>