From 77dfa4f16570092e4aba53218b9690475080a83b Mon Sep 17 00:00:00 2001 From: Arnas Donauskas Date: Wed, 6 May 2026 11:57:12 +0300 Subject: [PATCH] chore: switch accent palette to Hostinger violet, drop emerald green MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- README.md | 2 +- src/app/(auth)/forgot-password/page.tsx | 12 ++++---- src/app/(auth)/login/page.tsx | 14 ++++----- src/app/(auth)/signup/page.tsx | 20 ++++++------- .../automations/[id]/edit/page.tsx | 4 +-- .../automations/[id]/logs/page.tsx | 6 ++-- src/app/(dashboard)/automations/page.tsx | 20 ++++++------- src/app/(dashboard)/broadcasts/[id]/page.tsx | 10 +++---- src/app/(dashboard)/broadcasts/new/page.tsx | 8 ++--- src/app/(dashboard)/broadcasts/page.tsx | 12 ++++---- src/app/(dashboard)/contacts/page.tsx | 4 +-- src/app/(dashboard)/dashboard-shell.tsx | 2 +- src/app/(dashboard)/pipelines/page.tsx | 10 +++---- src/app/(dashboard)/settings/page.tsx | 8 ++--- src/app/docs/[slug]/page.tsx | 2 +- src/app/docs/page.tsx | 4 +-- src/app/globals.css | 10 +++---- src/app/icon.tsx | 10 +++---- src/app/opengraph-image.tsx | 6 ++-- .../automations/automation-builder.tsx | 26 ++++++++-------- .../broadcasts/step1-choose-template.tsx | 6 ++-- .../broadcasts/step2-select-audience.tsx | 22 +++++++------- .../broadcasts/step3-personalize.tsx | 12 ++++---- .../broadcasts/step4-schedule-send.tsx | 20 ++++++------- .../contacts/contact-detail-view.tsx | 30 +++++++++---------- src/components/contacts/contact-form.tsx | 4 +-- src/components/contacts/import-modal.tsx | 8 ++--- src/components/dashboard/activity-feed.tsx | 4 +-- .../dashboard/conversations-chart.tsx | 12 ++++---- src/components/dashboard/metric-card.tsx | 2 +- src/components/dashboard/quick-actions.tsx | 2 +- .../dashboard/response-time-chart.tsx | 2 +- src/components/docs/shell.tsx | 4 +-- src/components/docs/sidebar.tsx | 2 +- src/components/inbox/contact-sidebar.tsx | 6 ++-- src/components/inbox/conversation-list.tsx | 12 ++++---- src/components/inbox/message-bubble.tsx | 6 ++-- src/components/inbox/message-composer.tsx | 4 +-- src/components/inbox/message-thread.tsx | 6 ++-- src/components/landing/cta-banner.tsx | 6 ++-- src/components/landing/faq.tsx | 2 +- src/components/landing/feature-spotlight.tsx | 4 +-- src/components/landing/features-grid.tsx | 2 +- src/components/landing/footer.tsx | 2 +- src/components/landing/hero.tsx | 14 ++++----- src/components/landing/how-it-works.tsx | 2 +- .../landing/mock/analytics-mock.tsx | 6 ++-- .../landing/mock/automation-mock.tsx | 4 +-- src/components/landing/mock/inbox-mock.tsx | 14 ++++----- src/components/landing/mock/pipeline-mock.tsx | 2 +- src/components/landing/nav.tsx | 4 +-- src/components/landing/open-source.tsx | 12 ++++---- src/components/landing/section.tsx | 2 +- src/components/layout/header.tsx | 2 +- src/components/layout/sidebar.tsx | 12 ++++---- src/components/pipelines/deal-card.tsx | 6 ++-- src/components/pipelines/deal-form.tsx | 14 ++++----- .../pipelines/pipeline-analytics.tsx | 4 +-- src/components/pipelines/pipeline-board.tsx | 2 +- .../pipelines/pipeline-settings.tsx | 2 +- src/components/settings/password-form.tsx | 2 +- src/components/settings/profile-form.tsx | 2 +- src/components/settings/sessions-card.tsx | 2 +- src/components/settings/tag-manager.tsx | 6 ++-- src/components/settings/template-manager.tsx | 8 ++--- src/components/settings/whatsapp-config.tsx | 18 +++++------ src/components/ui/switch.tsx | 4 +-- src/lib/automations/trigger-meta.ts | 2 +- src/lib/broadcast-status.ts | 6 ++-- src/lib/docs/content.ts | 4 +-- 70 files changed, 263 insertions(+), 263 deletions(-) diff --git a/README.md b/README.md index 3ca0d5d..232f1b1 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ > pipelines, broadcasts, and no-code automations. Fork it, brand it, > host it. -[![License: MIT](https://img.shields.io/badge/License-MIT-emerald.svg)](./LICENSE) +[![License: MIT](https://img.shields.io/badge/License-MIT-violet.svg)](./LICENSE) [![CI](https://github.com/ArnasDon/wacrm/actions/workflows/ci.yml/badge.svg)](https://github.com/ArnasDon/wacrm/actions/workflows/ci.yml) [![Next.js 16](https://img.shields.io/badge/Next.js-16-black?logo=nextdotjs)](https://nextjs.org) [![Supabase](https://img.shields.io/badge/Supabase-Postgres%20%2B%20Auth-3ecf8e?logo=supabase)](https://supabase.com) diff --git a/src/app/(auth)/forgot-password/page.tsx b/src/app/(auth)/forgot-password/page.tsx index f499478..ba4e1db 100644 --- a/src/app/(auth)/forgot-password/page.tsx +++ b/src/app/(auth)/forgot-password/page.tsx @@ -46,8 +46,8 @@ export default function ForgotPasswordPage() {
-
- +
+
Check your email @@ -77,8 +77,8 @@ export default function ForgotPasswordPage() {
-
- +
+
Reset password @@ -104,14 +104,14 @@ export default function ForgotPasswordPage() { value={email} onChange={(e) => setEmail(e.target.value)} required - className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20" + className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20" />
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx index 5f0f788..663067f 100644 --- a/src/app/(auth)/login/page.tsx +++ b/src/app/(auth)/login/page.tsx @@ -47,8 +47,8 @@ export default function LoginPage() {
-
- +
+
Welcome back @@ -74,7 +74,7 @@ export default function LoginPage() { value={email} onChange={(e) => setEmail(e.target.value)} required - className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20" + className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20" />
@@ -85,7 +85,7 @@ export default function LoginPage() { Forgot password? @@ -97,14 +97,14 @@ export default function LoginPage() { value={password} onChange={(e) => setPassword(e.target.value)} required - className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20" + className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20" />
@@ -114,7 +114,7 @@ export default function LoginPage() { Don't have an account?{" "} Create account diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx index 474572d..5d2aff4 100644 --- a/src/app/(auth)/signup/page.tsx +++ b/src/app/(auth)/signup/page.tsx @@ -66,8 +66,8 @@ export default function SignupPage() {
-
- +
+
Check your email @@ -97,8 +97,8 @@ export default function SignupPage() {
-
- +
+
Create account @@ -124,7 +124,7 @@ export default function SignupPage() { value={fullName} onChange={(e) => setFullName(e.target.value)} required - className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20" + className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20" />
@@ -139,7 +139,7 @@ export default function SignupPage() { value={email} onChange={(e) => setEmail(e.target.value)} required - className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20" + className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20" />
@@ -154,7 +154,7 @@ export default function SignupPage() { value={password} onChange={(e) => setPassword(e.target.value)} required - className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20" + className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20" />
@@ -169,14 +169,14 @@ export default function SignupPage() { value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} required - className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-emerald-500 focus-visible:ring-emerald-500/20" + className="border-slate-700 bg-slate-800 text-white placeholder:text-slate-500 focus-visible:border-violet-500 focus-visible:ring-violet-500/20" />
@@ -186,7 +186,7 @@ export default function SignupPage() { Already have an account?{" "} Sign in diff --git a/src/app/(dashboard)/automations/[id]/edit/page.tsx b/src/app/(dashboard)/automations/[id]/edit/page.tsx index 8eed3ef..3af1c1c 100644 --- a/src/app/(dashboard)/automations/[id]/edit/page.tsx +++ b/src/app/(dashboard)/automations/[id]/edit/page.tsx @@ -54,7 +54,7 @@ export default function EditAutomationPage({

{error}

@@ -65,7 +65,7 @@ export default function EditAutomationPage({ if (!initial) { return (
- +
) } diff --git a/src/app/(dashboard)/automations/[id]/logs/page.tsx b/src/app/(dashboard)/automations/[id]/logs/page.tsx index d5124ed..a0283f5 100644 --- a/src/app/(dashboard)/automations/[id]/logs/page.tsx +++ b/src/app/(dashboard)/automations/[id]/logs/page.tsx @@ -76,7 +76,7 @@ export default function AutomationLogsPage({ if (!automation || logs === null) { return (
- +
) } @@ -167,7 +167,7 @@ export default function AutomationLogsPage({ function StatusBadge({ status }: { status: AutomationLog["status"] }) { const classes = status === "success" - ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-300" + ? "border-violet-500/30 bg-violet-500/10 text-violet-300" : status === "partial" ? "border-amber-500/30 bg-amber-500/10 text-amber-300" : "border-red-500/30 bg-red-500/10 text-red-300" @@ -190,7 +190,7 @@ function StepRow({ result }: { result: AutomationLogStepResult }) { diff --git a/src/app/(dashboard)/automations/page.tsx b/src/app/(dashboard)/automations/page.tsx index 021ae6e..c60b252 100644 --- a/src/app/(dashboard)/automations/page.tsx +++ b/src/app/(dashboard)/automations/page.tsx @@ -146,7 +146,7 @@ export default function AutomationsPage() { if (automations === null) { return (
- +
) } @@ -164,7 +164,7 @@ export default function AutomationsPage() {
diff --git a/src/app/(dashboard)/broadcasts/[id]/page.tsx b/src/app/(dashboard)/broadcasts/[id]/page.tsx index ba011a4..8f069dc 100644 --- a/src/app/(dashboard)/broadcasts/[id]/page.tsx +++ b/src/app/(dashboard)/broadcasts/[id]/page.tsx @@ -246,7 +246,7 @@ export default function BroadcastDetailPage() { if (loading) { return (
- +
); } @@ -265,7 +265,7 @@ export default function BroadcastDetailPage() { const status = getBroadcastStatus(broadcast.status); const funnelSteps: FunnelStep[] = [ - { label: 'Sent', value: broadcast.sent_count, color: 'bg-emerald-500' }, + { label: 'Sent', value: broadcast.sent_count, color: 'bg-violet-500' }, { label: 'Delivered', value: broadcast.delivered_count, color: 'bg-teal-500' }, { label: 'Read', value: broadcast.read_count, color: 'bg-blue-500' }, { label: 'Replied', value: broadcast.replied_count, color: 'bg-indigo-500' }, @@ -361,7 +361,7 @@ export default function BroadcastDetailPage() { value={broadcast.sent_count} total={broadcast.total_recipients} icon={} - color="bg-emerald-500/10 text-emerald-400" + color="bg-violet-500/10 text-violet-400" /> setStatusFilter('all')} className={ - statusFilter === 'all' ? 'text-emerald-400' : 'text-slate-300' + statusFilter === 'all' ? 'text-violet-400' : 'text-slate-300' } > All statuses @@ -434,7 +434,7 @@ export default function BroadcastDetailPage() { onClick={() => setStatusFilter(s)} className={ statusFilter === s - ? 'text-emerald-400' + ? 'text-violet-400' : 'text-slate-300' } > diff --git a/src/app/(dashboard)/broadcasts/new/page.tsx b/src/app/(dashboard)/broadcasts/new/page.tsx index 14426f4..e42d844 100644 --- a/src/app/(dashboard)/broadcasts/new/page.tsx +++ b/src/app/(dashboard)/broadcasts/new/page.tsx @@ -140,9 +140,9 @@ export default function NewBroadcastPage() {
@@ -150,7 +150,7 @@ export default function NewBroadcastPage() {
{step.label} @@ -159,7 +159,7 @@ export default function NewBroadcastPage() { {index < steps.length - 1 && (
)} diff --git a/src/app/(dashboard)/broadcasts/page.tsx b/src/app/(dashboard)/broadcasts/page.tsx index 33c6126..5cc7267 100644 --- a/src/app/(dashboard)/broadcasts/page.tsx +++ b/src/app/(dashboard)/broadcasts/page.tsx @@ -35,7 +35,7 @@ function RateCell({ }: { value: number; total: number; - /** Tailwind bg class for the fill, e.g. "bg-emerald-500" */ + /** Tailwind bg class for the fill, e.g. "bg-violet-500" */ color: string; }) { const pct = percent(value, total); @@ -128,7 +128,7 @@ export default function BroadcastsPage() { if (loading) { return (
- +
); } @@ -154,7 +154,7 @@ export default function BroadcastsPage() { aria-label="Broadcast in progress" className="broadcast-indeterminate fixed inset-x-0 top-0 z-40 h-0.5 overflow-hidden bg-slate-800" > -
+