FelipeCN
ad09c53a5d
- Introduced a new theme for the application based on dark navy aesthetics. - Created design tokens for colors, spacings, and border radii. - Developed a theme module in Rust to manage styles for various UI components. - Updated multiple screens and components to align with the new design, including cards, buttons, badges, and progress bars. - Enhanced user experience with improved layouts and visual elements across the application.
292 lines
9.5 KiB
Markdown
292 lines
9.5 KiB
Markdown
# UI Redesign — Comparador de Notas
|
||
|
||
**Data:** 04/03/2026
|
||
**Branch:** `change-ui`
|
||
**Base:** iced 0.13.1 (Elm architecture)
|
||
**Referência visual:** `ui-ideia/mockup.html` + `ui-ideia/design_tokens.json`
|
||
|
||
---
|
||
|
||
## 1. Objetivo
|
||
|
||
Aplicar o visual do mockup (tema dark navy, cards, badges coloridos, progress bars) a todas as telas da aplicação, mantendo a lógica de negócio e a arquitetura Elm intocadas.
|
||
|
||
---
|
||
|
||
## 2. Design Tokens (mapeados para Rust)
|
||
|
||
### Paleta de cores
|
||
|
||
| Token | Hex | Uso |
|
||
|------------------------|-----------|---------------------------------------|
|
||
| `BG` | `#0F172A` | Fundo geral da janela |
|
||
| `SURFACE` | `#1E293B` | Cards / containers primários |
|
||
| `SURFACE_2` | `#334155` | Cards secundários, cabeçalho de tabela|
|
||
| `BORDER` | `#334155` | Bordas de inputs e cards |
|
||
| `TEXT` | `#F1F5F9` | Texto principal |
|
||
| `TEXT_SECONDARY` | `#94A3B8` | Labels, placeholders, texto muted |
|
||
| `TEXT_MUTED` | `#64748B` | Texto desabilitado |
|
||
| `PRIMARY` | `#3B82F6` | Botões primários, links, step ativo |
|
||
| `PRIMARY_HOVER` | `#2563EB` | Hover em botões primários |
|
||
| `SUCCESS` | `#22C55E` | Badge OK, progress bar ≥ 90% |
|
||
| `WARNING` | `#F59E0B` | Badge Faltante, progress bar 60–89% |
|
||
| `ERROR` | `#EF4444` | Badge Duplicada, progress bar < 60% |
|
||
| `OVERLAY` | rgba(0,0,0,0.6) | Fundo do modal |
|
||
|
||
### Espaçamentos
|
||
|
||
| Token | px |
|
||
|-------|----|
|
||
| `XS` | 4 |
|
||
| `SM` | 8 |
|
||
| `MD` | 12 |
|
||
| `LG` | 16 |
|
||
| `XL` | 24 |
|
||
| `XXL` | 32 |
|
||
|
||
### Border radius
|
||
|
||
| Token | px |
|
||
|--------|----|
|
||
| `SM` | 4 |
|
||
| `MD` | 6 |
|
||
| `LG` | 8 |
|
||
|
||
---
|
||
|
||
## 3. Arquivo de tema: `src/ui/theme.rs`
|
||
|
||
Módulo responsável por expor:
|
||
|
||
- `PALETA`: constantes `Color` para todas as cores acima
|
||
- Funções de estilo para `container::Style`, `button::Style`, `text_input::Style`, `progress_bar::Style`
|
||
- Nenhuma lógica de negócio — apenas aparência
|
||
|
||
### Estratégia de tema iced
|
||
|
||
```rust
|
||
// main.rs — encadear .theme()
|
||
iced::application(...)
|
||
.theme(|_app, _| tema_dark())
|
||
.run_with(App::new)
|
||
|
||
// theme.rs
|
||
pub fn tema_dark() -> iced::Theme {
|
||
iced::Theme::custom("dark".to_string(), iced::theme::Palette {
|
||
background: hex("#0F172A"),
|
||
text: hex("#F1F5F9"),
|
||
primary: hex("#3B82F6"),
|
||
success: hex("#22C55E"),
|
||
danger: hex("#EF4444"),
|
||
})
|
||
}
|
||
```
|
||
|
||
Widgets que precisam de aparência customizada além da paleta (cards, badges) recebem closure `.style(|theme| ...)` inline ou via função helper em `theme.rs`.
|
||
|
||
---
|
||
|
||
## 4. Componentes visuais novos / modificados
|
||
|
||
### 4.1 Card container
|
||
|
||
Container com background `SURFACE`, borda `BORDER` 1px, radius `LG` (8px), padding `LG` (16px).
|
||
|
||
```rust
|
||
// theme.rs
|
||
pub fn card(theme: &iced::Theme) -> container::Style { ... }
|
||
pub fn card_secondary(theme: &iced::Theme) -> container::Style { ... }
|
||
```
|
||
|
||
### 4.2 Botão primary
|
||
|
||
Background `PRIMARY`, texto `TEXT`, radius `MD` (6px), sem borda.
|
||
Hover: background `PRIMARY_HOVER`.
|
||
|
||
### 4.3 Botão secondary / ghost
|
||
|
||
Background `SURFACE_2`, texto `TEXT`, radius `MD`.
|
||
|
||
### 4.4 Botão danger
|
||
|
||
Background semi-transparente `ERROR` (20% alpha), texto `ERROR`, radius `MD`.
|
||
|
||
### 4.5 Badge de status (inline)
|
||
|
||
Container com padding `[2, 8]`, radius `SM` (4px), background 20% alpha da cor semântica.
|
||
Implementado como `container(text(...).size(12))` com style closure.
|
||
|
||
| Status | Cor texto | Background alpha |
|
||
|------------|------------|-----------------|
|
||
| OK | `SUCCESS` | 20% |
|
||
| Faltante | `WARNING` | 20% |
|
||
| Duplicada | `ERROR` | 20% |
|
||
|
||
### 4.6 Progress bar por série
|
||
|
||
Componente `progress_bar` nativo do iced com style closure que escolhe cor baseada no percentual:
|
||
- ≥ 90% → `SUCCESS`
|
||
- 60–89% → `WARNING`
|
||
- < 60% → `ERROR`
|
||
|
||
Background da trilha: `#111827` (mais escuro que SURFACE).
|
||
|
||
### 4.7 Stat cards (tela de resultado)
|
||
|
||
Row de 3 cards com número grande colorido + label. Componente reutilizável `stat_card(valor, label, cor)`.
|
||
|
||
### 4.8 Breadcrumb
|
||
|
||
Row no topo da janela (exceto Layouts e Analisando). Steps separados por `›`. Background `SURFACE`, padding `[8, 16]`, borda inferior 1px `BORDER`.
|
||
|
||
| Estado do step | Cor | Tamanho |
|
||
|---------------|-------------|---------|
|
||
| Ativo | `PRIMARY` | 14px |
|
||
| Concluído | `TEXT_SECONDARY` | 13px |
|
||
| Futuro | `TEXT_MUTED` | 13px |
|
||
|
||
---
|
||
|
||
## 5. Telas — mudanças por arquivo
|
||
|
||
### 5.1 `screens/import.rs`
|
||
|
||
**Atual:** Coluna plana com título, row de arquivo e row de layout.
|
||
|
||
**Novo:**
|
||
- Card central (max-width 600px) centrado na tela
|
||
- Área de drop zone estilizada com borda tracejada `BORDER`, radius `LG`, padding `XL`
|
||
- Ícone `📂` grande + texto instrucional
|
||
- Nome do arquivo selecionado com truncamento
|
||
- Seção de layout com separador visual
|
||
- Botão primary "▶ Configurar Colunas" ocupando largura do card
|
||
|
||
### 5.2 `screens/selecionar_aba.rs`
|
||
|
||
**Atual:** Lista de botões idênticos (bug de highlight).
|
||
|
||
**Novo:**
|
||
- Card com lista de abas scrollável
|
||
- Aba selecionada: background `PRIMARY` (20% alpha), texto `PRIMARY`, borda `PRIMARY`
|
||
- Aba não selecionada: background `SURFACE_2`, texto `TEXT`
|
||
- Preview abaixo da lista em card separado
|
||
|
||
### 5.3 `screens/configuracao_colunas.rs`
|
||
|
||
**Atual:** Coluna plana de inputs.
|
||
|
||
**Novo:**
|
||
- Seção de configuração em card `SURFACE`
|
||
- Labels com `TEXT_SECONDARY`, inputs com fundo `BG`, borda `BORDER`
|
||
- Campos opcionais: checkbox com estilo consistente + input inline
|
||
- Erros em card com borda `ERROR` (20% alpha)
|
||
- Botões na barra inferior fixada: "Voltar" (ghost), "Analisar" (primary), "Reanalisar" (secondary), "Salvar" (ghost)
|
||
|
||
### 5.4 `screens/resultado.rs`
|
||
|
||
**Atual:** Coluna de texto puro.
|
||
|
||
**Novo (alinhado ao mockup):**
|
||
|
||
1. **Header row:** título + botões de ação à direita
|
||
2. **Stat cards row:** 3 cards — "Notas Faltantes" (azul), "Duplicadas" (vermelho), "Total R$" (texto branco)
|
||
3. **Card de completude por série:** para cada série, label + progress bar colorida por threshold
|
||
4. **Controle de itens/página:** botões com highlight no ativo
|
||
5. **Seções faltantes/duplicatas:** cabeçalho de série em row com badge de contagem + botão Copiar; itens em lista
|
||
|
||
### 5.5 `screens/layouts.rs`
|
||
|
||
**Atual:** Coluna plana.
|
||
|
||
**Novo:**
|
||
- Seções CSV e XLSX em cards separados
|
||
- Cada layout numa row com hover highlight
|
||
- Botões de ação menores (ícone + texto compacto)
|
||
- Linha de importar JSON no rodapé do card
|
||
|
||
### 5.6 `components/modal.rs`
|
||
|
||
**Atual:** Box com estilo do tema padrão.
|
||
|
||
**Novo:**
|
||
- Background `SURFACE`, borda `BORDER`, radius `LG`
|
||
- Título `TEXT` 18px, mensagem `TEXT_SECONDARY` 14px
|
||
- Separador entre conteúdo e botões
|
||
- Botão "Fechar" ghost, "Confirmar" primary
|
||
- Tipos Erro/Aviso com ícone + cor no título
|
||
|
||
### 5.7 `components/tabela_preview.rs`
|
||
|
||
**Atual:** Monospace puro.
|
||
|
||
**Novo:**
|
||
- Cabeçalho com background `SURFACE_2`, texto `TEXT_SECONDARY`
|
||
- Células com background `SURFACE`, texto `TEXT`, fonte monospace
|
||
- Borda inferior `BORDER` nas células
|
||
|
||
### 5.8 `components/paginacao.rs`
|
||
|
||
**Atual:** Row simples de botões.
|
||
|
||
**Novo:**
|
||
- Botões ◀/▶ com estilo ghost
|
||
- "Página X / Y" em `TEXT_SECONDARY`
|
||
|
||
---
|
||
|
||
## 6. Arquivos a criar/modificar
|
||
|
||
| Arquivo | Ação |
|
||
|---------|------|
|
||
| `src/main.rs` | Adicionar `.theme(...)` |
|
||
| `src/ui/mod.rs` | Adicionar `pub mod theme;` |
|
||
| `src/ui/theme.rs` | **Criar** — paleta + helpers de estilo |
|
||
| `src/ui/app.rs` | Breadcrumb novo estilo + tela Analisando centralizada |
|
||
| `src/ui/screens/import.rs` | Reescrever |
|
||
| `src/ui/screens/selecionar_aba.rs` | Reescrever (corrigir bug highlight) |
|
||
| `src/ui/screens/configuracao_colunas.rs` | Reescrever |
|
||
| `src/ui/screens/resultado.rs` | Reescrever |
|
||
| `src/ui/screens/layouts.rs` | Reescrever |
|
||
| `src/ui/components/modal.rs` | Reescrever |
|
||
| `src/ui/components/tabela_preview.rs` | Reescrever |
|
||
| `src/ui/components/paginacao.rs` | Reescrever |
|
||
|
||
---
|
||
|
||
## 7. Limitações do iced 0.13 e workarounds
|
||
|
||
| Limitação CSS | Workaround iced |
|
||
|---------------|----------------|
|
||
| `box-shadow` | Cor de borda ou sem sombra (aceitar diferença) |
|
||
| `rgba(r,g,b,0.2)` | `Color { r, g, b, a: 0.2 }` com valores 0.0–1.0 |
|
||
| Font Inter | Usa fonte do sistema (system-ui) — sem mudança necessária |
|
||
| `display: flex; gap` | `row![...].spacing(N)` |
|
||
| `border-bottom` nas células | `container` com border bottom via `border.width` fracional não suportado — usar separador visual alternativo |
|
||
|
||
---
|
||
|
||
## 8. Ordem de implementação
|
||
|
||
1. `theme.rs` — paleta e helpers (base para tudo)
|
||
2. `main.rs` — ativar tema
|
||
3. `modal.rs` — usado por todas as telas
|
||
4. `resultado.rs` — tela principal do mockup
|
||
5. `import.rs`
|
||
6. `selecionar_aba.rs`
|
||
7. `configuracao_colunas.rs`
|
||
8. `layouts.rs`
|
||
9. `app.rs` — breadcrumb + Analisando
|
||
10. `tabela_preview.rs` + `paginacao.rs`
|
||
11. Compilar e corrigir
|
||
|
||
---
|
||
|
||
## 9. Notas de compatibilidade iced 0.13
|
||
|
||
- `button::Style` inclui `background`, `text_color`, `border: Border { color, width, radius }`, `shadow`
|
||
- `container::Style` inclui `background`, `text_color`, `border`, `shadow`
|
||
- `progress_bar::Style` inclui `background` e `bar`
|
||
- `text_input::Style` inclui `background`, `border`, `icon`, `placeholder`, `value`, `selection`
|
||
- Closures de estilo recebem `&Theme` e retornam o `Style` concreto do widget
|
||
- `iced::Border` aceita `radius: iced::border::Radius` — usar `N.into()` para uniform radius
|