AyronSantos/chatc2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: comprehensive design system overhaul

Browse Source 
Applied impeccable design critique, audit, harden, layout, distill, and polish across all pages.

DESIGN SYSTEM:
- Created PRODUCT.md (5 design principles, WCAG 2.1 AA target)
- Created DESIGN.md (34 color tokens, 6 radius scale, full component spec)
- Created .impeccable/design.json (sidecar with tonal ramps, shadows, motion)

ACCESSIBILITY:
- 33 aria-labels across 7 pages (was ~13)
- 63 <label> elements (was ~30)
- 6 <main> landmarks + role=navigation on all sidebars
- Esc to close modals on 4 pages
- Keyboard shortcuts (Ctrl+J/K, Ctrl+F) on chat

THEMING:
- 216 hardcoded colors replaced with var() references
- 449 !important removed from dark-mode.css
- Dark mode script unified (was duplicated 9x inline)
- All modals converted to .modal-overlay + .modal design system classes

CHAT:
- Error states for messages (.msg.erro, .msg.enviando)
- Connection status indicator
- Confirmation modal before finalizar
- Input bar reorganized (3 visible actions, + menu)
- Right panel accordions
- Send button disabled when empty
- Touch targets 44px on mobile

CLIENT DETAIL:
- Tabs/badges/sub-tabs use CSS classes instead of inline styles
- 'Iniciar Conversa' button now primary action
- alert() replaced with inline feedback
- Modal converted to design system classes

CLIENT LIST:
- Modal moved inside <body> (was HTML-invalid)
- alert() replaced with inline feedback
- Modal uses .show pattern

SETTINGS:
- 4 modals converted to design system classes
- 14 alert() calls replaced with inline feedback
- fecharModal() uses classList instead of style.display

ROUTES:
- border-radius normalized, hardcoded colors fixed

Score progression:
  Chat:        23 → 32/40
  Client List: 32 → 35/40
  Client Detail: 26 → 30/40
  Settings:     29 → 35/40
  Routes:       37 → 38/40
  Audit (project): 14/20 → 17/20
This commit is contained in:
Ayron Salatiel Dos Santos
2026-06-23 16:58:12 +00:00
parent cf720c37a1
commit 12d419de7c
113 changed files with 52423 additions and 951 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/public/csat.html
+13 -10
View File
@@ -8,7 +8,7 @@
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
@@ -25,8 +25,8 @@ body {
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.logo { font-size: 48px; margin-bottom: 16px; }
h1 { font-size: 24px; color: #1f2937; margin-bottom: 8px; }
.subtitle { font-size: 14px; color: #6b7280; margin-bottom: 32px; }
h1 { font-size: 24px; color: var(--text-primary); margin-bottom: 8px; }
.subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; }
.stars {
display: flex;
@@ -55,7 +55,7 @@ h1 { font-size: 24px; color: #1f2937; margin-bottom: 8px; }
textarea {
width: 100%;
padding: 14px 16px;
border: 2px solid #e5e7eb;
border: 2px solid var(--border);
border-radius: 12px;
font-size: 14px;
font-family: inherit;
@@ -65,12 +65,12 @@ textarea {
transition: border-color .2s;
margin-bottom: 20px;
}
textarea:focus { border-color: #667eea; }
textarea:focus { border-color: var(--primary); }
.btn {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
color: #fff;
border: none;
border-radius: 12px;
@@ -84,18 +84,18 @@ textarea:focus { border-color: #667eea; }
.rating-text {
font-size: 14px;
color: #6b7280;
color: var(--text-muted);
margin-bottom: 24px;
min-height: 20px;
}
.success { display: none; }
.success .icon { font-size: 64px; margin-bottom: 16px; }
.success h2 { color: #059669; margin-bottom: 8px; }
.success p { color: #6b7280; }
.success h2 { color: var(--success); margin-bottom: 8px; }
.success p { color: var(--text-muted); }
.erro {
color: #ef4444;
color: var(--danger);
font-size: 14px;
margin-top: 12px;
display: none;
@@ -204,5 +204,8 @@ async function enviar() {
getParams();
</script>
<!-- impeccable-live-start -->
<script src="http://localhost:8400/live.js"></script>
<!-- impeccable-live-end -->
</body>
</html>