Refatoracao geral: limpeza de logs, correcoes de fim de linha, animacoes framer-motion e automacao de deploy no package.json
This commit is contained in:
@@ -1,174 +1,174 @@
|
||||
# 🧪 Guia de Teste - Dark Mode
|
||||
|
||||
## 📋 Como Testar o Dark Mode
|
||||
|
||||
### 1. Ativar/Desativar Dark Mode
|
||||
- Clique no ícone de Sol/Lua no header (canto superior direito)
|
||||
- O tema deve mudar instantaneamente
|
||||
- A preferência é salva automaticamente
|
||||
|
||||
### 2. Áreas para Testar
|
||||
|
||||
#### ✅ Página de Configurações
|
||||
- [ ] Título "Configurações" visível e com contraste
|
||||
- [ ] Tabs com cores apropriadas
|
||||
- [ ] Conteúdo das abas com dark mode
|
||||
|
||||
#### ✅ Aba: Pastas e Documentos
|
||||
- [ ] Tabela com linhas visíveis
|
||||
- [ ] Headers com contraste
|
||||
- [ ] Botões com cores apropriadas
|
||||
- [ ] Modal de criação com dark mode
|
||||
|
||||
#### ✅ Aba: Categorias
|
||||
- [ ] Cards com dark mode
|
||||
- [ ] Ícones visíveis
|
||||
- [ ] Botões com cores apropriadas
|
||||
- [ ] Modal com dark mode
|
||||
|
||||
#### ✅ Aba: Usuários
|
||||
- [ ] Tabela com linhas visíveis
|
||||
- [ ] Status badges com cores apropriadas
|
||||
- [ ] Ícones visíveis
|
||||
|
||||
#### ✅ Aba: Logs
|
||||
- [ ] Tabela com linhas visíveis
|
||||
- [ ] Ícones de status com cores
|
||||
- [ ] Textos com contraste
|
||||
|
||||
#### ✅ Aba: Integrações IA
|
||||
- [ ] Cards com dark mode
|
||||
- [ ] Ícones visíveis
|
||||
- [ ] Botões com cores apropriadas
|
||||
- [ ] Modal com dark mode
|
||||
|
||||
#### ✅ Página de Busca
|
||||
- [ ] Input com dark mode
|
||||
- [ ] Placeholder visível
|
||||
- [ ] Mensagens com contraste
|
||||
|
||||
#### ✅ Criar Template (3 Painéis)
|
||||
- [ ] Painel 1: Dados Básicos
|
||||
- [ ] Inputs com dark mode
|
||||
- [ ] Textarea com dark mode
|
||||
- [ ] Radio buttons com textos visíveis
|
||||
- [ ] Painel 2: Seleção de Tópicos
|
||||
- [ ] Cards de tópicos com dark mode
|
||||
- [ ] Checkboxes visíveis
|
||||
- [ ] Hover states funcionando
|
||||
- [ ] Painel 3: Revisar e Salvar
|
||||
- [ ] Fundo com dark mode
|
||||
- [ ] Textos com contraste
|
||||
- [ ] Botões visíveis
|
||||
|
||||
#### ✅ Editar Projeto (DatabookEdit)
|
||||
- [ ] Inputs com dark mode
|
||||
- [ ] Selects com dark mode
|
||||
- [ ] Painel de informações com dark mode
|
||||
- [ ] Botões com cores apropriadas
|
||||
|
||||
#### ✅ Databook View (Preview)
|
||||
- [ ] Painel esquerdo (Índice)
|
||||
- [ ] Fundo com dark mode
|
||||
- [ ] Textos com contraste
|
||||
- [ ] Hover states funcionando
|
||||
- [ ] Seleção visível
|
||||
- [ ] Painel direito (Documentos)
|
||||
- [ ] Cards de documentos com dark mode
|
||||
- [ ] Ícones visíveis
|
||||
- [ ] Botões com cores apropriadas
|
||||
- [ ] Hover states funcionando
|
||||
- [ ] Modal de Upload
|
||||
- [ ] Fundo com dark mode
|
||||
- [ ] Textos com contraste
|
||||
- [ ] Inputs com dark mode
|
||||
- [ ] Modal de Preview
|
||||
- [ ] Fundo com dark mode
|
||||
- [ ] Textos com contraste
|
||||
- [ ] Imagens visíveis
|
||||
|
||||
#### ✅ Design do Databook
|
||||
- [ ] Filtros com dark mode
|
||||
- [ ] Cards de templates com dark mode
|
||||
- [ ] Botões com cores apropriadas
|
||||
- [ ] Modal de edição com dark mode
|
||||
|
||||
## 🎨 Checklist de Contraste
|
||||
|
||||
Para cada elemento, verificar:
|
||||
- [ ] Texto legível em dark mode
|
||||
- [ ] Fundo apropriado (não branco)
|
||||
- [ ] Bordas visíveis
|
||||
- [ ] Ícones com cores apropriadas
|
||||
- [ ] Hover states visíveis
|
||||
- [ ] Focus states visíveis
|
||||
|
||||
## 🔍 Verificação de Cores
|
||||
|
||||
### Modo Claro
|
||||
- Fundo: Branco (#FFFFFF)
|
||||
- Texto: Cinza escuro (#111827)
|
||||
- Bordas: Cinza claro (#E5E7EB)
|
||||
- Primária: Azul (#1E40AF)
|
||||
|
||||
### Modo Escuro
|
||||
- Fundo: Cinza muito escuro (#111827)
|
||||
- Texto: Cinza claro (#F9FAFB)
|
||||
- Bordas: Cinza escuro (#374151)
|
||||
- Primária: Azul claro (#60A5FA)
|
||||
|
||||
## 📱 Testes em Diferentes Dispositivos
|
||||
|
||||
- [ ] Desktop (1920x1080)
|
||||
- [ ] Tablet (768x1024)
|
||||
- [ ] Mobile (375x667)
|
||||
|
||||
## 🌙 Testes de Preferência do Sistema
|
||||
|
||||
1. Abrir DevTools (F12)
|
||||
2. Ir para Console
|
||||
3. Executar:
|
||||
```javascript
|
||||
// Simular preferência do sistema para dark mode
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
```
|
||||
4. Verificar se o tema muda automaticamente
|
||||
|
||||
## ✅ Checklist Final
|
||||
|
||||
- [ ] Todas as páginas testadas
|
||||
- [ ] Todos os componentes com dark mode
|
||||
- [ ] Contraste adequado em todas as áreas
|
||||
- [ ] Hover states funcionando
|
||||
- [ ] Modals com dark mode
|
||||
- [ ] Tabelas com dark mode
|
||||
- [ ] Cards com dark mode
|
||||
- [ ] Inputs com dark mode
|
||||
- [ ] Selects com dark mode
|
||||
- [ ] Textareas com dark mode
|
||||
- [ ] Ícones com cores apropriadas
|
||||
- [ ] Badges com dark mode
|
||||
- [ ] Botões com dark mode
|
||||
- [ ] Bordas visíveis
|
||||
- [ ] Textos legíveis
|
||||
|
||||
## 🐛 Problemas Conhecidos
|
||||
|
||||
Se encontrar algum problema:
|
||||
1. Verificar se a classe `dark:` foi aplicada
|
||||
2. Verificar se o Tailwind está compilando
|
||||
3. Limpar cache do navegador (Ctrl+Shift+Delete)
|
||||
4. Recarregar a página (Ctrl+R)
|
||||
|
||||
## 📝 Relatório de Testes
|
||||
|
||||
Ao testar, anote:
|
||||
- Data do teste
|
||||
- Navegador utilizado
|
||||
- Resolução da tela
|
||||
- Problemas encontrados
|
||||
- Sugestões de melhoria
|
||||
|
||||
---
|
||||
|
||||
**Dica:** Use a ferramenta de inspeção do navegador (F12) para verificar as classes aplicadas aos elementos.
|
||||
# 🧪 Guia de Teste - Dark Mode
|
||||
|
||||
## 📋 Como Testar o Dark Mode
|
||||
|
||||
### 1. Ativar/Desativar Dark Mode
|
||||
- Clique no ícone de Sol/Lua no header (canto superior direito)
|
||||
- O tema deve mudar instantaneamente
|
||||
- A preferência é salva automaticamente
|
||||
|
||||
### 2. Áreas para Testar
|
||||
|
||||
#### ✅ Página de Configurações
|
||||
- [ ] Título "Configurações" visível e com contraste
|
||||
- [ ] Tabs com cores apropriadas
|
||||
- [ ] Conteúdo das abas com dark mode
|
||||
|
||||
#### ✅ Aba: Pastas e Documentos
|
||||
- [ ] Tabela com linhas visíveis
|
||||
- [ ] Headers com contraste
|
||||
- [ ] Botões com cores apropriadas
|
||||
- [ ] Modal de criação com dark mode
|
||||
|
||||
#### ✅ Aba: Categorias
|
||||
- [ ] Cards com dark mode
|
||||
- [ ] Ícones visíveis
|
||||
- [ ] Botões com cores apropriadas
|
||||
- [ ] Modal com dark mode
|
||||
|
||||
#### ✅ Aba: Usuários
|
||||
- [ ] Tabela com linhas visíveis
|
||||
- [ ] Status badges com cores apropriadas
|
||||
- [ ] Ícones visíveis
|
||||
|
||||
#### ✅ Aba: Logs
|
||||
- [ ] Tabela com linhas visíveis
|
||||
- [ ] Ícones de status com cores
|
||||
- [ ] Textos com contraste
|
||||
|
||||
#### ✅ Aba: Integrações IA
|
||||
- [ ] Cards com dark mode
|
||||
- [ ] Ícones visíveis
|
||||
- [ ] Botões com cores apropriadas
|
||||
- [ ] Modal com dark mode
|
||||
|
||||
#### ✅ Página de Busca
|
||||
- [ ] Input com dark mode
|
||||
- [ ] Placeholder visível
|
||||
- [ ] Mensagens com contraste
|
||||
|
||||
#### ✅ Criar Template (3 Painéis)
|
||||
- [ ] Painel 1: Dados Básicos
|
||||
- [ ] Inputs com dark mode
|
||||
- [ ] Textarea com dark mode
|
||||
- [ ] Radio buttons com textos visíveis
|
||||
- [ ] Painel 2: Seleção de Tópicos
|
||||
- [ ] Cards de tópicos com dark mode
|
||||
- [ ] Checkboxes visíveis
|
||||
- [ ] Hover states funcionando
|
||||
- [ ] Painel 3: Revisar e Salvar
|
||||
- [ ] Fundo com dark mode
|
||||
- [ ] Textos com contraste
|
||||
- [ ] Botões visíveis
|
||||
|
||||
#### ✅ Editar Projeto (DatabookEdit)
|
||||
- [ ] Inputs com dark mode
|
||||
- [ ] Selects com dark mode
|
||||
- [ ] Painel de informações com dark mode
|
||||
- [ ] Botões com cores apropriadas
|
||||
|
||||
#### ✅ Databook View (Preview)
|
||||
- [ ] Painel esquerdo (Índice)
|
||||
- [ ] Fundo com dark mode
|
||||
- [ ] Textos com contraste
|
||||
- [ ] Hover states funcionando
|
||||
- [ ] Seleção visível
|
||||
- [ ] Painel direito (Documentos)
|
||||
- [ ] Cards de documentos com dark mode
|
||||
- [ ] Ícones visíveis
|
||||
- [ ] Botões com cores apropriadas
|
||||
- [ ] Hover states funcionando
|
||||
- [ ] Modal de Upload
|
||||
- [ ] Fundo com dark mode
|
||||
- [ ] Textos com contraste
|
||||
- [ ] Inputs com dark mode
|
||||
- [ ] Modal de Preview
|
||||
- [ ] Fundo com dark mode
|
||||
- [ ] Textos com contraste
|
||||
- [ ] Imagens visíveis
|
||||
|
||||
#### ✅ Design do Databook
|
||||
- [ ] Filtros com dark mode
|
||||
- [ ] Cards de templates com dark mode
|
||||
- [ ] Botões com cores apropriadas
|
||||
- [ ] Modal de edição com dark mode
|
||||
|
||||
## 🎨 Checklist de Contraste
|
||||
|
||||
Para cada elemento, verificar:
|
||||
- [ ] Texto legível em dark mode
|
||||
- [ ] Fundo apropriado (não branco)
|
||||
- [ ] Bordas visíveis
|
||||
- [ ] Ícones com cores apropriadas
|
||||
- [ ] Hover states visíveis
|
||||
- [ ] Focus states visíveis
|
||||
|
||||
## 🔍 Verificação de Cores
|
||||
|
||||
### Modo Claro
|
||||
- Fundo: Branco (#FFFFFF)
|
||||
- Texto: Cinza escuro (#111827)
|
||||
- Bordas: Cinza claro (#E5E7EB)
|
||||
- Primária: Azul (#1E40AF)
|
||||
|
||||
### Modo Escuro
|
||||
- Fundo: Cinza muito escuro (#111827)
|
||||
- Texto: Cinza claro (#F9FAFB)
|
||||
- Bordas: Cinza escuro (#374151)
|
||||
- Primária: Azul claro (#60A5FA)
|
||||
|
||||
## 📱 Testes em Diferentes Dispositivos
|
||||
|
||||
- [ ] Desktop (1920x1080)
|
||||
- [ ] Tablet (768x1024)
|
||||
- [ ] Mobile (375x667)
|
||||
|
||||
## 🌙 Testes de Preferência do Sistema
|
||||
|
||||
1. Abrir DevTools (F12)
|
||||
2. Ir para Console
|
||||
3. Executar:
|
||||
```javascript
|
||||
// Simular preferência do sistema para dark mode
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
```
|
||||
4. Verificar se o tema muda automaticamente
|
||||
|
||||
## ✅ Checklist Final
|
||||
|
||||
- [ ] Todas as páginas testadas
|
||||
- [ ] Todos os componentes com dark mode
|
||||
- [ ] Contraste adequado em todas as áreas
|
||||
- [ ] Hover states funcionando
|
||||
- [ ] Modals com dark mode
|
||||
- [ ] Tabelas com dark mode
|
||||
- [ ] Cards com dark mode
|
||||
- [ ] Inputs com dark mode
|
||||
- [ ] Selects com dark mode
|
||||
- [ ] Textareas com dark mode
|
||||
- [ ] Ícones com cores apropriadas
|
||||
- [ ] Badges com dark mode
|
||||
- [ ] Botões com dark mode
|
||||
- [ ] Bordas visíveis
|
||||
- [ ] Textos legíveis
|
||||
|
||||
## 🐛 Problemas Conhecidos
|
||||
|
||||
Se encontrar algum problema:
|
||||
1. Verificar se a classe `dark:` foi aplicada
|
||||
2. Verificar se o Tailwind está compilando
|
||||
3. Limpar cache do navegador (Ctrl+Shift+Delete)
|
||||
4. Recarregar a página (Ctrl+R)
|
||||
|
||||
## 📝 Relatório de Testes
|
||||
|
||||
Ao testar, anote:
|
||||
- Data do teste
|
||||
- Navegador utilizado
|
||||
- Resolução da tela
|
||||
- Problemas encontrados
|
||||
- Sugestões de melhoria
|
||||
|
||||
---
|
||||
|
||||
**Dica:** Use a ferramenta de inspeção do navegador (F12) para verificar as classes aplicadas aos elementos.
|
||||
|
||||
Reference in New Issue
Block a user