mirror of
https://github.com/Luchexx/wacrm.git
synced 2026-11-02 17:29:45 +00:00
77dfa4f165
The legal brief on third-party trademark use says: avoid the WhatsApp teal/green palette and any visual treatment that could read as a WhatsApp/Meta product. Emerald-500 was used as the primary brand colour across hero, CTAs, sidebar, charts, badges, and the favicon — close enough in hue to WhatsApp's signature green to muddy the line. Swapping to Tailwind violet (which matches the Hostinger brand purple #7c3aed) makes the visual identity unambiguously ours. Scope: - Mechanical Tailwind class swap: emerald-* → violet-* across src/. - src/app/globals.css: --primary, --ring, --sidebar-primary, --sidebar-ring, --chart-1 oklch tokens swapped from emerald (oklch 0.696 0.17 162) to Hostinger-aligned violet (oklch 0.526 0.247 293). - src/app/icon.tsx: favicon background #10b981 → #7c3aed. - src/app/opengraph-image.tsx: badge bg, accent text, gradient. - src/components/landing/hero.tsx + cta-banner.tsx: radial-gradient hex. - src/components/landing/mock/analytics-mock.tsx: marketing chart line. - src/components/dashboard/conversations-chart.tsx + response-time-chart.tsx: "Outgoing" series colour. Distinguishable from "Incoming" blue at a glance; we can revisit the chart pair later for stronger colourblind contrast (separate concern). - README.md: license badge colour parameter. Out of scope: - src/components/settings/tag-manager.tsx still offers "Emerald" as one of the user-pickable contact-tag colours alongside Blue / Yellow / Red / etc. — that's a user data choice, not a brand mark. Contrast check: white text on #7c3aed measures ~4.78:1 (WCAG AA passing for normal body text). Violet-400 (#a78bfa) on slate-950 measures ~10:1 for accent text, well clear of AA. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import type { AutomationTriggerType } from '@/types'
|
|
|
|
export interface TriggerMeta {
|
|
label: string
|
|
/** Tailwind classes for the Badge pill on the list row. */
|
|
pillClass: string
|
|
}
|
|
|
|
export const TRIGGER_META: Record<AutomationTriggerType, TriggerMeta> = {
|
|
new_message_received: {
|
|
label: 'New Message',
|
|
pillClass: 'border-blue-500/30 bg-blue-500/10 text-blue-300',
|
|
},
|
|
first_inbound_message: {
|
|
label: 'First Message from Contact',
|
|
pillClass: 'border-teal-500/30 bg-teal-500/10 text-teal-300',
|
|
},
|
|
keyword_match: {
|
|
label: 'Keyword Match',
|
|
pillClass: 'border-purple-500/30 bg-purple-500/10 text-purple-300',
|
|
},
|
|
new_contact_created: {
|
|
label: 'New Contact',
|
|
pillClass: 'border-violet-500/30 bg-violet-500/10 text-violet-300',
|
|
},
|
|
conversation_assigned: {
|
|
label: 'Conversation Assigned',
|
|
pillClass: 'border-cyan-500/30 bg-cyan-500/10 text-cyan-300',
|
|
},
|
|
tag_added: {
|
|
label: 'Tag Added',
|
|
pillClass: 'border-amber-500/30 bg-amber-500/10 text-amber-300',
|
|
},
|
|
time_based: {
|
|
label: 'Time-Based',
|
|
pillClass: 'border-slate-500/30 bg-slate-500/10 text-slate-300',
|
|
},
|
|
}
|
|
|
|
export function triggerMeta(t: AutomationTriggerType | string): TriggerMeta {
|
|
return (
|
|
TRIGGER_META[t as AutomationTriggerType] ?? {
|
|
label: t,
|
|
pillClass: 'border-slate-500/30 bg-slate-500/10 text-slate-300',
|
|
}
|
|
)
|
|
}
|
|
|
|
export function formatRelative(iso: string | null | undefined): string {
|
|
if (!iso) return 'never'
|
|
const then = new Date(iso).getTime()
|
|
if (Number.isNaN(then)) return 'never'
|
|
const diffSec = Math.round((Date.now() - then) / 1000)
|
|
if (diffSec < 60) return 'just now'
|
|
if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`
|
|
if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`
|
|
if (diffSec < 2_592_000) return `${Math.floor(diffSec / 86400)}d ago`
|
|
return new Date(iso).toLocaleDateString()
|
|
}
|