From 3e1001b7c7a5055a26d547ae42ad80f779dbfc1e Mon Sep 17 00:00:00 2001 From: VPS 4 Builder Date: Thu, 2 Jul 2026 03:55:16 +0200 Subject: [PATCH] style(newwhats): /wa-sessions com sidebar do scoreodonto + tema branco MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - wa-sessions sai do isStandaloneView → renderiza com a sidebar (área de administração); wa-inbox/wa-secretaria seguem em tela cheia. - SessionsView convertida do dark para o tema branco/profissional (bg-gray-50/ white, text-gray-*, badges claros, botão Conectar em brand); backdrops de modal e botões coloridos preservados. Co-Authored-By: Claude Opus 4.8 --- frontend/App.tsx | 4 +- frontend/views/newwhats/SessionsView.tsx | 110 +++++++++++------------ 2 files changed, 58 insertions(+), 56 deletions(-) diff --git a/frontend/App.tsx b/frontend/App.tsx index b53101b..3380c1e 100644 --- a/frontend/App.tsx +++ b/frontend/App.tsx @@ -563,7 +563,9 @@ const App: React.FC = () => { // Views do plugin NewWhats rodam em tela cheia (sem sidebar/barra do // scoreodonto) — cada uma tem seu próprio "Voltar" (onNavigate) para sair. - const isStandaloneView = ['landing', 'login', 'public', 'update', 'cadastro-dentista', 'criar-clinica', 'aguardando-convite', 'wa-inbox', 'wa-sessions', 'wa-secretaria'].includes(currentView); + // /wa-sessions (gestão de sessões WhatsApp) roda COM a sidebar do scoreodonto + // (é área de administração). wa-inbox/wa-secretaria seguem em tela cheia. + const isStandaloneView = ['landing', 'login', 'public', 'update', 'cadastro-dentista', 'criar-clinica', 'aguardando-convite', 'wa-inbox', 'wa-secretaria'].includes(currentView); return ( <> diff --git a/frontend/views/newwhats/SessionsView.tsx b/frontend/views/newwhats/SessionsView.tsx index e406d78..b8d1616 100644 --- a/frontend/views/newwhats/SessionsView.tsx +++ b/frontend/views/newwhats/SessionsView.tsx @@ -37,8 +37,8 @@ const STATUS_CONFIG = { }, DISCONNECTED: { label: 'Desconectado', - dot: 'bg-slate-500', - badge: 'bg-slate-500/10 text-slate-400 border-slate-500/20', + dot: 'bg-gray-400', + badge: 'bg-gray-100 text-gray-600 border-gray-300', icon: , }, BANNED: { @@ -72,7 +72,7 @@ const EVENT_COLOR: Record = { }; function eventColor(event: string): string { - return EVENT_COLOR[event] ?? 'text-slate-400 bg-slate-500/15'; + return EVENT_COLOR[event] ?? 'text-gray-600 bg-gray-100'; } function logSummary(entry: BaileysLogEntry): string { @@ -107,15 +107,15 @@ function LogRow({ entry, index }: { entry: BaileysLogEntry; index: number }) {
@@ -129,7 +129,7 @@ function LogRow({ entry, index }: { entry: BaileysLogEntry; index: number }) { transition={{ duration: 0.15 }} className="overflow-hidden" > - 
+            
               {JSON.stringify(entry.data, null, 2)}
             

           
@@ -207,26 +207,26 @@ function QrModal({
         initial={{ opacity: 0, scale: 0.9, y: 20 }}
         animate={{ opacity: 1, scale: 1, y: 0 }}
         exit={{ opacity: 0, scale: 0.9, y: 20 }}
-        className="relative bg-[#0d0f18] border border-white/10 rounded-[2rem] shadow-2xl w-full max-w-3xl max-h-[90vh] flex flex-col overflow-hidden"
+        className="relative bg-white border border-gray-200 rounded-[2rem] shadow-2xl w-full max-w-3xl max-h-[90vh] flex flex-col overflow-hidden"
         onClick={e => e.stopPropagation()}
       >
-        

+        

           

-            
Conectar WhatsApp

-            
{instanceName}

+            
Conectar WhatsApp

+            
{instanceName}

           

-          
         

 
         

-          

-            

+          

+            

               {expired ? (
                 

-                  
-                  
QR expirado

+                  
+                  
QR expirado

                   

@@ -252,22 +252,22 @@ function QrModal({
               

             )}
 
-            
           

 
           

-            

-              
-              Console Baileys
-              
+            

+              
+              Console Baileys
+              
                 {logs.length} eventos
               
               

                 
@@ -283,7 +283,7 @@ function QrModal({
 
             

               {logs.length === 0 ? (
-                

+                

                   
                   
Aguardando eventos do Baileys...

                 

@@ -297,10 +297,10 @@ function QrModal({
               )}
             

 
-            

+            

               

                 
-                
+                
                   {instanceId.slice(0, 8)}... · live
                 
               

@@ -335,13 +335,13 @@ const SessionCard = React.forwardRef
       

 
       

         

-          

+          

             {inst.avatar
               ? {inst.name} { (e.currentTarget as HTMLImageElement).style.display = 'none'; (e.currentTarget.nextSibling as HTMLElement)?.style.setProperty('display', 'flex') }} />
               : null}
@@ -350,10 +350,10 @@ const SessionCard = React.forwardRef
           

           

-            
{inst.name}

+            
{inst.name}

             

               {inst.phone && (
-                {inst.phone}
+                {inst.phone}
               )}
               
                 
@@ -364,7 +364,7 @@ const SessionCard = React.forwardRef
 
         
@@ -379,21 +379,21 @@ const SessionCard = React.forwardRef
       )}
 
-      

+      

         {isConnected ? (
           <>
             

                Sessão ativa
             

             
           
         ) : (
           
@@ -421,18 +421,18 @@ function ConfirmDeleteModal({
       
       
         

           

             
           

           

-            
Deletar instância

-            
{inst.name}

+            
Deletar instância

+            
{inst.name}

           

         

-        

+        

           Isso removerá permanentemente a instância, seus chats e sessão Baileys.

           Esta ação é irreversível.
         

@@ -483,7 +483,7 @@ export function SessionsView({ onNavigate }: { onNavigate?: (view: string) => vo
   const hasActiveSession = instances.some((i) => i.status === 'CONNECTED');
 
   return (
-    

+    

       

 
         
@@ -501,7 +501,7 @@ export function SessionsView({ onNavigate }: { onNavigate?: (view: string) => vo
         

           

           

-            
             

@@ -509,14 +509,14 @@ export function SessionsView({ onNavigate }: { onNavigate?: (view: string) => vo
                 

                   
                 

-                
Instâncias

+                
Instâncias

               

-              
WhatsApp Multi-Device · Baileys

+              
WhatsApp Multi-Device · Baileys

             

           

           

             
@@ -554,21 +554,21 @@ export function SessionsView({ onNavigate }: { onNavigate?: (view: string) => vo
           
             {loading ? (
               Array(3).fill(0).map((_, i) => (
-                

+                

               ))
             ) : instances.length === 0 ? (
               
-                

+                

                   
                 

                 

-                  
Nenhuma instância

-                  
Crie uma para começar a usar o WhatsApp.

+                  
Nenhuma instância

+                  
Crie uma para começar a usar o WhatsApp.

                 

                 
@@ -594,14 +594,14 @@ export function SessionsView({ onNavigate }: { onNavigate?: (view: string) => vo
               
               
                 

-                  
Nova Instância

-                  
Dê um nome para identificar esta conexão.

+                  
Nova Instância

+                  
Dê um nome para identificar esta conexão.

                 

                 

-                  
+                  
                    vo
                     onKeyDown={(e) => { if (e.key === 'Enter') handleCreate(); }}
                     placeholder="ex: principal, comercial, suporte..."
                     autoFocus
-                    className="w-full bg-black/30 border border-white/10 rounded-2xl px-4 py-3 text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-brand-500/40 text-sm"
+                    className="w-full bg-gray-50 border border-gray-200 rounded-2xl px-4 py-3 text-gray-800 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-500/40 text-sm"
                   />