Update MockPayPalButton and Sheet Components for Improved UI and Functionality

- Increased the simulated PayPal redirect duration from 1 second to 3 seconds for a more realistic user experience.
- Refactored button structure in MockPayPalButton.vue for cleaner code and improved readability.
- Updated z-index values in SheetContent.vue and sheet/index.ts to ensure proper layering of UI elements, enhancing visibility and interaction.
This commit is contained in:
Bastian Masanek
2025-11-05 03:53:15 +01:00
parent 5899988d60
commit 58fd2fd64a
3 changed files with 12 additions and 28 deletions

View File

@@ -36,7 +36,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<template>
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
class="fixed inset-0 z-[100] bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
<DialogContent :class="cn(sheetVariants({ side }), props.class)" v-bind="{ ...forwarded, ...$attrs }">
<slot />

View File

@@ -11,7 +11,7 @@ export { default as SheetTitle } from "./SheetTitle.vue"
export { default as SheetTrigger } from "./SheetTrigger.vue"
export const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
"fixed z-[100] gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
{
variants: {
side: {