Refactor: simplificar indicadores de cambios pendientes
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 46s

Cambios realizados:
- Alerta más compacta con variant 'soft' en lugar de 'solid'
- Eliminado botón 'Actualizar ahora' redundante de la alerta
- Eliminado emoji de advertencia del botón 'Actualizar'
- Simplificado borde del card (solo borde amarillo sutil)
- Eliminadas sombras y rings del card
- Eliminada animación pulse del botón
- Mantenido punto amarillo pulsante en la alerta

El indicador ahora es más discreto pero sigue siendo evidente.
This commit is contained in:
2025-10-29 17:18:47 -06:00
parent a4e4fd6a64
commit db1a12d100

View File

@@ -103,7 +103,7 @@
:class="[
'brand-card border transition-all duration-300',
hasPendingChanges
? 'border-yellow-500 shadow-lg shadow-yellow-500/50 ring-2 ring-yellow-400/50'
? 'border-yellow-500/60'
: 'border-transparent'
]"
>
@@ -125,32 +125,15 @@
<UAlert
v-if="hasPendingChanges"
color="warning"
variant="solid"
icon="i-lucide-alert-circle"
class="animate-pulse"
variant="soft"
class="py-2"
>
<template #title>
<div class="flex items-center gap-2">
<span class="font-bold">¡Cambios pendientes!</span>
<span class="inline-flex h-2 w-2 rounded-full bg-yellow-400 animate-ping"></span>
</div>
</template>
<template #description>
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<span>Los filtros han cambiado pero no se han aplicado a los datos mostrados. Haz clic en "Actualizar" para aplicar los cambios.</span>
<UButton
:loading="loading"
:disabled="loading"
color="yellow"
variant="solid"
size="xs"
@click="loadData"
>
<template #leading>
<UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
</template>
Actualizar ahora
</UButton>
<div class="flex items-center justify-between gap-3 text-sm">
<div class="flex items-center gap-2">
<span class="inline-flex h-2 w-2 rounded-full bg-yellow-500 animate-pulse"></span>
<span class="font-medium">Cambios pendientes - Haz clic en "Actualizar" para aplicar</span>
</div>
</div>
</template>
</UAlert>
@@ -186,7 +169,7 @@
:disabled="loading"
:ui="{
base: hasPendingChanges
? 'bg-yellow-500 text-black border border-yellow-600 hover:bg-yellow-400 hover:border-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed animate-pulse'
? 'bg-yellow-500 text-black border border-yellow-600 hover:bg-yellow-400 hover:border-yellow-500 disabled:opacity-50 disabled:cursor-not-allowed'
: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed'
}"
size="sm"
@@ -195,7 +178,7 @@
<template #leading>
<UIcon name="i-lucide-refresh-cw" :class="{ 'animate-spin': loading }" />
</template>
{{ hasPendingChanges ? 'Actualizar ⚠️' : 'Actualizar' }}
Actualizar
</UButton>
</div>
</template>