alexei.dolgolyov/tiny-forge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docker-watcher): phase 14 - frontend polish & modern UI

Browse Source 
Design system with CSS custom properties (light/dark themes).
38 Lucide SVG icon components. Dark mode with system preference.
EN/RU localization with i18n store. Skeleton loaders, empty states,
toggle switches, micro-interactions. Responsive sidebar with
mobile hamburger menu. All pages polished with consistent styling.
This commit is contained in:
Admin
2026-03-27 23:53:09 +03:00
parent d4659146fc
commit a3aa5912d9
74 changed files with 2954 additions and 1750 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/ConfirmDialog.svelte
+32 -8
View File
@@ -1,4 +1,9 @@
<!--
Confirm dialog with fade/scale-in animation.
-->
<script lang="ts">
import { IconAlert } from '$lib/components/icons';
interface Props {
open: boolean;
title: string;
@@ -21,32 +26,51 @@
const confirmClass = $derived(
confirmVariant === 'danger'
? 'bg-red-600 hover:bg-red-700 focus-visible:outline-red-600'
: 'bg-indigo-600 hover:bg-indigo-700 focus-visible:outline-indigo-600'
? 'bg-[var(--color-danger)] hover:bg-[var(--color-danger-dark)] focus-visible:outline-[var(--color-danger)]'
: 'bg-[var(--color-brand-600)] hover:bg-[var(--color-brand-700)] focus-visible:outline-[var(--color-brand-600)]'
);
const iconBgClass = $derived(
confirmVariant === 'danger'
? 'bg-[var(--color-danger-light)]'
: 'bg-[var(--color-brand-50)]'
);
const iconColorClass = $derived(
confirmVariant === 'danger'
? 'text-[var(--color-danger)]'
: 'text-[var(--color-brand-600)]'
);
</script>
{#if open}
<!-- Backdrop -->
<div class="fixed inset-0 z-40 bg-black/30" role="presentation" onclick={oncancel}></div>
<div class="fixed inset-0 z-40 bg-[var(--surface-overlay)] animate-fade-in" role="presentation" onclick={oncancel}></div>
<!-- Dialog -->
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div class="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
<h3 class="text-lg font-semibold text-gray-900">{title}</h3>
<p class="mt-2 text-sm text-gray-600">{message}</p>
<div class="w-full max-w-md rounded-2xl bg-[var(--surface-card)] p-6 shadow-xl animate-scale-in">
<div class="flex items-start gap-4">
<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full {iconBgClass}">
<IconAlert size={20} class={iconColorClass} />
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-[var(--text-primary)]">{title}</h3>
<p class="mt-2 text-sm text-[var(--text-secondary)] leading-relaxed">{message}</p>
</div>
</div>
<div class="mt-6 flex justify-end gap-3">
<button
type="button"
class="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
class="rounded-lg px-4 py-2 text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] transition-colors active:animate-press"
onclick={oncancel}
>
Cancel
</button>
<button
type="button"
class="rounded-md px-3 py-2 text-sm font-medium text-white {confirmClass} focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
class="rounded-lg px-4 py-2 text-sm font-medium text-white {confirmClass} shadow-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 active:animate-press"
onclick={onconfirm}
>
{confirmLabel}