From 639a4c44c469aa0c71c99d163aa3c2eb9e712445 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 16 Oct 2025 21:58:02 -0600
Subject: [PATCH] =?UTF-8?q?Mejorar=20botones=20y=20badges=20con=20estilos?=
 =?UTF-8?q?=20s=C3=B3lidos=20y=20efectos=203D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar botones de quick-actions a variant solid con efectos 3D
- Agregar box-shadow multicapa con inset shadows a botones
- Implementar efectos hover y active en botones de sesión
- Cambiar badges de grupos a variant solid
- Agregar efectos 3D a badges con sombras y hover
- Mejorar color del email en modo oscuro (negro en lugar de gris)
- Aumentar peso de fuente del email en modo oscuro para mejor legibilidad
---
 nuxt4/app/components/UserHeader.vue           | 26 ++++++++++++++--
 nuxt4/app/components/auth/LogoutButton.vue    | 31 ++++++++++++++++++-
 nuxt4/app/components/auth/ProfileButton.vue   | 30 ++++++++++++++++++
 .../components/auth/SessionStatusButton.vue   | 31 ++++++++++++++++++-
 4 files changed, 113 insertions(+), 5 deletions(-)

diff --git a/nuxt4/app/components/UserHeader.vue b/nuxt4/app/components/UserHeader.vue
index d38f3db..27dc31e 100644
--- a/nuxt4/app/components/UserHeader.vue
+++ b/nuxt4/app/components/UserHeader.vue
@@ -23,7 +23,8 @@
             :key="group"
             size="sm"
             color="primary"
-            variant="soft"
+            variant="solid"
+            class="solid-badge"
           >
             {{ group }}
           </UBadge>
@@ -31,7 +32,8 @@
             v-if="user && user.groups.length > 3"
             size="sm"
             color="neutral"
-            variant="soft"
+            variant="solid"
+            class="solid-badge"
           >
             +{{ user.groups.length - 3 }}
           </UBadge>
@@ -267,7 +269,8 @@ const handleSubmit = async () => {
 }
 
 :global(.dark) .user-email {
-  color: var(--color-gray-400);
+  color: var(--color-gray-900);
+  font-weight: 600;
 }
 
 .user-badges {
@@ -276,6 +279,23 @@ const handleSubmit = async () => {
   gap: 0.5rem;
 }
 
+.solid-badge {
+  box-shadow:
+    0 2px 8px 0 rgba(0, 0, 0, 0.15),
+    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
+  font-weight: 600;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.solid-badge:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    0 4px 12px 0 rgba(0, 0, 0, 0.2),
+    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
+}
+
 .modal-content {
   padding: 1.5rem;
   max-width: 28rem;
diff --git a/nuxt4/app/components/auth/LogoutButton.vue b/nuxt4/app/components/auth/LogoutButton.vue
index 193012d..75ab745 100644
--- a/nuxt4/app/components/auth/LogoutButton.vue
+++ b/nuxt4/app/components/auth/LogoutButton.vue
@@ -2,7 +2,8 @@
   <UButton
     color="error"
     size="lg"
-    variant="soft"
+    variant="solid"
+    class="solid-button"
     @click="handleClick"
   >
     <template #leading>
@@ -19,3 +20,31 @@ const handleClick = () => {
   logout()
 }
 </script>
+
+<style scoped>
+.solid-button {
+  box-shadow:
+    0 4px 12px 0 rgba(239, 68, 68, 0.3),
+    0 2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.solid-button:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 6px 16px 0 rgba(239, 68, 68, 0.4),
+    0 4px 8px 0 rgba(0, 0, 0, 0.25),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.solid-button:active {
+  transform: translateY(0);
+  box-shadow:
+    0 2px 8px 0 rgba(239, 68, 68, 0.3),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2),
+    inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+}
+</style>
diff --git a/nuxt4/app/components/auth/ProfileButton.vue b/nuxt4/app/components/auth/ProfileButton.vue
index 11d81ff..263adb3 100644
--- a/nuxt4/app/components/auth/ProfileButton.vue
+++ b/nuxt4/app/components/auth/ProfileButton.vue
@@ -2,6 +2,8 @@
   <UButton
     color="primary"
     size="lg"
+    variant="solid"
+    class="solid-button"
     @click="handleClick"
   >
     <template #leading>
@@ -18,3 +20,31 @@ const handleClick = () => {
   goToProfile()
 }
 </script>
+
+<style scoped>
+.solid-button {
+  box-shadow:
+    0 4px 12px 0 rgba(0, 220, 130, 0.3),
+    0 2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.solid-button:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 6px 16px 0 rgba(0, 220, 130, 0.4),
+    0 4px 8px 0 rgba(0, 0, 0, 0.25),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.solid-button:active {
+  transform: translateY(0);
+  box-shadow:
+    0 2px 8px 0 rgba(0, 220, 130, 0.3),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2),
+    inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+}
+</style>
diff --git a/nuxt4/app/components/auth/SessionStatusButton.vue b/nuxt4/app/components/auth/SessionStatusButton.vue
index 68b6465..d23a22e 100644
--- a/nuxt4/app/components/auth/SessionStatusButton.vue
+++ b/nuxt4/app/components/auth/SessionStatusButton.vue
@@ -2,7 +2,8 @@
   <UButton
     color="info"
     size="lg"
-    variant="soft"
+    variant="solid"
+    class="solid-button"
     @click="handleClick"
   >
     <template #leading>
@@ -19,3 +20,31 @@ const handleClick = () => {
   checkSessionStatus()
 }
 </script>
+
+<style scoped>
+.solid-button {
+  box-shadow:
+    0 4px 12px 0 rgba(0, 149, 255, 0.3),
+    0 2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.solid-button:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 6px 16px 0 rgba(0, 149, 255, 0.4),
+    0 4px 8px 0 rgba(0, 0, 0, 0.25),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.solid-button:active {
+  transform: translateY(0);
+  box-shadow:
+    0 2px 8px 0 rgba(0, 149, 255, 0.3),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2),
+    inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+}
+</style>