From 95d498694a5f2d7c3da6ba7554493138931a8873 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Sat, 18 Oct 2025 02:18:56 -0600 Subject: [PATCH] =?UTF-8?q?Fix:=20Mejorar=20UX=20de=20botones=20y=20toasts?= =?UTF-8?q?=20del=20sistema=20de=20cataci=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Quitar efecto scale on hover/active de todos los botones cata-button - Quitar efecto hover:scale del avatar en UserInfo - Rediseñar toasts con estilo outline/terminal 100% acoplado al sistema - Toasts usan variables CSS del sistema (--cata-bg, --cata-fg, --cata-primary) - Texto con fuente mono y text-shadow en modo oscuro - Efectos glow sutiles en modo oscuro según tipo de notificación - Bordes outline coherentes con diseño del sistema de catación --- nuxt4/app.config.ts | 86 +++++++++++++++++++------- nuxt4/app/assets/css/main.css | 4 -- nuxt4/app/components/cata/UserInfo.vue | 2 +- 3 files changed, 66 insertions(+), 26 deletions(-) diff --git a/nuxt4/app.config.ts b/nuxt4/app.config.ts index 593d55f..39ae990 100644 --- a/nuxt4/app.config.ts +++ b/nuxt4/app.config.ts @@ -162,44 +162,88 @@ export default defineAppConfig({ }, }, - // Notifications (Toast): Estilo outline con los colores de la app + // Notifications (Toast): Estilo outline/terminal del sistema de catación notification: { slots: { - root: 'bg-transparent border-2 border-primary/50 dark:border-primary backdrop-blur-sm', - wrapper: 'w-full', - title: 'text-foreground font-semibold dark:font-mono dark:text-shadow', - description: 'text-foreground/80 dark:font-mono dark:font-light', - icon: 'shrink-0', + root: [ + 'bg-[var(--cata-bg)] border border-[var(--cata-primary)]', + 'dark:bg-black/95 dark:border-[var(--cata-primary)]', + 'rounded-md p-4', + ], + wrapper: 'w-full flex gap-3', + title: [ + 'text-[var(--cata-fg)] font-semibold text-sm', + 'dark:font-mono dark:font-light', + 'dark:[text-shadow:0_0_2px_currentColor]', + ], + description: [ + 'text-[var(--cata-fg)] opacity-75 text-xs', + 'dark:font-mono dark:font-light', + 'dark:[text-shadow:0_0_1px_currentColor]', + ], + icon: [ + 'shrink-0 w-5 h-5', + 'text-[var(--cata-fg)]', + 'dark:[filter:drop-shadow(0_0_2px_currentColor)]', + ], avatar: 'shrink-0', - actions: 'flex gap-1.5 shrink-0', - close: 'shrink-0', - progress: 'absolute inset-x-0 bottom-0 h-1 z-10', + actions: 'flex gap-1.5 shrink-0 mt-2', + close: [ + 'shrink-0', + 'text-[var(--cata-fg)]', + 'hover:opacity-80', + ], + progress: 'absolute inset-x-0 bottom-0 h-0.5 bg-[var(--cata-primary)] opacity-50', }, variants: { color: { primary: { - root: 'dark:shadow-[0_0_12px_rgba(0,255,0,0.3)]', - progress: 'bg-primary', + root: [ + 'border-[var(--cata-primary)]/50', + 'dark:border-[var(--cata-primary)]', + 'dark:shadow-[0_0_12px_rgba(0,255,0,0.2)]', + ], + icon: 'text-[var(--cata-primary)]', }, success: { - root: 'border-green-500/50 dark:border-green-500 dark:shadow-[0_0_12px_rgba(0,255,0,0.3)]', - progress: 'bg-green-500', + root: [ + 'border-green-600/50 dark:border-green-500', + 'dark:shadow-[0_0_12px_rgba(0,255,0,0.25)]', + ], + icon: 'text-green-600 dark:text-green-500', + progress: 'bg-green-600 dark:bg-green-500', }, error: { - root: 'border-red-500/50 dark:border-red-500 dark:shadow-[0_0_12px_rgba(255,0,0,0.3)]', - progress: 'bg-red-500', + root: [ + 'border-red-600/50 dark:border-red-500', + 'dark:shadow-[0_0_12px_rgba(255,0,0,0.25)]', + ], + icon: 'text-red-600 dark:text-red-500', + progress: 'bg-red-600 dark:bg-red-500', }, warning: { - root: 'border-yellow-500/50 dark:border-yellow-500 dark:shadow-[0_0_12px_rgba(255,255,0,0.3)]', - progress: 'bg-yellow-500', + root: [ + 'border-yellow-600/50 dark:border-yellow-500', + 'dark:shadow-[0_0_12px_rgba(255,255,0,0.25)]', + ], + icon: 'text-yellow-600 dark:text-yellow-500', + progress: 'bg-yellow-600 dark:bg-yellow-500', }, info: { - root: 'border-blue-500/50 dark:border-blue-500 dark:shadow-[0_0_12px_rgba(0,150,255,0.3)]', - progress: 'bg-blue-500', + root: [ + 'border-blue-600/50 dark:border-blue-500', + 'dark:shadow-[0_0_12px_rgba(70,130,180,0.25)]', + ], + icon: 'text-blue-600 dark:text-blue-500', + progress: 'bg-blue-600 dark:bg-blue-500', }, neutral: { - root: 'dark:shadow-[0_0_12px_rgba(100,100,100,0.3)]', - progress: 'bg-gray-500', + root: [ + 'border-gray-500/50 dark:border-gray-500', + 'dark:shadow-[0_0_12px_rgba(128,128,128,0.2)]', + ], + icon: 'text-gray-600 dark:text-gray-400', + progress: 'bg-gray-600 dark:bg-gray-500', }, }, }, diff --git a/nuxt4/app/assets/css/main.css b/nuxt4/app/assets/css/main.css index 9c1ba6e..3c1e480 100644 --- a/nuxt4/app/assets/css/main.css +++ b/nuxt4/app/assets/css/main.css @@ -229,10 +229,6 @@ border-width: 2px; } -.cata-button:active { - transform: scale(0.98); -} - .dark .cata-button:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--cata-primary) 40%, transparent); } diff --git a/nuxt4/app/components/cata/UserInfo.vue b/nuxt4/app/components/cata/UserInfo.vue index fff0b88..9d6d296 100644 --- a/nuxt4/app/components/cata/UserInfo.vue +++ b/nuxt4/app/components/cata/UserInfo.vue @@ -4,7 +4,7 @@