lkzwieder/botino
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyling light pastel: tema blanco/azul/verde + Inter self-hosted

Browse Source 
- theme.css reescrito: paleta light (sky/emerald accents, slate neutrals),
  tokens de spacing/typography/radii/shadows, @font-face Inter +
  JetBrains Mono variable woff2 self-hosted.
- ops-shell: header blanco con nav active=accent-soft + status pill pastel.
- run-timeline: bubbles emerald-100 (user) / blue-100 (bot) sobre blanco.
- home-dashboard: helpers cssVar + withAlpha, 6 charts coordinados a
  paleta pastel (--chart-blue/green/purple/orange/pink/gray).
- 8 CRUDs (users, products, orders, conversations, aliases,
  recommendations, quantities, takeovers, settings, debug) migrados
  de hex hardcoded oscuros a var(--*).
- modal.js + toast.js refactor a vars con fallbacks; modal blanco
  con shadow-lg y soft icon backgrounds.
- test-panel: aliases :host apuntan a globals en vez de override dark.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Lucas Tettamanti
2026-05-02 13:56:48 -03:00
parent 675a449ce8
commit 0bf26f8eb5
22 changed files with 2355 additions and 655 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
public/components/orders-crud.js
View File

@@ -23,15 +23,15 @@ function statusLabel(status) {
function statusColor(status) {
const map = {
pending: "#f59e0b",
processing: "#3b82f6",
"on-hold": "#8b5cf6",
completed: "#22c55e",
cancelled: "#6b7280",
refunded: "#ec4899",
failed: "#ef4444",
pending: "var(--warn)",
processing: "var(--chart-blue)",
"on-hold": "var(--chart-purple)",
completed: "var(--ok)",
cancelled: "var(--text-muted)",
refunded: "var(--chart-pink)",
failed: "var(--err)",
};
return map[status] || "#8aa0b5";
return map[status] || "var(--text-muted)";
}
class OrdersCrud extends HTMLElement {
@@ -51,15 +51,15 @@ class OrdersCrud extends HTMLElement {
this.shadowRoot.innerHTML = `
<style>
:host {
--bg: #0b0f14;
--panel: #121823;
--muted: #8aa0b5;
--text: #e7eef7;
--line: #1e2a3a;
--blue: #1f6feb;
--green: #238636;
--red: #da3633;
--orange: #f59e0b;
--bg: var(--bg);
--panel: var(--panel);
--muted: var(--text-muted);
--text: var(--text);
--line: var(--border);
--blue: var(--accent);
--green: var(--ok);
--red: var(--err);
--orange: var(--warn);
}
* { box-sizing: border-box; font-family: system-ui, Segoe UI, Roboto, Arial; }
.container {
@@ -154,10 +154,10 @@ class OrdersCrud extends HTMLElement {
font-weight: 600;
text-transform: uppercase;
}
.badge.test { background: var(--orange); color: #000; }
.badge.test { background: var(--orange); color: var(--text); }
.badge.real { background: var(--green); color: #fff; }
.badge.whatsapp { background: #25d366; color: #fff; }
.badge.web { background: var(--muted); color: #000; }
.badge.whatsapp { background: var(--ok); color: #fff; }
.badge.web { background: var(--muted); color: var(--text); }
.status-badge {
padding: 3px 8px;
border-radius: 4px;
@@ -451,7 +451,7 @@ class OrdersCrud extends HTMLElement {
</div>
</td>
<td><span class="status-badge" style="background:${statusColor(order.status)}">${statusLabel(order.status)}</span></td>
<td><span class="badge" style="background:${order.is_delivery ? '#3b82f6' : '#8b5cf6'};color:#fff">${order.is_delivery ? 'DEL' : 'RET'}</span></td>
<td><span class="badge" style="background:${order.is_delivery ? 'var(--chart-blue)' : 'var(--chart-purple)'};color:#fff">${order.is_delivery ? 'DEL' : 'RET'}</span></td>
<td class="customer-name" title="${customerName}">${customerName}</td>
<td class="total">$${Number(order.total || 0).toLocaleString("es-AR")}</td>
<td>${formatDate(order.date_created)}</td>
@@ -558,7 +558,7 @@ class OrdersCrud extends HTMLElement {
<div class="detail-row">
<span class="detail-label">Método</span>
<span class="detail-value">
<span class="badge ${order.is_delivery ? 'delivery' : 'pickup'}" style="background:${order.is_delivery ? '#3b82f6' : '#8b5cf6'};color:#fff;padding:3px 8px;border-radius:4px;font-size:10px;">
<span class="badge ${order.is_delivery ? 'delivery' : 'pickup'}" style="background:${order.is_delivery ? 'var(--chart-blue)' : 'var(--chart-purple)'};color:#fff;padding:3px 8px;border-radius:4px;font-size:10px;">
${order.is_delivery ? 'DELIVERY' : 'RETIRO'}
</span>
${order.shipping_method ? `<span style="margin-left:8px;color:var(--muted);font-size:11px;">${order.shipping_method}</span>` : ''}