vynte-infra/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update activity item colors and backgrounds for improved visual distinction

Browse Source
This commit is contained in:
Dries Augustyns
2026-05-10 11:59:54 +02:00
parent f22da4add1
commit e43f70d8a1
2 changed files with 18 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/ActivityItem.tsx
+18 -18
View File
@@ -133,8 +133,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'event.triggered':
return {
icon: Zap,
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
color: 'text-amber-700',
bgColor: 'bg-amber-50',
title: (typeof metadata.eventName === 'string' ? metadata.eventName : undefined) || 'Event triggered',
description: undefined,
badge: {
@@ -150,8 +150,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'email.sent':
return {
icon: Send,
color: 'text-green-700',
bgColor: 'bg-green-50',
color: 'text-neutral-700',
bgColor: 'bg-neutral-100',
title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Email sent',
description: metadata.campaignName
? `Campaign: ${String(metadata.campaignName)}`
@@ -169,8 +169,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'email.delivered':
return {
icon: CheckCircle,
color: 'text-green-700',
bgColor: 'bg-green-50',
color: 'text-emerald-700',
bgColor: 'bg-emerald-50',
title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Email delivered',
description: metadata.campaignName
? `Campaign: ${String(metadata.campaignName)}`
@@ -199,8 +199,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'email.opened':
return {
icon: Eye,
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
color: 'text-emerald-700',
bgColor: 'bg-emerald-50',
title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Email opened',
description:
typeof metadata.totalOpens === 'number' && metadata.totalOpens > 1
@@ -219,8 +219,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'email.clicked':
return {
icon: MousePointerClick,
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
color: 'text-sky-700',
bgColor: 'bg-sky-50',
title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Email clicked',
description:
typeof metadata.totalClicks === 'number' && metadata.totalClicks > 1
@@ -269,8 +269,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'workflow.started':
return {
icon: Workflow,
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
color: 'text-amber-700',
bgColor: 'bg-amber-50',
title: (typeof metadata.workflowName === 'string' ? metadata.workflowName : undefined) || 'Workflow started',
description: `Status: ${String(metadata.status || 'unknown')}`,
badge: {
@@ -282,8 +282,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'workflow.completed':
return {
icon: CheckCheck,
color: 'text-green-700',
bgColor: 'bg-green-50',
color: 'text-amber-700',
bgColor: 'bg-amber-50',
title: (typeof metadata.workflowName === 'string' ? metadata.workflowName : undefined) || 'Workflow completed',
description: metadata.exitReason
? `Exit: ${String(metadata.exitReason)}`
@@ -297,8 +297,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'campaign.scheduled':
return {
icon: Calendar,
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
color: 'text-sky-700',
bgColor: 'bg-sky-50',
title: (typeof metadata.campaignName === 'string' ? metadata.campaignName : undefined) || 'Campaign scheduled',
description: metadata.subject
? `${String(metadata.subject)}${metadata.totalRecipients ? ` • ${metadata.totalRecipients} recipients` : ''}`
@@ -314,8 +314,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'workflow.email.scheduled':
return {
icon: Calendar,
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
color: 'text-amber-700',
bgColor: 'bg-amber-50',
title: (typeof metadata.stepName === 'string' ? metadata.stepName : undefined) || 'Workflow email scheduled',
description: metadata.workflowName
? `Workflow: ${String(metadata.workflowName)}${metadata.subject ? ` • ${String(metadata.subject)}` : ''}`
apps/web/src/pages/index.tsx
-42
View File
@@ -24,7 +24,6 @@ import {
MousePointerClick,
Send,
ShieldCheck,
Sparkles,
TrendingUp,
Users,
Workflow,
@@ -49,18 +48,6 @@ import {useConfig} from '../lib/hooks/useConfig';
import {useUser} from '../lib/hooks/useUser';
import {network} from '../lib/network';
const MILESTONES = [100, 1_000, 10_000, 100_000, 1_000_000, 10_000_000];
function nextMilestone(value: number): number {
return MILESTONES.find(m => m > value) ?? value;
}
function formatCompact(value: number): string {
if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(value % 1_000_000 === 0 ? 0 : 1)}M`;
if (value >= 1_000) return `${(value / 1_000).toFixed(value % 1_000 === 0 ? 0 : 1)}K`;
return value.toLocaleString();
}
function getGreeting(): string {
const hour = new Date().getHours();
if (hour >= 23 || hour < 5) return 'Working late';
@@ -386,14 +373,6 @@ export default function Index() {
const healthText =
!hasDelivData ? 'text-neutral-500' : worstLevel === 'healthy' ? 'text-emerald-700' : worstLevel === 'warning' ? 'text-amber-700' : 'text-red-700';
const emailsTarget = nextMilestone(totalEmailsSent);
const prevMilestone = MILESTONES.filter(m => m <= totalEmailsSent).pop() ?? 0;
const milestoneProgress =
emailsTarget > prevMilestone
? Math.min(100, ((totalEmailsSent - prevMilestone) / (emailsTarget - prevMilestone)) * 100)
: 0;
const showMilestone = !isLoading && totalEmailsSent > 0 && emailsTarget > totalEmailsSent;
async function handleResendVerification() {
setIsResending(true);
setResendMessage('');
@@ -545,27 +524,6 @@ export default function Index() {
{isEmails && !isLoading && previousStats && <TrendChip trend={emailsTrend} />}
{isOpenRate && !isLoading && previousStats && <TrendChip trend={openRateTrend} />}
</CardHeader>
{isEmails && showMilestone && (
<div className="px-6 pb-4 -mt-1">
<div className="flex items-center justify-between text-[11px] text-neutral-500 mb-1.5">
<span className="inline-flex items-center gap-1">
<Sparkles className="h-3 w-3 text-neutral-400" />
Next milestone
</span>
<span className="tabular-nums font-medium text-neutral-700">
{formatCompact(totalEmailsSent)} / {formatCompact(emailsTarget)}
</span>
</div>
<div className="h-1 w-full overflow-hidden rounded-full bg-neutral-100">
<motion.div
className="h-full rounded-full bg-neutral-900"
initial={{width: 0}}
animate={{width: `${milestoneProgress}%`}}
transition={{duration: 1.2, ease: [0.22, 1, 0.36, 1], delay: 0.4}}
/>
</div>
</div>
)}
</Card>
</motion.div>
);