cassel/bi-agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ajusta UI do header - logo com fundo branco e alinhamento

Browse Source 
- Adiciona fundo branco com bordas arredondadas na logo
- Header content alinhado com body (max-width: 1600px)
- Adiciona wrapper header-inner para controle de largura

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
root
2026-02-08 13:59:30 -05:00
parent 022993b201
commit ae8a675e52
1 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/ui-template.js
View File

@@ -45,11 +45,6 @@ const headerCSS = `
.app-header {
background: linear-gradient(135deg, var(--header-color) 0%, var(--header-dark) 100%);
color: white;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.app-header.admin {
@@ -60,6 +55,15 @@ const headerCSS = `
--header-color: var(--primary);
--header-dark: var(--primary-dark);
}
.header-inner {
max-width: 1600px;
margin: 0 auto;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
}
.header-brand {
display: flex;
@@ -69,6 +73,9 @@ const headerCSS = `
.header-brand .logo {
height: 36px;
width: auto;
background: white;
padding: 6px 12px;
border-radius: 8px;
}
.header-brand .app-name {
display: flex;
@@ -187,12 +194,11 @@ const headerCSS = `
/* Responsive */
@media (max-width: 768px) {
.app-header {
padding: 0 20px;
.header-inner {
padding: 16px 20px;
height: auto;
flex-direction: column;
gap: 12px;
padding: 16px 20px;
}
.header-nav {
width: 100%;
@@ -247,21 +253,23 @@ function buildHeader(options = {}) {
return `
<header class="app-header ${headerClass}">
<div class="header-brand">
<img src="/public/logo.png" alt="CambioReal" class="logo">
<div class="app-name">
<span class="app-name-badge">BI - CCC</span>
<span class="app-subtitle">Central Command Center</span>
<div class="header-inner">
<div class="header-brand">
<img src="/public/logo.png" alt="CambioReal" class="logo">
<div class="app-name">
<span class="app-name-badge">BI - CCC</span>
<span class="app-subtitle">Central Command Center</span>
</div>
</div>
</div>
${showNav ? (isAdmin ? adminNav : agentNav) : ''}
<div class="header-user">
<div class="user-info">
<span class="user-avatar">${initials}</span>
<span>${userName}</span>
<span class="user-role">${isAdmin ? 'Admin' : 'Agente'}</span>
${showNav ? (isAdmin ? adminNav : agentNav) : ''}
<div class="header-user">
<div class="user-info">
<span class="user-avatar">${initials}</span>
<span>${userName}</span>
<span class="user-role">${isAdmin ? 'Admin' : 'Agente'}</span>
</div>
<a href="/logout" class="btn-logout">Sair</a>
</div>
<a href="/logout" class="btn-logout">Sair</a>
</div>
</header>
`;