Files
analiticaNucleo/nuxt4-app/app/components/auth/UserAvatar.vue
josedario87 aa76fea286 Refactor: Adaptar todos los componentes al sistema de temas
- Reemplazar colores hardcoded del tema café con variables --brand-*
  - #c08040 → var(--brand-primary-strong)
  - #d99a56 → var(--brand-primary)
  - #f0c07c → var(--brand-accent)
  - #1c140c → var(--brand-surface)
  - #3a2a16 → var(--brand-border)
  - #1b1209, #14100b → var(--brand-bg)

- Reemplazar colores de tipos de café con variables --coffee-*
  - #a855f7 → var(--coffee-uva)
  - #f97316 → var(--coffee-oreado)
  - #06b6d4 → var(--coffee-mojado)
  - #22c55e → var(--coffee-verde)

- Reemplazar clases gray-scale de Tailwind con variables de tema
  - text-gray-400, text-gray-500 → text-[var(--brand-text-muted)]
  - bg-gray-700/30 → bg-[var(--brand-surface)]

- Todos los componentes ahora responden dinámicamente a cambios de tema

Archivos adaptados:
- Páginas: error, informe-ingresos, panorama, explorer, metabase-debug, profile, notifications, settings
- Componentes de ingresos: GraficaSerieIngresos, GraficaSerieInversion, GraficaDinamicaPagadoDeposito, GraficaAcumuladoresUva, TotalesIngresoCompra, TotalesMonetarios, TotalesVerde, SecosVendidos, TopClientes, VistaTablaIngresos, VistaTablaIngresosConClientes, FiltrosActivos
- Componentes de comparativa: CosechasHeatmap, CosechasPorTipo, CosechasEvolucion, CosechasTotales
- Componentes de UI: ClienteSelector, DateRangeSelector, MetadatosCard, MaintenanceMode
- Componentes de auth: UserAvatar, UserMetadata
- Componentes de clientes: ClienteCard, VistaTablaClientes
- Componentes de rechazos: RechazoCard, RechazosRechazoCard, RechazosSubproductos
- Componentes de metabase: MetabaseCardDisplay, MetabaseCardsTable
2025-10-30 17:54:42 -06:00

21 lines
588 B
Vue

<template>
<UCard v-if="user" class="w-full">
<div class="flex items-center gap-4">
<UAvatar
:src="user.avatar"
:alt="user.name || user.username"
size="xl"
/>
<div class="flex-1">
<h3 class="font-semibold text-lg">{{ user.name || user.username }}</h3>
<p class="text-sm text-[var(--brand-text-muted)]">{{ user.email }}</p>
<p class="text-xs text-[var(--brand-text-muted)] mt-1">ID: {{ user.uid }}</p>
</div>
</div>
</UCard>
</template>
<script setup lang="ts">
const { user } = useAuthentik()
</script>