refactor: migrate remaining dialogs to Vue Transition, remove old keyframes

Convert Settings, Invoices, IdlePrompt, AppTrackingPrompt, and
AppDiscard dialogs from animate-modal-enter CSS class to proper
<Transition name="modal"> wrappers for enter/leave animations.
Remove unused animate-modal-enter and animate-dropdown-enter keyframes.
This commit is contained in:
Your Name
2026-02-18 11:36:35 +02:00
parent 04d4220604
commit 32ee6284da
6 changed files with 150 additions and 35 deletions

View File

@@ -471,12 +471,13 @@
</div>
<!-- Clear Data Confirmation Dialog -->
<Transition name="modal">
<div
v-if="showClearDataDialog"
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
@click.self="showClearDataDialog = false"
>
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
<div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
<h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Clear All Data</h2>
<p class="text-[0.75rem] text-text-secondary mb-4">
Are you sure? This action cannot be undone.
@@ -500,6 +501,7 @@
</div>
</div>
</div>
</Transition>
</div>
</template>