From 031552c836f060e8fcf47488688b970db859decc Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 22:10:52 -0300
Subject: [PATCH] feat: enhance sidebar and theme utilities for improved UI
 consistency

- Updated the Sidebar component styles to utilize theme-based classes for better visual consistency.
- Added new utility functions to retrieve and convert theme colors for use in components, enhancing theming capabilities.
- Improved layout logic to ensure the default theme is applied correctly based on user preferences and document readiness.
---
 apps/web/src/lib/components/Sidebar.svelte    |  9 +-
 apps/web/src/lib/utils/temas.ts               | 86 +++++++++++++++++++
 .../(dashboard)/ti/notificacoes/+page.svelte  |  5 +-
 apps/web/src/routes/+layout.svelte            | 27 ++++--
 4 files changed, 110 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index 0fc941d..22a158e 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -161,8 +161,7 @@
 	<div class="flex-none lg:hidden">
 		<label
 			for="my-drawer-3"
-			class="group relative flex h-14 w-14 cursor-pointer items-center justify-center overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
-			style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
+			class="group relative flex h-14 w-14 cursor-pointer items-center justify-center overflow-hidden rounded-2xl bg-primary shadow-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl"
 			aria-label="Abrir menu"
 		>
 			<!-- Efeito de brilho no hover -->
@@ -182,8 +181,7 @@
 		<!-- Logo MODERNO do Governo -->
 		<div class="avatar">
 			<div
-				class="group relative w-16 overflow-hidden rounded-2xl p-2 shadow-xl transition-all duration-300 hover:scale-105 lg:w-20"
-				style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid rgba(102, 126, 234, 0.1);"
+				class="group relative w-16 overflow-hidden rounded-2xl p-2 bg-base-100 border-2 border-primary/20 shadow-xl transition-all duration-300 hover:scale-105 lg:w-20"
 			>
 				<!-- Efeito de brilho no hover -->
 				<div
@@ -229,8 +227,7 @@
 				<button
 					type="button"
 					tabindex="0"
-					class="group relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
-					style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
+					class="group relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl bg-primary shadow-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl"
 					aria-label="Menu do usuário"
 				>
 					<!-- Efeito de brilho no hover -->
diff --git a/apps/web/src/lib/utils/temas.ts b/apps/web/src/lib/utils/temas.ts
index 4b7975e..9e9d43e 100644
--- a/apps/web/src/lib/utils/temas.ts
+++ b/apps/web/src/lib/utils/temas.ts
@@ -192,3 +192,89 @@ export function obterTemaPadrao(): Tema {
 	return temasDisponiveis[0]; // Purple
 }
 
+/**
+ * Obter cores CSS do tema atual para usar em gráficos e componentes
+ */
+export function obterCoresDoTema(): {
+	primary: string;
+	success: string;
+	error: string;
+	warning: string;
+	info: string;
+	baseContent: string;
+	base100: string;
+	base200: string;
+	base300: string;
+} {
+	if (typeof window === 'undefined' || typeof document === 'undefined') {
+		// Valores padrão para SSR
+		return {
+			primary: '#667eea',
+			success: '#10b981',
+			error: '#ef4444',
+			warning: '#f59e0b',
+			info: '#3b82f6',
+			baseContent: '#1f2937',
+			base100: '#ffffff',
+			base200: '#f3f4f6',
+			base300: '#e5e7eb'
+		};
+	}
+
+	const htmlElement = document.documentElement;
+	const getComputedStyle = (varName: string): string => {
+		return getComputedStyle(htmlElement).getPropertyValue(varName).trim() || '';
+	};
+
+	// Tentar obter variáveis CSS do DaisyUI
+	const primary = getComputedStyle('--p') || '#667eea';
+	const success = getComputedStyle('--suc') || '#10b981';
+	const error = getComputedStyle('--er') || '#ef4444';
+	const warning = getComputedStyle('--wa') || '#f59e0b';
+	const info = getComputedStyle('--in') || '#3b82f6';
+	const baseContent = getComputedStyle('--bc') || '#1f2937';
+	const base100 = getComputedStyle('--b1') || '#ffffff';
+	const base200 = getComputedStyle('--b2') || '#f3f4f6';
+	const base300 = getComputedStyle('--b3') || '#e5e7eb';
+
+	return {
+		primary: primary || '#667eea',
+		success: success || '#10b981',
+		error: error || '#ef4444',
+		warning: warning || '#f59e0b',
+		info: info || '#3b82f6',
+		baseContent: baseContent || '#1f2937',
+		base100: base100 || '#ffffff',
+		base200: base200 || '#f3f4f6',
+		base300: base300 || '#e5e7eb'
+	};
+}
+
+/**
+ * Converter cor hex para rgba
+ */
+export function hexToRgba(hex: string, alpha: number = 1): string {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+	if (!result) return `rgba(102, 126, 234, ${alpha})`;
+
+	const r = parseInt(result[1], 16);
+	const g = parseInt(result[2], 16);
+	const b = parseInt(result[3], 16);
+
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/**
+ * Converter cor hex para rgb
+ */
+export function hexToRgb(hex: string): string {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+	if (!result) return 'rgb(102, 126, 234)';
+
+	const r = parseInt(result[1], 16);
+	const g = parseInt(result[2], 16);
+	const b = parseInt(result[3], 16);
+
+	return `rgb(${r}, ${g}, ${b})`;
+}
+
diff --git a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
index 703ce53..498b105 100644
--- a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
@@ -1467,9 +1467,8 @@
 					</div>
 					<div
 						bind:this={terminalScrollRef}
-						class="bg-neutral text-neutral-content max-h-64 overflow-y-auto rounded-lg p-4 font-mono text-sm"
-						style="background-color: #1a1a1a; color: #e5e5e5;"
-					>
+					class="bg-base-200 text-base-content max-h-64 overflow-y-auto rounded-lg p-4 font-mono text-sm border border-base-300"
+				>
 						{#if logsEnvio.length === 0}
 							<div class="text-neutral-content/60 italic">Aguardando envio de notificação...</div>
 						{:else}
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index ccab3a2..2115aba 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -18,19 +18,30 @@
 
   // Aplicar tema quando o usuário for carregado
   $effect(() => {
-    if (currentUser?.data?.temaPreferido) {
-      // Usuário logado com tema preferido - aplicar tema salvo
-      aplicarTema(currentUser.data.temaPreferido);
-    } else if (currentUser?.data === null || (currentUser !== undefined && !currentUser.data)) {
-      // Usuário não está logado - aplicar tema padrão (roxo)
-      aplicarTemaPadrao();
-    }
+    if (typeof document === 'undefined') return;
+    
+    const htmlElement = document.documentElement;
+    
+    // Aguardar um pouco para garantir que o DOM está pronto
+    const timeoutId = setTimeout(() => {
+      if (currentUser?.data?.temaPreferido) {
+        // Usuário logado com tema preferido - aplicar tema salvo
+        aplicarTema(currentUser.data.temaPreferido);
+      } else if (currentUser !== undefined) {
+        // Se a query terminou (mesmo que não haja usuário), aplicar tema padrão
+        if (!htmlElement.getAttribute('data-theme')) {
+          aplicarTemaPadrao();
+        }
+      }
+    }, 50);
+
+    return () => clearTimeout(timeoutId);
   });
 
   // Aplicar tema padrão imediatamente ao carregar (antes de verificar usuário)
   $effect(() => {
     if (typeof document !== 'undefined') {
-      // Se não há tema aplicado ainda, aplicar o padrão
+      // Se não há tema aplicado ainda, aplicar o padrão imediatamente
       const htmlElement = document.documentElement;
       if (!htmlElement.getAttribute('data-theme')) {
         aplicarTemaPadrao();