LaLeV/wacrm
1
0
Fork 0
mirror of https://github.com/Luchexx/wacrm.git synced 2026-11-02 09:19:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: switch accent palette to Hostinger violet, drop emerald green

Browse Source 
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>
This commit is contained in:
Arnas Donauskas 2026-05-06 11:57:12 +03:00
parent ea0af2fe3e
commit 77dfa4f165
No known key found for this signature in database
70 changed files with 263 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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)

12
src/app/(auth)/forgot-password/page.tsx
View File

@ -46,8 +46,8 @@ export default function ForgotPasswordPage() {
<div className="flex min-h-screen items-center justify-center bg-slate-950 px-4">
<Card className="w-full max-w-md border-slate-800 bg-slate-900">
<CardHeader className="items-center text-center">
<div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
<CheckCircle className="h-6 w-6 text-emerald-500" />
<div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
<CheckCircle className="h-6 w-6 text-violet-500" />
</div>
<CardTitle className="text-xl text-white">
Check your email
@ -77,8 +77,8 @@ export default function ForgotPasswordPage() {
<div className="flex min-h-screen items-center justify-center bg-slate-950 px-4">
<Card className="w-full max-w-md border-slate-800 bg-slate-900">
<CardHeader className="items-center text-center">
<div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
<MessageSquare className="h-6 w-6 text-emerald-500" />
<div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
<MessageSquare className="h-6 w-6 text-violet-500" />
</div>
<CardTitle className="text-xl text-white">Reset password</CardTitle>
<CardDescription className="text-slate-400">
@ -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"
/>
</div>
<Button
type="submit"
disabled={loading}
className="mt-2 h-10 w-full bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50"
className="mt-2 h-10 w-full bg-violet-600 text-white hover:bg-violet-500 disabled:opacity-50"
>
{loading ? "Sending..." : "Send reset link"}
</Button>

14
src/app/(auth)/login/page.tsx
View File

@ -47,8 +47,8 @@ export default function LoginPage() {
<div className="flex min-h-screen items-center justify-center bg-slate-950 px-4">
<Card className="w-full max-w-md border-slate-800 bg-slate-900">
<CardHeader className="items-center text-center">
<div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
<MessageSquare className="h-6 w-6 text-emerald-500" />
<div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
<MessageSquare className="h-6 w-6 text-violet-500" />
</div>
<CardTitle className="text-xl text-white">Welcome back</CardTitle>
<CardDescription className="text-slate-400">
@ -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"
/>
</div>
@ -85,7 +85,7 @@ export default function LoginPage() {
</Label>
<Link
href="/forgot-password"
className="text-sm text-emerald-500 hover:text-emerald-400"
className="text-sm text-violet-500 hover:text-violet-400"
>
Forgot password?
</Link>
@ -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"
/>
</div>
<Button
type="submit"
disabled={loading}
className="mt-2 h-10 w-full bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50"
className="mt-2 h-10 w-full bg-violet-600 text-white hover:bg-violet-500 disabled:opacity-50"
>
{loading ? "Signing in..." : "Sign in"}
</Button>
@ -114,7 +114,7 @@ export default function LoginPage() {
Don&apos;t have an account?{" "}
<Link
href="/signup"
className="text-emerald-500 hover:text-emerald-400"
className="text-violet-500 hover:text-violet-400"
>
Create account
</Link>

20
src/app/(auth)/signup/page.tsx
View File

@ -66,8 +66,8 @@ export default function SignupPage() {
<div className="flex min-h-screen items-center justify-center bg-slate-950 px-4">
<Card className="w-full max-w-md border-slate-800 bg-slate-900">
<CardHeader className="items-center text-center">
<div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
<CheckCircle className="h-6 w-6 text-emerald-500" />
<div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
<CheckCircle className="h-6 w-6 text-violet-500" />
</div>
<CardTitle className="text-xl text-white">
Check your email
@ -97,8 +97,8 @@ export default function SignupPage() {
<div className="flex min-h-screen items-center justify-center bg-slate-950 px-4">
<Card className="w-full max-w-md border-slate-800 bg-slate-900">
<CardHeader className="items-center text-center">
<div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
<MessageSquare className="h-6 w-6 text-emerald-500" />
<div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
<MessageSquare className="h-6 w-6 text-violet-500" />
</div>
<CardTitle className="text-xl text-white">Create account</CardTitle>
<CardDescription className="text-slate-400">
@ -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"
/>
</div>
@ -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"
/>
</div>
@ -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"
/>
</div>
@ -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"
/>
</div>
<Button
type="submit"
disabled={loading}
className="mt-2 h-10 w-full bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50"
className="mt-2 h-10 w-full bg-violet-600 text-white hover:bg-violet-500 disabled:opacity-50"
>
{loading ? "Creating account..." : "Create account"}
</Button>
@ -186,7 +186,7 @@ export default function SignupPage() {
Already have an account?{" "}
<Link
href="/login"
className="text-emerald-500 hover:text-emerald-400"
className="text-violet-500 hover:text-violet-400"
>
Sign in
</Link>

4
src/app/(dashboard)/automations/[id]/edit/page.tsx
View File

@ -54,7 +54,7 @@ export default function EditAutomationPage({
<p className="text-sm text-red-400">{error}</p>
<button
onClick={() => router.push("/automations")}
className="text-sm text-emerald-400 hover:text-emerald-300"
className="text-sm text-violet-400 hover:text-violet-300"
>
Back to Automations
</button>
@ -65,7 +65,7 @@ export default function EditAutomationPage({
if (!initial) {
return (
<div className="flex h-screen items-center justify-center">
<Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
<Loader2 className="h-6 w-6 animate-spin text-violet-500" />
</div>
)
}

6
src/app/(dashboard)/automations/[id]/logs/page.tsx
View File

@ -76,7 +76,7 @@ export default function AutomationLogsPage({
if (!automation || logs === null) {
return (
<div className="flex h-64 items-center justify-center">
<Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
<Loader2 className="h-6 w-6 animate-spin text-violet-500" />
</div>
)
}
@ -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 }) {
<span
className={cn(
"mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full",
ok ? "bg-emerald-500/20 text-emerald-400" : "bg-red-500/20 text-red-400",
ok ? "bg-violet-500/20 text-violet-400" : "bg-red-500/20 text-red-400",
)}
aria-hidden
>

20
src/app/(dashboard)/automations/page.tsx
View File

@ -146,7 +146,7 @@ export default function AutomationsPage() {
if (automations === null) {
return (
<div className="flex h-64 items-center justify-center">
<Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
<Loader2 className="h-6 w-6 animate-spin text-violet-500" />
</div>
)
}
@ -164,7 +164,7 @@ export default function AutomationsPage() {
</div>
<Button
onClick={() => router.push("/automations/new")}
className="bg-emerald-600 text-white hover:bg-emerald-700"
className="bg-violet-600 text-white hover:bg-violet-700"
>
<Plus className="h-4 w-4" />
Create Automation
@ -182,9 +182,9 @@ export default function AutomationsPage() {
<button
key={slug}
onClick={() => startFromTemplate(slug)}
className="group flex flex-col items-start rounded-xl border border-slate-800 bg-slate-900 p-4 text-left transition-colors hover:border-emerald-500/50 hover:bg-slate-900/80"
className="group flex flex-col items-start rounded-xl border border-slate-800 bg-slate-900 p-4 text-left transition-colors hover:border-violet-500/50 hover:bg-slate-900/80"
>
<div className="mb-3 flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-400 group-hover:bg-emerald-500/15">
<div className="mb-3 flex h-9 w-9 items-center justify-center rounded-lg bg-violet-500/10 text-violet-400 group-hover:bg-violet-500/15">
<Icon className="h-5 w-5" />
</div>
<div className="text-sm font-semibold text-white">{t.name}</div>
@ -198,8 +198,8 @@ export default function AutomationsPage() {
{automations.length === 0 ? (
<div className="flex h-48 flex-col items-center justify-center rounded-xl border border-dashed border-slate-800 bg-slate-900/40">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10">
<Zap className="h-6 w-6 text-emerald-500" />
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/10">
<Zap className="h-6 w-6 text-violet-500" />
</div>
<p className="mt-3 text-sm font-medium text-white">No automations yet</p>
<p className="mt-1 text-xs text-slate-400">
@ -275,10 +275,10 @@ function AutomationCard({
<li className="rounded-xl border border-slate-800 bg-slate-900 transition-colors hover:border-slate-700">
<div className="flex items-center gap-4 p-4">
<div
className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-emerald-500/10"
className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-violet-500/10"
aria-hidden
>
<Zap className="h-5 w-5 text-emerald-400" />
<Zap className="h-5 w-5 text-violet-400" />
</div>
<button
@ -292,8 +292,8 @@ function AutomationCard({
</span>
{automation.is_active && (
<span className="relative flex h-2 w-2" aria-label="active">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-violet-400 opacity-75" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-violet-500" />
</span>
)}
</div>

10
src/app/(dashboard)/broadcasts/[id]/page.tsx
View File

@ -246,7 +246,7 @@ export default function BroadcastDetailPage() {
if (loading) {
return (
<div className="flex h-64 items-center justify-center">
<Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
<Loader2 className="h-6 w-6 animate-spin text-violet-500" />
</div>
);
}
@ -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={<Send className="h-4 w-4" />}
color="bg-emerald-500/10 text-emerald-400"
color="bg-violet-500/10 text-violet-400"
/>
<StatCard
label="Delivered"
@ -423,7 +423,7 @@ export default function BroadcastDetailPage() {
<DropdownMenuItem
onClick={() => 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'
}
>

8
src/app/(dashboard)/broadcasts/new/page.tsx
View File

@ -140,9 +140,9 @@ export default function NewBroadcastPage() {
<div
className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium transition-all ${
isCompleted
? 'bg-emerald-500 text-white'
? 'bg-violet-500 text-white'
: isActive
? 'border-2 border-emerald-500 bg-emerald-500/10 text-emerald-400'
? 'border-2 border-violet-500 bg-violet-500/10 text-violet-400'
: 'border border-slate-700 bg-slate-800 text-slate-500'
}`}
>
@ -150,7 +150,7 @@ export default function NewBroadcastPage() {
</div>
<span
className={`hidden text-sm font-medium sm:block ${
isActive ? 'text-white' : isCompleted ? 'text-emerald-400' : 'text-slate-500'
isActive ? 'text-white' : isCompleted ? 'text-violet-400' : 'text-slate-500'
}`}
>
{step.label}
@ -159,7 +159,7 @@ export default function NewBroadcastPage() {
{index < steps.length - 1 && (
<div
className={`mx-3 h-px flex-1 ${
index < currentStep ? 'bg-emerald-500' : 'bg-slate-800'
index < currentStep ? 'bg-violet-500' : 'bg-slate-800'
}`}
/>
)}

12
src/app/(dashboard)/broadcasts/page.tsx
View File

@ -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 (
<div className="flex h-64 items-center justify-center">
<Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
<Loader2 className="h-6 w-6 animate-spin text-violet-500" />
</div>
);
}
@ -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"
>
<div className="broadcast-indeterminate-bar h-0.5 bg-emerald-500" />
<div className="broadcast-indeterminate-bar h-0.5 bg-violet-500" />
<style jsx>{`
.broadcast-indeterminate-bar {
width: 33%;
@ -183,7 +183,7 @@ export default function BroadcastsPage() {
</div>
<Button
onClick={() => router.push('/broadcasts/new')}
className="bg-emerald-600 text-white hover:bg-emerald-700"
className="bg-violet-600 text-white hover:bg-violet-700"
>
<Plus className="h-4 w-4" />
New Broadcast
@ -199,7 +199,7 @@ export default function BroadcastsPage() {
</p>
<Button
onClick={() => router.push('/broadcasts/new')}
className="mt-4 bg-emerald-600 text-white hover:bg-emerald-700"
className="mt-4 bg-violet-600 text-white hover:bg-violet-700"
>
<Plus className="h-4 w-4" />
New Broadcast
@ -243,7 +243,7 @@ export default function BroadcastsPage() {
<RateCell
value={broadcast.delivered_count}
total={broadcast.total_recipients}
color="bg-emerald-500"
color="bg-violet-500"
/>
</TableCell>
<TableCell className="hidden lg:table-cell">

4
src/app/(dashboard)/contacts/page.tsx
View File

@ -226,7 +226,7 @@ export default function ContactsPage() {
</Button>
<Button
onClick={openAddForm}
className="bg-emerald-600 hover:bg-emerald-700 text-white"
className="bg-violet-600 hover:bg-violet-700 text-white"
>
<Plus className="size-4" />
Add Contact
@ -269,7 +269,7 @@ export default function ContactsPage() {
<TableRow className="border-slate-800">
<TableCell colSpan={7} className="text-center py-12">
<div className="flex flex-col items-center gap-2">
<Loader2 className="size-6 animate-spin text-emerald-500" />
<Loader2 className="size-6 animate-spin text-violet-500" />
<p className="text-sm text-slate-500">Loading contacts...</p>
</div>
</TableCell>

2
src/app/(dashboard)/dashboard-shell.tsx
View File

@ -29,7 +29,7 @@ function DashboardShellInner({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen items-center justify-center bg-slate-950">
<div className="flex flex-col items-center gap-3">
<div className="h-8 w-8 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
<div className="h-8 w-8 animate-spin rounded-full border-2 border-violet-500 border-t-transparent" />
<p className="text-sm text-slate-400">Loading...</p>
</div>
</div>

10
src/app/(dashboard)/pipelines/page.tsx
View File

@ -302,7 +302,7 @@ export default function PipelinesPage() {
<DropdownMenuTrigger
className="inline-flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-white hover:bg-slate-800 transition-colors data-[popup-open]:bg-slate-800"
>
<GitBranch className="h-4 w-4 text-emerald-500" />
<GitBranch className="h-4 w-4 text-violet-500" />
<span className="font-semibold">
{selectedPipeline?.name ?? "Select Pipeline"}
</span>
@ -323,7 +323,7 @@ export default function PipelinesPage() {
onClick={() => setSelectedPipelineId(p.id)}
className={
p.id === selectedPipelineId
? "text-emerald-400"
? "text-violet-400"
: "text-slate-300"
}
>
@ -357,7 +357,7 @@ export default function PipelinesPage() {
<Button
onClick={() => handleAddDeal()}
disabled={!selectedPipelineId || stages.length === 0}
className="bg-emerald-600 text-white hover:bg-emerald-700"
className="bg-violet-600 text-white hover:bg-violet-700"
>
<Plus className="mr-1 h-4 w-4" />
Add Deal
@ -377,7 +377,7 @@ export default function PipelinesPage() {
</p>
<Button
onClick={() => setNewPipelineOpen(true)}
className="mt-4 bg-emerald-600 text-white hover:bg-emerald-700"
className="mt-4 bg-violet-600 text-white hover:bg-violet-700"
>
<Plus className="mr-1 h-4 w-4" />
Create Pipeline
@ -428,7 +428,7 @@ export default function PipelinesPage() {
<Button
onClick={handleCreatePipeline}
disabled={creating || !newPipelineName.trim()}
className="bg-emerald-600 text-white hover:bg-emerald-700"
className="bg-violet-600 text-white hover:bg-violet-700"
>
{creating ? "Creating..." : "Create Pipeline"}
</Button>

8
src/app/(dashboard)/settings/page.tsx
View File

@ -48,28 +48,28 @@ export default function SettingsPage() {
<TabsList className="bg-slate-900 border border-slate-700">
<TabsTrigger
value="profile"
className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
>
<User className="size-4" />
Profile
</TabsTrigger>
<TabsTrigger
value="whatsapp"
className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
>
<Settings className="size-4" />
WhatsApp Config
</TabsTrigger>
<TabsTrigger
value="templates"
className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
>
<MessageSquare className="size-4" />
Templates
</TabsTrigger>
<TabsTrigger
value="tags"
className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
>
<Tag className="size-4" />
Tags

2
src/app/docs/[slug]/page.tsx
View File

@ -37,7 +37,7 @@ export default async function DocPage({ params }: DocPageProps) {
return (
<article className="mx-auto w-full max-w-3xl">
<p className="text-xs font-semibold uppercase tracking-wider text-emerald-400">
<p className="text-xs font-semibold uppercase tracking-wider text-violet-400">
{doc.section}
</p>
<div

4
src/app/docs/page.tsx
View File

@ -12,7 +12,7 @@ export default async function DocsIndexPage() {
return (
<article className="mx-auto w-full max-w-3xl">
<p className="text-xs font-semibold uppercase tracking-wider text-emerald-400">
<p className="text-xs font-semibold uppercase tracking-wider text-violet-400">
Documentation
</p>
<h1 className="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">
@ -45,7 +45,7 @@ export default async function DocsIndexPage() {
{p.description}
</p>
)}
<span className="mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-emerald-400 transition-colors group-hover:text-emerald-300">
<span className="mt-4 inline-flex items-center gap-1.5 text-xs font-medium text-violet-400 transition-colors group-hover:text-violet-300">
Read
<ArrowRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
</span>

10
src/app/globals.css
View File

@ -55,7 +55,7 @@
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.18 0.01 260);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.696 0.17 162);
--primary: oklch(0.526 0.247 293);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.22 0.01 260);
--secondary-foreground: oklch(0.985 0 0);
@ -66,8 +66,8 @@
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.28 0.01 260);
--input: oklch(0.28 0.01 260);
--ring: oklch(0.696 0.17 162);
--chart-1: oklch(0.696 0.17 162);
--ring: oklch(0.526 0.247 293);
--chart-1: oklch(0.526 0.247 293);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
@ -75,12 +75,12 @@
--radius: 0.625rem;
--sidebar: oklch(0.16 0.01 260);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.696 0.17 162);
--sidebar-primary: oklch(0.526 0.247 293);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.22 0.01 260);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.28 0.01 260);
--sidebar-ring: oklch(0.696 0.17 162);
--sidebar-ring: oklch(0.526 0.247 293);
}
@layer base {

10
src/app/icon.tsx
View File

@ -1,9 +1,9 @@
import { ImageResponse } from "next/og";
// Replaces the default Next.js favicon with the WaCRM mark — emerald
// rounded square + white chat-bubble glyph — matching the sidebar
// logo in `src/components/layout/sidebar.tsx`. Next.js renders this
// at build time and auto-injects <link rel="icon"> into <head>.
// Replaces the default Next.js favicon with the brand mark — Hostinger
// violet rounded square + white chat-square glyph — matching the
// sidebar logo in `src/components/layout/sidebar.tsx`. Next.js renders
// this at build time and auto-injects <link rel="icon"> into <head>.
//
// This route takes precedence over src/app/favicon.ico, which is the
// Next.js default and can stay on disk harmlessly (or be removed).
@ -22,7 +22,7 @@ export default function Icon() {
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#10b981", // emerald-500
background: "#7c3aed", // violet-600 (Hostinger-aligned purple)
borderRadius: 6,
}}
>

6
src/app/opengraph-image.tsx
View File

@ -38,7 +38,7 @@ export default async function Image() {
justifyContent: 'center',
padding: 80,
background:
'linear-gradient(135deg, #020617 0%, #0f172a 55%, #064e3b 100%)',
'linear-gradient(135deg, #020617 0%, #0f172a 55%, #2e1065 100%)',
color: 'white',
fontFamily: 'sans-serif',
}}
@ -49,7 +49,7 @@ export default async function Image() {
width: 64,
height: 64,
borderRadius: 14,
background: '#10b981',
background: '#7c3aed',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@ -78,7 +78,7 @@ export default async function Image() {
}}
>
<span>Run your WhatsApp business from&nbsp;</span>
<span style={{ color: '#34d399' }}>one inbox.</span>
<span style={{ color: '#a78bfa' }}>one inbox.</span>
</div>
<div

26
src/components/automations/automation-builder.tsx
View File

@ -77,17 +77,17 @@ interface StepMeta {
}
const STEP_META: Record<AutomationStepType, StepMeta> = {
send_message: { label: "Send Message", icon: MessageSquare, border: "border-l-emerald-500" },
send_template: { label: "Send Template", icon: FileText, border: "border-l-emerald-500" },
add_tag: { label: "Add Tag", icon: Tag, border: "border-l-emerald-500" },
remove_tag: { label: "Remove Tag", icon: TagIcon, border: "border-l-emerald-500" },
assign_conversation: { label: "Assign Conversation", icon: UserCheck, border: "border-l-emerald-500" },
update_contact_field: { label: "Update Contact Field", icon: PencilLine, border: "border-l-emerald-500" },
create_deal: { label: "Create Deal", icon: Briefcase, border: "border-l-emerald-500" },
send_message: { label: "Send Message", icon: MessageSquare, border: "border-l-violet-500" },
send_template: { label: "Send Template", icon: FileText, border: "border-l-violet-500" },
add_tag: { label: "Add Tag", icon: Tag, border: "border-l-violet-500" },
remove_tag: { label: "Remove Tag", icon: TagIcon, border: "border-l-violet-500" },
assign_conversation: { label: "Assign Conversation", icon: UserCheck, border: "border-l-violet-500" },
update_contact_field: { label: "Update Contact Field", icon: PencilLine, border: "border-l-violet-500" },
create_deal: { label: "Create Deal", icon: Briefcase, border: "border-l-violet-500" },
wait: { label: "Wait", icon: Hourglass, border: "border-l-slate-500" },
condition: { label: "Condition (If/Else)", icon: GitBranch, border: "border-l-amber-500" },
send_webhook: { label: "Send Webhook", icon: Webhook, border: "border-l-emerald-500" },
close_conversation: { label: "Close Conversation", icon: CircleSlash, border: "border-l-emerald-500" },
send_webhook: { label: "Send Webhook", icon: Webhook, border: "border-l-violet-500" },
close_conversation: { label: "Close Conversation", icon: CircleSlash, border: "border-l-violet-500" },
}
const ADDABLE_STEPS: AutomationStepType[] = [
@ -275,7 +275,7 @@ export function AutomationBuilder({ initial }: { initial: BuilderInitial }) {
<Button
onClick={save}
disabled={saving}
className="bg-emerald-600 text-white hover:bg-emerald-700"
className="bg-violet-600 text-white hover:bg-violet-700"
>
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
{isEditing ? "Save" : "Save Draft"}
@ -356,7 +356,7 @@ function TriggerCard({
<select
value={type}
onChange={(e) => onTypeChange(e.target.value as AutomationTriggerType)}
className="w-full rounded-md border border-slate-700 bg-slate-800 px-2 py-1.5 text-sm text-white focus:border-emerald-500 focus:outline-none"
className="w-full rounded-md border border-slate-700 bg-slate-800 px-2 py-1.5 text-sm text-white focus:border-violet-500 focus:outline-none"
>
{TRIGGER_OPTIONS.map((o) => (
<option key={o.value} value={o.value}>
@ -637,7 +637,7 @@ function ConditionBranches({
// cram each branch to ~170px which is too narrow for the nested
// cards. Two-column grid returns on sm+.
<div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
<BranchColumn label="Yes" color="text-emerald-400">
<BranchColumn label="Yes" color="text-violet-400">
<StepList {...props} steps={yes} parentPath={yesPath} />
</BranchColumn>
<BranchColumn label="No" color="text-rose-400">
@ -670,7 +670,7 @@ function AddButton({ onPick }: { onPick: (t: AutomationStepType) => void }) {
<div className="h-4 w-[2px] bg-slate-700" aria-hidden />
<DropdownMenu>
<DropdownMenuTrigger
className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-dashed border-slate-700 bg-slate-950 text-slate-400 transition-colors hover:border-emerald-500 hover:bg-emerald-500/10 hover:text-emerald-400 data-[popup-open]:border-emerald-500 data-[popup-open]:bg-emerald-500/20 data-[popup-open]:text-emerald-400"
className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-dashed border-slate-700 bg-slate-950 text-slate-400 transition-colors hover:border-violet-500 hover:bg-violet-500/10 hover:text-violet-400 data-[popup-open]:border-violet-500 data-[popup-open]:bg-violet-500/20 data-[popup-open]:text-violet-400"
aria-label="Add step"
>
<Plus className="h-4 w-4" />

6
src/components/broadcasts/step1-choose-template.tsx
View File

@ -48,7 +48,7 @@ export function Step1ChooseTemplate({ selectedTemplate, onSelect, onNext, onBack
if (loading) {
return (
<div className="flex h-64 items-center justify-center">
<Loader2 className="h-6 w-6 animate-spin text-emerald-500" />
<Loader2 className="h-6 w-6 animate-spin text-violet-500" />
</div>
);
}
@ -88,7 +88,7 @@ export function Step1ChooseTemplate({ selectedTemplate, onSelect, onNext, onBack
onClick={() => onSelect(template)}
className={`flex flex-col gap-3 rounded-xl border p-4 text-left transition-all ${
isSelected
? 'border-emerald-500 bg-emerald-500/5 ring-1 ring-emerald-500/30'
? 'border-violet-500 bg-violet-500/5 ring-1 ring-violet-500/30'
: 'border-slate-800 bg-slate-900/50 hover:border-slate-700 hover:bg-slate-900'
}`}
>
@ -123,7 +123,7 @@ export function Step1ChooseTemplate({ selectedTemplate, onSelect, onNext, onBack
<Button
onClick={onNext}
disabled={!selectedTemplate}
className="bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50"
className="bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
>
Next
<ArrowRight className="h-4 w-4" />

22
src/components/broadcasts/step2-select-audience.tsx
View File

@ -279,14 +279,14 @@ export function Step2SelectAudience({
}
className={`flex items-start gap-3 rounded-xl border p-4 text-left transition-all ${
isSelected
? 'border-emerald-500 bg-emerald-500/5 ring-1 ring-emerald-500/30'
? 'border-violet-500 bg-violet-500/5 ring-1 ring-violet-500/30'
: 'border-slate-800 bg-slate-900/50 hover:border-slate-700'
}`}
>
<div
className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
isSelected
? 'bg-emerald-500/10 text-emerald-400'
? 'bg-violet-500/10 text-violet-400'
: 'bg-slate-800 text-slate-400'
}`}
>
@ -307,7 +307,7 @@ export function Step2SelectAudience({
<div className="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
<p className="mb-3 text-sm font-medium text-white">Select Tags</p>
{loadingTags ? (
<Loader2 className="h-5 w-5 animate-spin text-emerald-500" />
<Loader2 className="h-5 w-5 animate-spin text-violet-500" />
) : tags.length === 0 ? (
<p className="text-xs text-slate-400">
No tags found. Create tags in Settings.
@ -322,7 +322,7 @@ export function Step2SelectAudience({
onClick={() => toggleTag(tag.id)}
className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium transition-all ${
isSelected
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
? 'border-violet-500/30 bg-violet-500/10 text-violet-400'
: 'border-slate-700 bg-slate-800 text-slate-300 hover:border-slate-600'
}`}
>
@ -343,7 +343,7 @@ export function Step2SelectAudience({
<div className="space-y-3 rounded-xl border border-slate-800 bg-slate-900/50 p-4">
<p className="text-sm font-medium text-white">Custom Field Filter</p>
{loadingFields ? (
<Loader2 className="h-5 w-5 animate-spin text-emerald-500" />
<Loader2 className="h-5 w-5 animate-spin text-violet-500" />
) : customFields.length === 0 ? (
<p className="text-xs text-slate-400">
No custom fields defined. Create one in Settings → Custom Fields.
@ -353,7 +353,7 @@ export function Step2SelectAudience({
<select
value={audience.customField?.fieldId ?? ''}
onChange={(e) => updateCustomField({ fieldId: e.target.value })}
className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
>
<option value="">Select field…</option>
{customFields.map((f) => (
@ -369,7 +369,7 @@ export function Step2SelectAudience({
operator: e.target.value as CustomFieldOperator,
})
}
className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
>
{OPERATOR_OPTIONS.map((op) => (
<option key={op.value} value={op.value}>
@ -382,7 +382,7 @@ export function Step2SelectAudience({
value={audience.customField?.value ?? ''}
onChange={(e) => updateCustomField({ value: e.target.value })}
placeholder="Value"
className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none placeholder:text-slate-500 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
className="h-9 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none placeholder:text-slate-500 focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
/>
</div>
)}
@ -431,12 +431,12 @@ export function Step2SelectAudience({
<p className="mb-2 text-sm font-medium text-white">Audience Summary</p>
{loadingCount ? (
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin text-emerald-500" />
<Loader2 className="h-4 w-4 animate-spin text-violet-500" />
<span className="text-xs text-slate-400">Calculating…</span>
</div>
) : estimatedCount !== null ? (
<div className="flex items-center gap-2">
<Users className="h-4 w-4 text-emerald-400" />
<Users className="h-4 w-4 text-violet-400" />
<span className="text-sm text-white">
{estimatedCount.toLocaleString()}
</span>
@ -461,7 +461,7 @@ export function Step2SelectAudience({
<Button
onClick={onNext}
disabled={!isValid}
className="bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50"
className="bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
>
Next
<ArrowRight className="h-4 w-4" />

12
src/components/broadcasts/step3-personalize.tsx
View File

@ -211,7 +211,7 @@ export function Step3Personalize({
className="rounded-xl border border-slate-800 bg-slate-900/50 p-4"
>
<div className="mb-3 flex items-center gap-2">
<span className="inline-flex items-center rounded-md bg-emerald-500/10 px-2 py-0.5 text-xs font-mono font-medium text-emerald-400">
<span className="inline-flex items-center rounded-md bg-violet-500/10 px-2 py-0.5 text-xs font-mono font-medium text-violet-400">
{placeholder}
</span>
</div>
@ -313,16 +313,16 @@ export function Step3Personalize({
sees approximately what the recipient will see. */}
<div className="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
<div className="mb-3 flex items-center gap-2">
<Eye className="h-4 w-4 text-emerald-400" />
<Eye className="h-4 w-4 text-violet-400" />
<p className="text-sm font-medium text-white">Live Preview</p>
<span className="text-xs text-slate-500">({previewLabel})</span>
{loadingPreview && (
<Loader2 className="h-3.5 w-3.5 animate-spin text-emerald-500" />
<Loader2 className="h-3.5 w-3.5 animate-spin text-violet-500" />
)}
</div>
<div className="rounded-lg bg-[#0e1a12] p-3">
<div className="ml-auto max-w-[85%] rounded-lg bg-emerald-700/30 px-3 py-2 shadow-sm">
<p className="whitespace-pre-wrap text-sm text-emerald-50">
<div className="ml-auto max-w-[85%] rounded-lg bg-violet-700/30 px-3 py-2 shadow-sm">
<p className="whitespace-pre-wrap text-sm text-violet-50">
{previewText}
</p>
</div>
@ -351,7 +351,7 @@ export function Step3Personalize({
<Button
onClick={onNext}
disabled={unmappedKeys.length > 0}
className="bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50"
className="bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
>
Next
<ArrowRight className="h-4 w-4" />

20
src/components/broadcasts/step4-schedule-send.tsx
View File

@ -127,10 +127,10 @@ export function Step4ScheduleSend({
<p className="text-xs text-slate-400">Estimated Reach</p>
<div className="flex items-center gap-1.5">
{loadingReach ? (
<Loader2 className="h-3 w-3 animate-spin text-emerald-500" />
<Loader2 className="h-3 w-3 animate-spin text-violet-500" />
) : (
<>
<Users className="h-3.5 w-3.5 text-emerald-400" />
<Users className="h-3.5 w-3.5 text-violet-400" />
<p className="font-medium text-white">{estimatedReach.toLocaleString()}</p>
</>
)}
@ -151,11 +151,11 @@ export function Step4ScheduleSend({
onClick={() => setTiming('now')}
className={`flex items-start gap-3 rounded-xl border p-4 text-left transition-all ${
timing === 'now'
? 'border-emerald-500 bg-emerald-500/5 ring-1 ring-emerald-500/30'
? 'border-violet-500 bg-violet-500/5 ring-1 ring-violet-500/30'
: 'border-slate-800 bg-slate-900/50 hover:border-slate-700'
}`}
>
<Send className={`mt-0.5 h-4 w-4 ${timing === 'now' ? 'text-emerald-400' : 'text-slate-400'}`} />
<Send className={`mt-0.5 h-4 w-4 ${timing === 'now' ? 'text-violet-400' : 'text-slate-400'}`} />
<div>
<p className="text-sm font-medium text-white">Send Immediately</p>
<p className="mt-0.5 text-xs text-slate-400">Start sending right away</p>
@ -180,17 +180,17 @@ export function Step4ScheduleSend({
{/* Processing overlay */}
{isProcessing && (
<div className="rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4">
<div className="rounded-xl border border-violet-500/20 bg-violet-500/5 p-4">
<div className="mb-2 flex items-center justify-between">
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin text-emerald-500" />
<Loader2 className="h-4 w-4 animate-spin text-violet-500" />
<p className="text-sm font-medium text-white">Sending broadcast...</p>
</div>
<span className="text-xs font-medium text-emerald-400">{progress}%</span>
<span className="text-xs font-medium text-violet-400">{progress}%</span>
</div>
<div className="h-1.5 w-full rounded-full bg-slate-800">
<div
className="h-1.5 rounded-full bg-emerald-500 transition-all duration-300"
className="h-1.5 rounded-full bg-violet-500 transition-all duration-300"
style={{ width: `${progress}%` }}
/>
</div>
@ -226,7 +226,7 @@ export function Step4ScheduleSend({
render={
<Button
disabled={!name.trim() || isProcessing}
className="bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50"
className="bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
/>
}
>
@ -257,7 +257,7 @@ export function Step4ScheduleSend({
setShowConfirm(false);
onSend();
}}
className="bg-emerald-600 text-white hover:bg-emerald-700"
className="bg-violet-600 text-white hover:bg-violet-700"
>
<Send className="h-4 w-4" />
Confirm & Send

30
src/components/contacts/contact-detail-view.tsx
View File

@ -331,7 +331,7 @@ export function ContactDetailView({
>
{loading || !contact ? (
<div className="flex items-center justify-center h-full">
<Loader2 className="size-6 animate-spin text-emerald-500" />
<Loader2 className="size-6 animate-spin text-violet-500" />
</div>
) : (
<div className="flex flex-col h-full">
@ -339,7 +339,7 @@ export function ContactDetailView({
<SheetHeader className="p-4 border-b border-slate-700/50">
<div className="flex items-center gap-3">
<Avatar className="size-12 bg-slate-800 border border-slate-700">
<AvatarFallback className="bg-emerald-500/10 text-emerald-400 text-sm font-medium">
<AvatarFallback className="bg-violet-500/10 text-violet-400 text-sm font-medium">
{getInitials(contact.name)}
</AvatarFallback>
</Avatar>
@ -353,12 +353,12 @@ export function ContactDetailView({
<div className="flex flex-wrap items-center gap-3 mt-1.5 text-xs text-slate-400">
<button
onClick={copyPhone}
className="flex items-center gap-1 hover:text-emerald-400 transition-colors cursor-pointer"
className="flex items-center gap-1 hover:text-violet-400 transition-colors cursor-pointer"
>
<Phone className="size-3" />
{contact.phone}
{copiedPhone ? (
<Check className="size-3 text-emerald-400" />
<Check className="size-3 text-violet-400" />
) : (
<Copy className="size-3" />
)}
@ -385,31 +385,31 @@ export function ContactDetailView({
<TabsList className="bg-slate-800/50 border-b border-slate-700 mx-4 mt-3">
<TabsTrigger
value="details"
className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
>
Details
</TabsTrigger>
<TabsTrigger
value="tags"
className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
>
Tags
</TabsTrigger>
<TabsTrigger
value="notes"
className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
>
Notes
</TabsTrigger>
<TabsTrigger
value="custom"
className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
>
Custom Fields
</TabsTrigger>
<TabsTrigger
value="deals"
className="data-active:bg-slate-800 data-active:text-emerald-400 text-slate-400"
className="data-active:bg-slate-800 data-active:text-violet-400 text-slate-400"
>
Deals
</TabsTrigger>
@ -455,7 +455,7 @@ export function ContactDetailView({
<Button
onClick={saveDetails}
disabled={savingDetails}
className="bg-emerald-600 hover:bg-emerald-700 text-white w-full"
className="bg-violet-600 hover:bg-violet-700 text-white w-full"
size="sm"
>
{savingDetails ? (
@ -489,7 +489,7 @@ export function ContactDetailView({
disabled={savingTags}
className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium transition-all cursor-pointer ${
selected
? 'ring-2 ring-emerald-500 ring-offset-1 ring-offset-slate-900'
? 'ring-2 ring-violet-500 ring-offset-1 ring-offset-slate-900'
: 'opacity-50 hover:opacity-80'
}`}
style={{
@ -519,7 +519,7 @@ export function ContactDetailView({
<Button
onClick={addNote}
disabled={!newNote.trim() || savingNote}
className="bg-emerald-600 hover:bg-emerald-700 text-white"
className="bg-violet-600 hover:bg-violet-700 text-white"
size="sm"
>
{savingNote ? (
@ -605,7 +605,7 @@ export function ContactDetailView({
<Button
onClick={saveCustomFields}
disabled={savingCustom}
className="bg-emerald-600 hover:bg-emerald-700 text-white w-full"
className="bg-violet-600 hover:bg-violet-700 text-white w-full"
size="sm"
>
{savingCustom ? (
@ -623,7 +623,7 @@ export function ContactDetailView({
<TabsContent value="deals" className="flex-1 overflow-y-auto px-4 py-3">
{loadingDeals ? (
<div className="flex items-center justify-center py-8">
<Loader2 className="size-5 animate-spin text-emerald-500" />
<Loader2 className="size-5 animate-spin text-violet-500" />
</div>
) : deals.length === 0 ? (
<p className="text-xs text-slate-500">No deals yet</p>
@ -663,7 +663,7 @@ export function ContactDetailView({
<span
className={
deal.status === 'won'
? 'text-emerald-400'
? 'text-violet-400'
: 'text-red-400'
}
>

4
src/components/contacts/contact-form.tsx
View File

@ -245,7 +245,7 @@ export function ContactForm({
onClick={() => toggleTag(tag.id)}
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors cursor-pointer ${
selected
? 'ring-2 ring-emerald-500 ring-offset-1 ring-offset-slate-900'
? 'ring-2 ring-violet-500 ring-offset-1 ring-offset-slate-900'
: 'opacity-60 hover:opacity-100'
}`}
style={{
@ -274,7 +274,7 @@ export function ContactForm({
<Button
type="submit"
disabled={saving}
className="bg-emerald-600 hover:bg-emerald-700 text-white"
className="bg-violet-600 hover:bg-violet-700 text-white"
>
{saving && <Loader2 className="size-4 animate-spin" />}
{isEdit ? 'Update' : 'Create'}

8
src/components/contacts/import-modal.tsx
View File

@ -196,11 +196,11 @@ export function ImportModal({ open, onOpenChange, onImported }: ImportModalProps
{/* Upload area */}
<div
onClick={() => fileInputRef.current?.click()}
className="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-slate-700 p-6 cursor-pointer hover:border-emerald-500/50 transition-colors"
className="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-slate-700 p-6 cursor-pointer hover:border-violet-500/50 transition-colors"
>
{file ? (
<>
<FileText className="size-8 text-emerald-400" />
<FileText className="size-8 text-violet-400" />
<p className="text-sm text-slate-300">{file.name}</p>
<p className="text-xs text-slate-500">
{parsedRows.length} row{parsedRows.length !== 1 ? 's' : ''} detected
@ -269,7 +269,7 @@ export function ImportModal({ open, onOpenChange, onImported }: ImportModalProps
<p className="text-sm font-medium text-white">Import Complete</p>
<div className="flex items-center gap-4">
{result.imported > 0 && (
<div className="flex items-center gap-1.5 text-emerald-400 text-sm">
<div className="flex items-center gap-1.5 text-violet-400 text-sm">
<CheckCircle className="size-4" />
{result.imported} imported
</div>
@ -299,7 +299,7 @@ export function ImportModal({ open, onOpenChange, onImported }: ImportModalProps
type="button"
disabled={parsedRows.length === 0 || importing}
onClick={handleImport}
className="bg-emerald-600 hover:bg-emerald-700 text-white"
className="bg-violet-600 hover:bg-violet-700 text-white"
>
{importing && <Loader2 className="size-4 animate-spin" />}
Import {parsedRows.length > 0 ? `${parsedRows.length} Contacts` : ''}

4
src/components/dashboard/activity-feed.tsx
View File

@ -32,7 +32,7 @@ interface KindTheme {
const KIND_THEME: Record<ActivityKind, KindTheme> = {
message: { icon: MessageSquare, badge: 'bg-blue-500/10 text-blue-400' },
contact: { icon: UserPlus, badge: 'bg-emerald-500/10 text-emerald-400' },
contact: { icon: UserPlus, badge: 'bg-violet-500/10 text-violet-400' },
deal: { icon: Briefcase, badge: 'bg-violet-500/10 text-violet-400' },
broadcast: { icon: Radio, badge: 'bg-amber-500/10 text-amber-400' },
automation: { icon: Zap, badge: 'bg-rose-500/10 text-rose-400' },
@ -59,7 +59,7 @@ export function ActivityFeed({ items, loading }: ActivityFeedProps) {
<h2 className="text-sm font-semibold text-white">Recent Activity</h2>
<Link
href="/inbox"
className="text-xs font-medium text-emerald-400 hover:text-emerald-300"
className="text-xs font-medium text-violet-400 hover:text-violet-300"
>
View all →
</Link>

12
src/components/dashboard/conversations-chart.tsx
View File

@ -87,7 +87,7 @@ export function ConversationsChart({ series, loading, range, onRangeChange }: Co
<footer className="flex items-center gap-4 border-t border-slate-800 px-5 py-3 text-xs text-slate-400">
<LegendDot color="#3b82f6" label="Incoming" />
<LegendDot color="#10b981" label="Outgoing" />
<LegendDot color="#7c3aed" label="Outgoing" />
</footer>
</section>
)
@ -238,11 +238,11 @@ function LineSvg({
) : null,
)}
{/* Outgoing polyline (emerald) */}
{/* Outgoing polyline (violet) */}
<path
d={outgoingPath}
fill="none"
stroke="#10b981"
stroke="#7c3aed"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
@ -269,7 +269,7 @@ function LineSvg({
strokeDasharray="3 3"
/>
<circle cx={hoverX} cy={yFor(data[hover.idx].incoming)} r={3.5} fill="#3b82f6" />
<circle cx={hoverX} cy={yFor(data[hover.idx].outgoing)} r={3.5} fill="#10b981" />
<circle cx={hoverX} cy={yFor(data[hover.idx].outgoing)} r={3.5} fill="#7c3aed" />
</g>
)}
</svg>
@ -289,8 +289,8 @@ function LineSvg({
<span className="inline-block h-1.5 w-1.5 rounded-full bg-blue-500" />
{hovered.incoming} incoming
</span>
<span className="flex items-center gap-1.5 text-emerald-300">
<span className="inline-block h-1.5 w-1.5 rounded-full bg-emerald-500" />
<span className="flex items-center gap-1.5 text-violet-300">
<span className="inline-block h-1.5 w-1.5 rounded-full bg-violet-500" />
{hovered.outgoing} outgoing
</span>
</div>

2
src/components/dashboard/metric-card.tsx
View File

@ -43,7 +43,7 @@ export function MetricCard({ title, value, icon: Icon, delta, subtitle }: Metric
function DeltaRow({ sign, label }: { sign: number; label: string }) {
const tone =
sign > 0
? 'text-emerald-400'
? 'text-violet-400'
: sign < 0
? 'text-red-400'
: 'text-slate-500'

2
src/components/dashboard/quick-actions.tsx
View File

@ -16,7 +16,7 @@ interface Action {
}
const ACTIONS: Action[] = [
{ label: 'New Contact', href: '/contacts', icon: UserPlus, tint: 'text-emerald-400' },
{ label: 'New Contact', href: '/contacts', icon: UserPlus, tint: 'text-violet-400' },
{ label: 'New Deal', href: '/pipelines', icon: Briefcase, tint: 'text-blue-400' },
{ label: 'New Broadcast', href: '/broadcasts/new', icon: Radio, tint: 'text-amber-400' },
{ label: 'New Automation', href: '/automations/new', icon: Zap, tint: 'text-violet-400' },

2
src/components/dashboard/response-time-chart.tsx
View File

@ -158,7 +158,7 @@ function Bars({
width={barW}
height={muted ? 2 : Math.max(1, h)}
rx={4}
fill={muted ? 'rgb(51 65 85)' : '#10b981'}
fill={muted ? 'rgb(51 65 85)' : '#7c3aed'}
opacity={muted ? 0.6 : 1}
>
<title>

4
src/components/docs/shell.tsx
View File

@ -33,7 +33,7 @@ export function DocsShell({ pages, children }: DocsShellProps) {
{mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
</button>
<Link href="/" className="flex items-center gap-2" aria-label="WaCRM home">
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500">
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500">
<MessageSquare className="h-4 w-4 text-white" />
</span>
<span className="text-lg font-semibold text-white">WaCRM</span>
@ -61,7 +61,7 @@ export function DocsShell({ pages, children }: DocsShellProps) {
</a>
<Link
href="/signup"
className="inline-flex items-center justify-center rounded-lg bg-emerald-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-emerald-400"
className="inline-flex items-center justify-center rounded-lg bg-violet-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-violet-400"
>
Get started
</Link>

2
src/components/docs/sidebar.tsx
View File

@ -51,7 +51,7 @@ export function DocsSidebar({ pages, onNavigate }: DocsSidebarProps) {
className={cn(
'block rounded-md px-3 py-1.5 transition-colors',
active
? 'bg-emerald-500/10 text-emerald-300'
? 'bg-violet-500/10 text-violet-300'
: 'text-slate-400 hover:bg-slate-800/60 hover:text-white',
)}
>

6
src/components/inbox/contact-sidebar.tsx
View File

@ -156,7 +156,7 @@ export function ContactSidebar({ contact }: ContactSidebarProps) {
<Phone className="h-4 w-4 text-slate-500" />
<span className="flex-1 text-left">{contact.phone}</span>
{copied ? (
<Check className="h-3 w-3 text-emerald-400" />
<Check className="h-3 w-3 text-violet-400" />
) : (
<Copy className="h-3 w-3 text-slate-600" />
)}
@ -259,11 +259,11 @@ export function ContactSidebar({ contact }: ContactSidebarProps) {
onChange={(e) => setNewNote(e.target.value)}
placeholder="Add a note..."
rows={2}
className="flex-1 resize-none rounded-lg border border-slate-700 bg-slate-800 px-3 py-2 text-xs text-white placeholder-slate-500 outline-none focus:border-emerald-500/50"
className="flex-1 resize-none rounded-lg border border-slate-700 bg-slate-800 px-3 py-2 text-xs text-white placeholder-slate-500 outline-none focus:border-violet-500/50"
/>
<Button
size="sm"
className="h-auto bg-emerald-600 px-2 hover:bg-emerald-500"
className="h-auto bg-violet-600 px-2 hover:bg-violet-500"
onClick={handleAddNote}
disabled={!newNote.trim() || addingNote}
>

12
src/components/inbox/conversation-list.tsx
View File

@ -24,7 +24,7 @@ interface ConversationListProps {
}
const STATUS_COLORS: Record<ConversationStatus, string> = {
open: "bg-emerald-500",
open: "bg-violet-500",
pending: "bg-amber-500",
closed: "bg-slate-500",
};
@ -145,7 +145,7 @@ export function ConversationList({
value={search}
onChange={handleSearchChange}
placeholder="Search conversations..."
className="border-slate-700 bg-slate-800 pl-9 text-sm text-white placeholder-slate-500 focus:border-emerald-500/50"
className="border-slate-700 bg-slate-800 pl-9 text-sm text-white placeholder-slate-500 focus:border-violet-500/50"
/>
</div>
@ -165,7 +165,7 @@ export function ConversationList({
className={cn(
"text-sm",
filter === opt.value
? "text-emerald-400"
? "text-violet-400"
: "text-slate-300"
)}
>
@ -180,7 +180,7 @@ export function ConversationList({
<ScrollArea className="flex-1">
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="h-5 w-5 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
<div className="h-5 w-5 animate-spin rounded-full border-2 border-violet-500 border-t-transparent" />
</div>
) : filtered.length === 0 ? (
<div className="px-4 py-12 text-center">
@ -233,7 +233,7 @@ function ConversationItem({
onClick={handleClick}
className={cn(
"flex w-full items-start gap-3 px-3 py-3 text-left transition-colors hover:bg-slate-800/50",
isActive && "border-l-2 border-emerald-500 bg-slate-800/70"
isActive && "border-l-2 border-violet-500 bg-slate-800/70"
)}
>
{/* Avatar */}
@ -263,7 +263,7 @@ function ConversationItem({
</p>
<div className="flex shrink-0 items-center gap-1.5">
{conversation.unread_count > 0 && (
<span className="flex h-4 min-w-4 items-center justify-center rounded-full bg-emerald-500 px-1 text-[10px] font-bold text-white">
<span className="flex h-4 min-w-4 items-center justify-center rounded-full bg-violet-500 px-1 text-[10px] font-bold text-white">
{conversation.unread_count}
</span>
)}

6
src/components/inbox/message-bubble.tsx
View File

@ -93,7 +93,7 @@ function MediaImage({ url, alt }: { url: string; alt: string }) {
if (loading) {
return (
<div className="flex h-40 w-60 items-center justify-center rounded-lg bg-slate-700">
<div className="h-5 w-5 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
<div className="h-5 w-5 animate-spin rounded-full border-2 border-violet-500 border-t-transparent" />
</div>
);
}
@ -185,7 +185,7 @@ function MessageContent({ message }: { message: Message }) {
case "template":
return (
<div>
<span className="mb-1 inline-flex items-center gap-1 rounded bg-emerald-500/20 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400">
<span className="mb-1 inline-flex items-center gap-1 rounded bg-violet-500/20 px-1.5 py-0.5 text-[10px] font-medium text-violet-400">
<LayoutTemplate className="h-3 w-3" />
Template
</span>
@ -226,7 +226,7 @@ export function MessageBubble({ message }: MessageBubbleProps) {
className={cn(
"relative max-w-[75%] rounded-2xl px-3 py-2",
isAgent
? "rounded-br-md bg-emerald-600 text-white"
? "rounded-br-md bg-violet-600 text-white"
: "rounded-bl-md bg-slate-800 text-slate-100"
)}
>

4
src/components/inbox/message-composer.tsx
View File

@ -107,14 +107,14 @@ export function MessageComposer({
disabled={sessionExpired}
rows={1}
className={cn(
"flex-1 resize-none rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-white placeholder-slate-500 outline-none transition-colors focus:border-emerald-500/50",
"flex-1 resize-none rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-white placeholder-slate-500 outline-none transition-colors focus:border-violet-500/50",
sessionExpired && "cursor-not-allowed opacity-50"
)}
/>
<Button
size="sm"
className="h-9 w-9 shrink-0 bg-emerald-600 p-0 hover:bg-emerald-500 disabled:opacity-40"
className="h-9 w-9 shrink-0 bg-violet-600 p-0 hover:bg-violet-500 disabled:opacity-40"
disabled={!text.trim() || sessionExpired || sending}
onClick={handleSend}
>

6
src/components/inbox/message-thread.tsx
View File

@ -67,7 +67,7 @@ function groupMessagesByDate(messages: Message[]) {
}
const STATUS_OPTIONS: { label: string; value: ConversationStatus; color: string }[] = [
{ label: "Open", value: "open", color: "text-emerald-400" },
{ label: "Open", value: "open", color: "text-violet-400" },
{ label: "Pending", value: "pending", color: "text-amber-400" },
{ label: "Closed", value: "closed", color: "text-slate-400" },
];
@ -319,7 +319,7 @@ export function MessageThread({
variant="outline"
className={cn(
"ml-1 hidden gap-1 border-slate-700 text-[10px] sm:inline-flex sm:ml-2",
sessionInfo.expired ? "text-red-400" : "text-emerald-400"
sessionInfo.expired ? "text-red-400" : "text-violet-400"
)}
>
<Clock className="h-3 w-3" />
@ -369,7 +369,7 @@ export function MessageThread({
<div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4">
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="h-5 w-5 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
<div className="h-5 w-5 animate-spin rounded-full border-2 border-violet-500 border-t-transparent" />
</div>
) : messages.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12">

6
src/components/landing/cta-banner.tsx
View File

@ -10,10 +10,10 @@ export function CtaBanner() {
return (
<Section className="py-16 sm:py-20">
<div
className="relative overflow-hidden rounded-2xl border border-emerald-500/20 bg-slate-900/70 px-6 py-16 text-center sm:px-12 sm:py-20"
className="relative overflow-hidden rounded-2xl border border-violet-500/20 bg-slate-900/70 px-6 py-16 text-center sm:px-12 sm:py-20"
style={{
background:
'radial-gradient(800px circle at 50% -40%, rgb(16 185 129 / 0.18), transparent 60%), linear-gradient(to bottom, rgb(15 23 42 / 0.9), rgb(15 23 42 / 0.7))',
'radial-gradient(800px circle at 50% -40%, rgb(139 92 246 / 0.18), transparent 60%), linear-gradient(to bottom, rgb(15 23 42 / 0.9), rgb(15 23 42 / 0.7))',
}}
>
<h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
@ -25,7 +25,7 @@ export function CtaBanner() {
<div className="mt-8 flex flex-wrap items-center justify-center gap-3">
<Link
href="/signup"
className="inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-emerald-400"
className="inline-flex items-center gap-2 rounded-lg bg-violet-500 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-violet-400"
>
Get started free
<ArrowRight className="h-4 w-4" />

2
src/components/landing/faq.tsx
View File

@ -31,7 +31,7 @@ export function FAQ() {
<ChevronDown
className={cn(
'h-4 w-4 flex-shrink-0 text-slate-500 transition-transform',
isOpen && 'rotate-180 text-emerald-400',
isOpen && 'rotate-180 text-violet-400',
)}
/>
</button>

4
src/components/landing/feature-spotlight.tsx
View File

@ -37,7 +37,7 @@ export function FeatureSpotlight({
)}
>
<div>
<p className="text-xs font-semibold uppercase tracking-wider text-emerald-400">
<p className="text-xs font-semibold uppercase tracking-wider text-violet-400">
{eyebrow}
</p>
<h3 className="mt-3 text-2xl font-bold tracking-tight text-white sm:text-3xl">
@ -50,7 +50,7 @@ export function FeatureSpotlight({
<ul className="mt-5 space-y-2.5">
{bullets.map((b) => (
<li key={b} className="flex items-start gap-2.5 text-sm text-slate-300">
<Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-emerald-400" />
<Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-violet-400" />
<span>{b}</span>
</li>
))}

2
src/components/landing/features-grid.tsx
View File

@ -32,7 +32,7 @@ const FEATURES: Feature[] = [
description:
'Tags, custom fields, notes, and automatic deduplication. Import existing contacts from CSV.',
icon: Users,
tint: 'text-emerald-400 bg-emerald-500/10',
tint: 'text-violet-400 bg-violet-500/10',
},
{
title: 'Sales pipelines',

2
src/components/landing/footer.tsx
View File

@ -8,7 +8,7 @@ export function Footer() {
<div className="mx-auto grid w-full max-w-7xl grid-cols-2 gap-8 px-6 py-12 sm:grid-cols-5">
<div className="col-span-2 sm:col-span-2">
<Link href="/" className="flex items-center gap-2" aria-label="WaCRM home">
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500">
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500">
<MessageSquare className="h-4 w-4 text-white" />
</span>
<span className="text-lg font-semibold text-white">WaCRM</span>

14
src/components/landing/hero.tsx
View File

@ -17,20 +17,20 @@ export function Hero() {
className="pointer-events-none absolute inset-0 -z-10 opacity-60"
style={{
background:
'radial-gradient(800px circle at 70% -10%, rgb(16 185 129 / 0.18), transparent 60%), radial-gradient(600px circle at 10% 30%, rgb(59 130 246 / 0.08), transparent 60%)',
'radial-gradient(800px circle at 70% -10%, rgb(139 92 246 / 0.18), transparent 60%), radial-gradient(600px circle at 10% 30%, rgb(59 130 246 / 0.08), transparent 60%)',
}}
/>
<div className="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-12 px-6 py-20 sm:py-28 lg:grid-cols-2 lg:gap-16">
<div>
<div className="inline-flex items-center gap-2 rounded-full border border-slate-800 bg-slate-900/60 px-3 py-1 text-xs text-slate-300">
<ShieldCheck className="h-3.5 w-3.5 text-emerald-400" />
<ShieldCheck className="h-3.5 w-3.5 text-violet-400" />
Built on the official WhatsApp Business API
</div>
<h1 className="mt-5 text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
Run your WhatsApp business from{' '}
<span className="text-emerald-400">one inbox.</span>
<span className="text-violet-400">one inbox.</span>
</h1>
<p className="mt-5 max-w-xl text-base text-slate-400 sm:text-lg">
@ -42,7 +42,7 @@ export function Hero() {
<div className="mt-8 flex flex-wrap items-center gap-3">
<Link
href="/signup"
className="inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-emerald-400"
className="inline-flex items-center gap-2 rounded-lg bg-violet-500 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-violet-400"
>
Get started
<ArrowRight className="h-4 w-4" />
@ -57,15 +57,15 @@ export function Hero() {
<div className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-2 text-xs text-slate-500">
<span className="flex items-center gap-1.5">
<span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
<span className="h-1.5 w-1.5 rounded-full bg-violet-500" />
No credit card required
</span>
<span className="flex items-center gap-1.5">
<span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
<span className="h-1.5 w-1.5 rounded-full bg-violet-500" />
Live in 30 minutes
</span>
<span className="flex items-center gap-1.5">
<span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
<span className="h-1.5 w-1.5 rounded-full bg-violet-500" />
Your data, your Supabase
</span>
</div>

2
src/components/landing/how-it-works.tsx
View File

@ -43,7 +43,7 @@ export function HowItWorks() {
className="relative rounded-xl border border-slate-800 bg-slate-900/40 p-6"
>
<div className="flex items-start justify-between">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-400">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10 text-violet-400">
<Icon className="h-5 w-5" />
</div>
<span

6
src/components/landing/mock/analytics-mock.tsx
View File

@ -47,7 +47,7 @@ export function AnalyticsMock() {
</div>
<div
className={`text-[10px] tabular-nums ${
s.positive ? 'text-emerald-400' : 'text-red-400'
s.positive ? 'text-violet-400' : 'text-red-400'
}`}
>
{s.delta}
@ -67,7 +67,7 @@ export function AnalyticsMock() {
Incoming
</span>
<span className="inline-flex items-center gap-1 text-[9px] text-slate-500">
<span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
<span className="h-1.5 w-1.5 rounded-full bg-violet-500" />
Outgoing
</span>
</div>
@ -89,7 +89,7 @@ export function AnalyticsMock() {
strokeDasharray="3 3"
/>
))}
<path d={path(outgoing)} fill="none" stroke="#10b981" strokeWidth={1.5} />
<path d={path(outgoing)} fill="none" stroke="#7c3aed" strokeWidth={1.5} />
<path d={path(incoming)} fill="none" stroke="#3b82f6" strokeWidth={1.5} />
</svg>
</div>

4
src/components/landing/mock/automation-mock.tsx
View File

@ -19,8 +19,8 @@ export function AutomationMock() {
kind: 'action',
label: 'Send "Hi! 👋 Thanks for reaching out."',
icon: MessageSquare,
accent: 'border-l-emerald-500',
badgeClass: 'bg-emerald-500/10 text-emerald-400',
accent: 'border-l-violet-500',
badgeClass: 'bg-violet-500/10 text-violet-400',
kindLabel: 'ACTION',
},
{

14
src/components/landing/mock/inbox-mock.tsx
View File

@ -33,16 +33,16 @@ export function InboxMock() {
<div
key={i}
className={`flex items-start gap-2 px-3 py-2.5 ${
c.active ? 'border-l-2 border-emerald-500 bg-slate-800/60' : 'border-l-2 border-transparent'
c.active ? 'border-l-2 border-violet-500 bg-slate-800/60' : 'border-l-2 border-transparent'
}`}
>
<span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500/10 text-[10px] font-medium text-emerald-400">
<span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-violet-500/10 text-[10px] font-medium text-violet-400">
{c.name[0]}
</span>
<div className="min-w-0 flex-1">
<div className="flex items-center justify-between gap-2">
<span className="truncate text-xs font-medium text-white">{c.name}</span>
{c.unread && <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />}
{c.unread && <span className="h-1.5 w-1.5 rounded-full bg-violet-500" />}
</div>
<p className="truncate text-[10px] text-slate-500">{c.preview}</p>
</div>
@ -53,14 +53,14 @@ export function InboxMock() {
{/* Thread */}
<div className="flex min-h-[280px] flex-col bg-slate-950">
<div className="flex items-center gap-2 border-b border-slate-800 px-4 py-2.5">
<span className="flex h-7 w-7 items-center justify-center rounded-full bg-emerald-500/10 text-[10px] font-medium text-emerald-400">
<span className="flex h-7 w-7 items-center justify-center rounded-full bg-violet-500/10 text-[10px] font-medium text-violet-400">
A
</span>
<div>
<div className="text-xs font-medium text-white">Aisha</div>
<div className="text-[10px] text-slate-500">+44 7700 900123</div>
</div>
<div className="ml-auto inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-0.5 text-[10px] text-emerald-300">
<div className="ml-auto inline-flex items-center gap-1 rounded-full border border-violet-500/30 bg-violet-500/10 px-2 py-0.5 text-[10px] text-violet-300">
Open
</div>
</div>
@ -69,7 +69,7 @@ export function InboxMock() {
<div className="mr-auto max-w-[75%] rounded-2xl rounded-bl-sm bg-slate-800 px-3 py-2 text-xs text-slate-200">
Hi! Is the kit available in large?
</div>
<div className="ml-auto max-w-[75%] rounded-2xl rounded-br-sm bg-emerald-500 px-3 py-2 text-xs text-white">
<div className="ml-auto max-w-[75%] rounded-2xl rounded-br-sm bg-violet-500 px-3 py-2 text-xs text-white">
Yes — shipping today 📦
</div>
<div className="mr-auto max-w-[75%] rounded-2xl rounded-bl-sm bg-slate-800 px-3 py-2 text-xs text-slate-200">
@ -85,7 +85,7 @@ export function InboxMock() {
type="button"
tabIndex={-1}
aria-hidden
className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500 text-white"
className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500 text-white"
>
<MessageSquare className="h-3.5 w-3.5" />
</button>

2
src/components/landing/mock/pipeline-mock.tsx
View File

@ -23,7 +23,7 @@ export function PipelineMock() {
},
{
name: 'Won',
color: 'bg-emerald-500',
color: 'bg-violet-500',
deals: [{ title: 'Lagoon Spa', value: '$3,200' }],
},
]

4
src/components/landing/nav.tsx
View File

@ -61,7 +61,7 @@ export function LandingNav() {
>
<div className="mx-auto flex h-16 w-full max-w-7xl items-center justify-between px-6">
<Link href="/" className="flex items-center gap-2" aria-label="WaCRM home">
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500">
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500">
<MessageSquare className="h-4 w-4 text-white" />
</span>
<span className="text-lg font-semibold text-white">WaCRM</span>
@ -145,7 +145,7 @@ function NavCtas({ auth, mobile = false }: { auth: AuthState; mobile?: boolean }
)
const primary = cn(
btnBase,
'bg-emerald-500 text-white hover:bg-emerald-400',
'bg-violet-500 text-white hover:bg-violet-400',
mobile && 'justify-center',
)

12
src/components/landing/open-source.tsx
View File

@ -32,7 +32,7 @@ export function OpenSource() {
Clone or fork the repository, tweak the code, ship your own build.
MIT-style freedom with the full CRM underneath.
</p>
<span className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-emerald-400 transition-colors group-hover:text-emerald-300">
<span className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-violet-400 transition-colors group-hover:text-violet-300">
ArnasDon/wacrm
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
</span>
@ -42,14 +42,14 @@ export function OpenSource() {
href={HOSTINGER_URL}
target="_blank"
rel="noopener noreferrer"
className="group flex flex-col rounded-xl border border-emerald-500/20 bg-slate-900/40 p-6 transition-colors hover:border-emerald-500/40 hover:bg-slate-900/70"
className="group flex flex-col rounded-xl border border-violet-500/20 bg-slate-900/40 p-6 transition-colors hover:border-violet-500/40 hover:bg-slate-900/70"
>
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-400">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10 text-violet-400">
<Server className="h-5 w-5" />
</div>
<h3 className="mt-4 flex flex-wrap items-center gap-2 text-base font-semibold text-white">
Deploy on Hostinger
<span className="rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-emerald-400">
<span className="rounded-full bg-violet-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-violet-400">
Recommended
</span>
</h3>
@ -58,7 +58,7 @@ export function OpenSource() {
Managed Node.js Hosting and WaCRM is live in a few minutes. No
servers to patch.
</p>
<span className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-emerald-400 transition-colors group-hover:text-emerald-300">
<span className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-violet-400 transition-colors group-hover:text-violet-300">
Managed Node.js Hosting
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
</span>
@ -70,7 +70,7 @@ export function OpenSource() {
href="/docs"
className="group inline-flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/40 px-5 py-3 text-sm font-medium text-slate-200 transition-colors hover:border-slate-700 hover:bg-slate-900/70 hover:text-white"
>
<BookOpen className="h-4 w-4 text-emerald-400" />
<BookOpen className="h-4 w-4 text-violet-400" />
Read the full documentation
<ArrowRight className="h-4 w-4 text-slate-400 transition-transform group-hover:translate-x-0.5 group-hover:text-slate-200" />
</Link>

2
src/components/landing/section.tsx
View File

@ -54,7 +54,7 @@ export function SectionHeader({
return (
<div className={cn(base, max, 'mb-12')}>
{eyebrow && (
<p className="mb-3 text-xs font-semibold uppercase tracking-wider text-emerald-400">
<p className="mb-3 text-xs font-semibold uppercase tracking-wider text-violet-400">
{eyebrow}
</p>
)}

2
src/components/layout/header.tsx
View File

@ -80,7 +80,7 @@ export function Header({ onOpenSidebar }: HeaderProps) {
alt={profile.full_name ?? "Avatar"}
/>
) : null}
<AvatarFallback className="bg-emerald-500/10 text-sm font-medium text-emerald-500">
<AvatarFallback className="bg-violet-500/10 text-sm font-medium text-violet-500">
{initial}
</AvatarFallback>
</Avatar>

12
src/components/layout/sidebar.tsx
View File

@ -111,7 +111,7 @@ export function Sidebar({ open = false, onClose }: SidebarProps) {
close button is hidden since the sidebar is always-visible. */}
<div className="flex h-14 shrink-0 items-center justify-between gap-2 border-b border-slate-800 px-4">
<Link href="/dashboard" className="flex items-center gap-2">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500">
<MessageSquare className="h-4 w-4 text-white" />
</div>
<span className="text-lg font-semibold text-white">WaCRM</span>
@ -145,7 +145,7 @@ export function Sidebar({ open = false, onClose }: SidebarProps) {
// Taller on mobile so fingers can hit the row reliably (≥44px).
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors lg:py-2",
isActive
? "bg-emerald-500/10 text-emerald-500"
? "bg-violet-500/10 text-violet-500"
: "text-slate-400 hover:bg-slate-800 hover:text-white",
)}
>
@ -156,8 +156,8 @@ export function Sidebar({ open = false, onClose }: SidebarProps) {
aria-label={`${totalUnread} unread conversation${totalUnread === 1 ? "" : "s"}`}
className="relative flex h-2 w-2"
>
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-violet-400 opacity-75" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-violet-500" />
</span>
)}
</Link>
@ -178,7 +178,7 @@ export function Sidebar({ open = false, onClose }: SidebarProps) {
className={cn(
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors lg:py-2",
isActive
? "bg-emerald-500/10 text-emerald-500"
? "bg-violet-500/10 text-violet-500"
: "text-slate-400 hover:bg-slate-800 hover:text-white",
)}
>
@ -202,7 +202,7 @@ export function Sidebar({ open = false, onClose }: SidebarProps) {
alt={profile.full_name ?? "Avatar"}
/>
) : null}
<AvatarFallback className="bg-emerald-500/10 text-sm font-medium text-emerald-500">
<AvatarFallback className="bg-violet-500/10 text-sm font-medium text-violet-500">
{profile?.full_name?.charAt(0)?.toUpperCase() ??
profile?.email?.charAt(0)?.toUpperCase() ??
"U"}

6
src/components/pipelines/deal-card.tsx
View File

@ -65,7 +65,7 @@ export function DealCard({ deal, stage, onEdit, isOverlay }: DealCardProps) {
{deal.title}
</h4>
{deal.status === "won" && (
<span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold text-emerald-400">
<span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-violet-500/15 px-2 py-0.5 text-[10px] font-semibold text-violet-400">
<Check className="h-3 w-3" />
Won
</span>
@ -87,7 +87,7 @@ export function DealCard({ deal, stage, onEdit, isOverlay }: DealCardProps) {
</div>
<div className="mt-2 flex items-center justify-between">
<span className="text-sm font-bold text-emerald-400">
<span className="text-sm font-bold text-violet-400">
{formatCurrency(deal.value, deal.currency)}
</span>
{deal.expected_close_date && (
@ -102,7 +102,7 @@ export function DealCard({ deal, stage, onEdit, isOverlay }: DealCardProps) {
<div className="mt-2 flex items-center justify-end">
<span
title={assigneeLabel}
className="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-500/15 text-[10px] font-semibold text-emerald-400"
className="flex h-5 w-5 items-center justify-center rounded-full bg-violet-500/15 text-[10px] font-semibold text-violet-400"
>
{initials(assigneeLabel)}
</span>

14
src/components/pipelines/deal-form.tsx
View File

@ -264,7 +264,7 @@ export function DealForm({
<select
value={contactId}
onChange={(e) => setContactId(e.target.value)}
className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
>
<option value="">Select a contact</option>
{contacts.map((c) => (
@ -277,7 +277,7 @@ export function DealForm({
{linkedConversation && (
<Link
href="/inbox"
className="mt-1 inline-flex items-center gap-1.5 self-start rounded-md bg-emerald-500/10 px-2 py-1 text-xs text-emerald-400 hover:bg-emerald-500/20"
className="mt-1 inline-flex items-center gap-1.5 self-start rounded-md bg-violet-500/10 px-2 py-1 text-xs text-violet-400 hover:bg-violet-500/20"
>
<MessageSquare className="h-3 w-3" />
Link to Conversation
@ -304,7 +304,7 @@ export function DealForm({
<select
value={currency}
onChange={(e) => setCurrency(e.target.value)}
className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500"
className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500"
>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
@ -328,7 +328,7 @@ export function DealForm({
<select
value={stageId}
onChange={(e) => setStageId(e.target.value)}
className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500"
className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500"
>
{stages.map((s) => (
<option key={s.id} value={s.id}>
@ -343,7 +343,7 @@ export function DealForm({
<select
value={assignedTo}
onChange={(e) => setAssignedTo(e.target.value)}
className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-emerald-500"
className="h-9 w-full rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-sm text-white outline-none focus:border-violet-500"
>
<option value="">Unassigned</option>
{profiles.map((p) => (
@ -374,7 +374,7 @@ export function DealForm({
type="button"
onClick={() => handleStatusChange("won")}
disabled={!!statusAction || deal.status === "won"}
className="flex-1 bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50"
className="flex-1 bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
>
{statusAction === "won" ? (
<Loader2 className="h-4 w-4 animate-spin" />
@ -428,7 +428,7 @@ export function DealForm({
<Button
onClick={handleSave}
disabled={saving || !title.trim() || !contactId || !stageId}
className="flex-1 bg-emerald-600 text-white hover:bg-emerald-700"
className="flex-1 bg-violet-600 text-white hover:bg-violet-700"
>
{saving ? "Saving..." : deal ? "Save Changes" : "Create Deal"}
</Button>

4
src/components/pipelines/pipeline-analytics.tsx
View File

@ -107,7 +107,7 @@ export function PipelineAnalytics({ stages, deals }: PipelineAnalyticsProps) {
tooltip="Count of every deal in this pipeline that isn't marked as Lost. Won deals are still included."
/>
<Metric
icon={<DollarSign className="h-4 w-4 text-emerald-400" />}
icon={<DollarSign className="h-4 w-4 text-violet-400" />}
label="Pipeline Value"
value={formatCurrency(stats.totalValue)}
tooltip="Sum of the dollar values of all deals in this pipeline, excluding deals marked as Lost."
@ -125,7 +125,7 @@ export function PipelineAnalytics({ stages, deals }: PipelineAnalyticsProps) {
tooltip="Expected revenue: each open deal's value × its stage probability. First stage ≈ 10%, stages progress up to 90%, Won = 100%. Lost deals are excluded."
/>
<Metric
icon={<Trophy className="h-4 w-4 text-emerald-400" />}
icon={<Trophy className="h-4 w-4 text-violet-400" />}
label="Won This Month"
value={String(stats.wonThisMonth)}
tooltip="Deals marked as Won since the first day of the current month."

2
src/components/pipelines/pipeline-board.tsx
View File

@ -206,7 +206,7 @@ function StageColumn({
ref={setNodeRef}
className={`mt-3 flex flex-1 flex-col gap-2 rounded-lg transition-all ${
isOver
? "bg-emerald-500/5 outline outline-2 outline-dashed outline-emerald-400 outline-offset-2"
? "bg-violet-500/5 outline outline-2 outline-dashed outline-violet-400 outline-offset-2"
: ""
}`}
>

2
src/components/pipelines/pipeline-settings.tsx
View File

@ -349,7 +349,7 @@ export function PipelineSettings({
<Button
onClick={handleSave}
disabled={saving || !name.trim()}
className="bg-emerald-600 text-white hover:bg-emerald-700"
className="bg-violet-600 text-white hover:bg-violet-700"
>
{saving ? "Saving..." : "Save Changes"}
</Button>

2
src/components/settings/password-form.tsx
View File

@ -84,7 +84,7 @@ export function PasswordForm() {
<Card className="bg-slate-900/40 border-slate-800">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-white">
<KeyRound className="size-4 text-emerald-400" />
<KeyRound className="size-4 text-violet-400" />
Password
</CardTitle>
<CardDescription className="text-slate-400">

2
src/components/settings/profile-form.tsx
View File

@ -227,7 +227,7 @@ export function ProfileForm() {
{currentAvatar ? (
<AvatarImage src={currentAvatar} alt={fullName || 'Avatar'} />
) : null}
<AvatarFallback className="bg-emerald-500/10 text-base text-emerald-400">
<AvatarFallback className="bg-violet-500/10 text-base text-violet-400">
{initial}
</AvatarFallback>
</Avatar>

2
src/components/settings/sessions-card.tsx
View File

@ -52,7 +52,7 @@ export function SessionsCard() {
<Card className="bg-slate-900/40 border-slate-800">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-white">
<LogOut className="size-4 text-emerald-400" />
<LogOut className="size-4 text-violet-400" />
Active sessions
</CardTitle>
<CardDescription className="text-slate-400">

6
src/components/settings/tag-manager.tsx
View File

@ -142,7 +142,7 @@ export function TagManager() {
if (loading) {
return (
<div className="flex items-center justify-center py-12">
<Loader2 className="size-6 animate-spin text-emerald-500" />
<Loader2 className="size-6 animate-spin text-violet-500" />
</div>
);
}
@ -160,7 +160,7 @@ export function TagManager() {
setSelectedColor(PRESET_COLORS[3].value);
setDialogOpen(true);
}}
className="bg-emerald-600 hover:bg-emerald-700 text-white"
className="bg-violet-600 hover:bg-violet-700 text-white"
>
<Plus className="size-4" />
New Tag
@ -281,7 +281,7 @@ export function TagManager() {
<Button
onClick={handleCreate}
disabled={saving}
className="bg-emerald-600 hover:bg-emerald-700 text-white"
className="bg-violet-600 hover:bg-violet-700 text-white"
>
{saving ? (
<>

8
src/components/settings/template-manager.tsx
View File

@ -40,7 +40,7 @@ const categoryColors: Record<string, string> = {
const statusColors: Record<string, string> = {
Draft: 'bg-slate-600/20 text-slate-400 border-slate-600/30',
Pending: 'bg-yellow-600/20 text-yellow-400 border-yellow-600/30',
Approved: 'bg-emerald-600/20 text-emerald-400 border-emerald-600/30',
Approved: 'bg-violet-600/20 text-violet-400 border-violet-600/30',
Rejected: 'bg-red-600/20 text-red-400 border-red-600/30',
};
@ -246,7 +246,7 @@ export function TemplateManager() {
if (loading) {
return (
<div className="flex items-center justify-center py-12">
<Loader2 className="size-6 animate-spin text-emerald-500" />
<Loader2 className="size-6 animate-spin text-violet-500" />
</div>
);
}
@ -280,7 +280,7 @@ export function TemplateManager() {
setForm(emptyForm);
setDialogOpen(true);
}}
className="bg-emerald-600 hover:bg-emerald-700 text-white"
className="bg-violet-600 hover:bg-violet-700 text-white"
>
<Plus className="size-4" />
New Template
@ -456,7 +456,7 @@ export function TemplateManager() {
<Button
onClick={handleSave}
disabled={saving}
className="bg-emerald-600 hover:bg-emerald-700 text-white"
className="bg-violet-600 hover:bg-violet-700 text-white"
>
{saving ? (
<>

18
src/components/settings/whatsapp-config.tsx
View File

@ -265,7 +265,7 @@ export function WhatsAppConfig() {
if (loading) {
return (
<div className="flex items-center justify-center py-12">
<Loader2 className="size-6 animate-spin text-emerald-500" />
<Loader2 className="size-6 animate-spin text-violet-500" />
</div>
);
}
@ -315,7 +315,7 @@ export function WhatsAppConfig() {
<Alert className="bg-slate-900 border-slate-700">
<div className="flex items-center gap-2">
{connectionStatus === 'connected' ? (
<CheckCircle2 className="size-4 text-emerald-500" />
<CheckCircle2 className="size-4 text-violet-500" />
) : (
<XCircle className="size-4 text-red-500" />
)}
@ -444,7 +444,7 @@ export function WhatsAppConfig() {
<Button
onClick={handleSave}
disabled={saving}
className="bg-emerald-600 hover:bg-emerald-700 text-white"
className="bg-violet-600 hover:bg-violet-700 text-white"
>
{saving ? (
<>
@ -510,13 +510,13 @@ export function WhatsAppConfig() {
<AccordionItem className="border-slate-700">
<AccordionTrigger className="text-slate-300 hover:text-white hover:no-underline">
<span className="flex items-center gap-2">
<span className="flex size-5 items-center justify-center rounded-full bg-emerald-600 text-xs font-bold text-white">1</span>
<span className="flex size-5 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white">1</span>
Create a Meta App
</span>
</AccordionTrigger>
<AccordionContent className="text-slate-400">
<ol className="list-decimal list-inside space-y-1 text-sm">
<li>Go to <span className="text-emerald-400">developers.facebook.com</span></li>
<li>Go to <span className="text-violet-400">developers.facebook.com</span></li>
<li>Click &quot;My Apps&quot; and then &quot;Create App&quot;</li>
<li>Select &quot;Business&quot; as the app type</li>
<li>Fill in app details and create</li>
@ -527,7 +527,7 @@ export function WhatsAppConfig() {
<AccordionItem className="border-slate-700">
<AccordionTrigger className="text-slate-300 hover:text-white hover:no-underline">
<span className="flex items-center gap-2">
<span className="flex size-5 items-center justify-center rounded-full bg-emerald-600 text-xs font-bold text-white">2</span>
<span className="flex size-5 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white">2</span>
Add WhatsApp Product
</span>
</AccordionTrigger>
@ -543,7 +543,7 @@ export function WhatsAppConfig() {
<AccordionItem className="border-slate-700">
<AccordionTrigger className="text-slate-300 hover:text-white hover:no-underline">
<span className="flex items-center gap-2">
<span className="flex size-5 items-center justify-center rounded-full bg-emerald-600 text-xs font-bold text-white">3</span>
<span className="flex size-5 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white">3</span>
Get API Credentials
</span>
</AccordionTrigger>
@ -560,7 +560,7 @@ export function WhatsAppConfig() {
<AccordionItem className="border-slate-700">
<AccordionTrigger className="text-slate-300 hover:text-white hover:no-underline">
<span className="flex items-center gap-2">
<span className="flex size-5 items-center justify-center rounded-full bg-emerald-600 text-xs font-bold text-white">4</span>
<span className="flex size-5 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white">4</span>
Configure Webhooks
</span>
</AccordionTrigger>
@ -581,7 +581,7 @@ export function WhatsAppConfig() {
href="https://developers.facebook.com/docs/whatsapp/cloud-api/get-started"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 text-sm text-emerald-400 hover:text-emerald-300 transition-colors"
className="inline-flex items-center gap-1.5 text-sm text-violet-400 hover:text-violet-300 transition-colors"
>
<ExternalLink className="size-3.5" />
Meta WhatsApp API Documentation

4
src/components/ui/switch.tsx
View File

@ -15,9 +15,9 @@ function Switch({
data-slot="switch"
className={cn(
"inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
"disabled:cursor-not-allowed disabled:opacity-50",
"data-[checked]:bg-emerald-500 data-[unchecked]:bg-slate-700",
"data-[checked]:bg-violet-500 data-[unchecked]:bg-slate-700",
className,
)}
{...props}

2
src/lib/automations/trigger-meta.ts
View File

@ -21,7 +21,7 @@ export const TRIGGER_META: Record<AutomationTriggerType, TriggerMeta> = {
},
new_contact_created: {
label: 'New Contact',
pillClass: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300',
pillClass: 'border-violet-500/30 bg-violet-500/10 text-violet-300',
},
conversation_assigned: {
label: 'Conversation Assigned',

6
src/lib/broadcast-status.ts
View File

@ -36,7 +36,7 @@ export const broadcastStatusConfig: Record<BroadcastStatus, StatusDisplay> = {
},
sent: {
label: "Sent",
classes: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
classes: "bg-violet-500/10 text-violet-400 border-violet-500/20",
},
failed: {
label: "Failed",
@ -55,11 +55,11 @@ export const recipientStatusConfig: Record<RecipientStatus, StatusDisplay> = {
},
delivered: {
label: "Delivered",
classes: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
classes: "bg-violet-500/10 text-violet-400 border-violet-500/20",
},
read: {
label: "Read",
classes: "bg-emerald-500/10 text-emerald-300 border-emerald-500/20",
classes: "bg-violet-500/10 text-violet-300 border-violet-500/20",
},
replied: {
label: "Replied",

4
src/lib/docs/content.ts
View File

@ -71,9 +71,9 @@ const CLASSES = {
ul: 'my-3 pl-6 list-disc marker:text-slate-500 text-slate-300 leading-relaxed space-y-1.5',
ol: 'my-3 pl-6 list-decimal marker:text-slate-500 text-slate-300 leading-relaxed space-y-1.5',
li: 'pl-1',
blockquote: 'my-4 rounded-r-lg border-l-4 border-emerald-500 bg-emerald-500/5 px-4 py-3 text-slate-200',
blockquote: 'my-4 rounded-r-lg border-l-4 border-violet-500 bg-violet-500/5 px-4 py-3 text-slate-200',
hr: 'my-8 border-t border-slate-800',
a: 'text-emerald-400 underline decoration-transparent underline-offset-2 transition-colors hover:decoration-emerald-500/60',
a: 'text-violet-400 underline decoration-transparent underline-offset-2 transition-colors hover:decoration-violet-500/60',
codespan: 'rounded-md border border-slate-700 bg-slate-800 px-1.5 py-0.5 text-[0.85em] font-mono text-slate-100',
pre: 'my-5 overflow-x-auto rounded-lg border border-slate-800 bg-slate-900/80 p-4 text-[0.825rem] leading-relaxed font-mono text-slate-100',
table: 'my-5 block w-full overflow-x-auto rounded-lg border border-slate-800 text-sm',