Skip to content

Commit 4f7e6ff

Browse files
vagxrthvagxrth
authored
[REFACTOR]: align the text message on profiles-list and sessions-list during empty state (#40)
* refactor: center align the texts on profiles-list and sessions-list during empty state * refactor: replace ClockIcon with UserIcon in sessions list component * refactor: replace Loader2Icon with SpinnerIcon in profiles and sessions list components * refactor: replace ChartBarIcon with FunnelIcon in funnels page and empty state components * refactor: update icons in goals page and empty state component, enhance styling and layout * refactor: update icons in navigation and map components, replacing ClockIcon with UserIcon and GlobeIcon with MapPinIcon * refactor: update icons in tracking setup tab, replacing lucide-react icons with phosphor-icons for improved consistency
1 parent 33ff1c5 commit 4f7e6ff

File tree

10 files changed

+105
-86
lines changed

10 files changed

+105
-86
lines changed

‎apps/dashboard/app/(main)/websites/[id]/_components/tabs/tracking-setup-tab.tsx‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
'use client';
22

33
import {
4-
Activity,
5-
AlertCircle,
6-
BookOpen,
7-
Check,
8-
Clipboard,
9-
Code,
10-
ExternalLink,
11-
FileCode,
12-
Info,
13-
RefreshCw,
14-
} from 'lucide-react';
4+
ActivityIcon,
5+
WarningCircleIcon,
6+
BookOpenIcon,
7+
CheckIcon,
8+
ClipboardIcon,
9+
CodeIcon,
10+
ArrowSquareOutIcon,
11+
FileCodeIcon,
12+
InfoIcon,
13+
ArrowClockwiseIcon,
14+
} from '@phosphor-icons/react';
1515
import { useState } from 'react';
1616
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
1717
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -95,9 +95,9 @@ const CodeBlock = ({
9595
variant="ghost"
9696
>
9797
{copied ? (
98-
<Check className="h-3.5 w-3.5 text-green-500" />
98+
<CheckIcon className="h-3.5 w-3.5 text-green-500" weight="duotone" />
9999
) : (
100-
<Clipboard className="h-3.5 w-3.5" />
100+
<ClipboardIcon className="h-3.5 w-3.5" weight="duotone" />
101101
)}
102102
</Button>
103103
</div>
@@ -140,19 +140,19 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
140140
<Card className="border-orange-200 bg-orange-50 dark:border-orange-800 dark:bg-orange-950/20">
141141
<CardHeader>
142142
<div className="flex items-center justify-between">
143-
<CardTitle className="flex items-center gap-2 text-lg">
144-
<AlertCircle className="h-5 w-5" />
145-
Tracking Not Setup
146-
</CardTitle>
147-
<Button
148-
aria-label="Refresh tracking status"
149-
className="h-8 w-8"
150-
onClick={handleRefresh}
151-
size="icon"
152-
variant="outline"
153-
>
154-
<RefreshCw className="h-4 w-4" />
155-
</Button>
143+
<CardTitle className="flex items-center gap-2 text-lg">
144+
<WarningCircleIcon className="h-5 w-5" weight="duotone" />
145+
Tracking Not Setup
146+
</CardTitle>
147+
<Button
148+
aria-label="Refresh tracking status"
149+
className="h-8 w-8"
150+
onClick={handleRefresh}
151+
size="icon"
152+
variant="outline"
153+
>
154+
<ArrowClockwiseIcon className="h-4 w-4" weight="fill" />
155+
</Button>
156156
</div>
157157
<CardDescription>
158158
Install the tracking script to start collecting analytics data for
@@ -165,7 +165,7 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
165165
<Card>
166166
<CardHeader className="pb-4">
167167
<CardTitle className="flex items-center gap-2 text-lg">
168-
<Code className="h-5 w-5" />
168+
<CodeIcon className="h-5 w-5" weight="duotone" />
169169
Installation
170170
</CardTitle>
171171
<CardDescription>
@@ -181,11 +181,11 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
181181
>
182182
<TabsList className="grid w-full grid-cols-2">
183183
<TabsTrigger className="flex items-center gap-2" value="script">
184-
<FileCode className="h-4 w-4" />
184+
<FileCodeIcon className="h-4 w-4" weight="duotone" />
185185
HTML Script Tag
186186
</TabsTrigger>
187187
<TabsTrigger className="flex items-center gap-2" value="npm">
188-
<Code className="h-4 w-4" />
188+
<CodeIcon className="h-4 w-4" weight="duotone" />
189189
NPM Package
190190
</TabsTrigger>
191191
</TabsList>
@@ -284,7 +284,7 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
284284
<Card>
285285
<CardHeader className="pb-4">
286286
<CardTitle className="flex items-center gap-2 text-lg">
287-
<Activity className="h-5 w-5" />
287+
<ActivityIcon className="h-5 w-5" weight="duotone" />
288288
Configuration
289289
</CardTitle>
290290
<CardDescription>
@@ -602,17 +602,17 @@ export function WebsiteTrackingSetupTab({ websiteId }: WebsiteDataTabProps) {
602602
rel="noopener noreferrer"
603603
target="_blank"
604604
>
605-
<BookOpen className="h-4 w-4" />
605+
<BookOpenIcon className="h-4 w-4" weight="duotone" />
606606
Documentation
607-
<ExternalLink className="ml-auto h-3 w-3" />
607+
<ArrowSquareOutIcon className="ml-auto h-3 w-3" weight="fill" />
608608
</a>
609609
</Button>
610610
<Button asChild size="sm" variant="outline">
611611
<a
612612
className="flex items-center gap-2"
613613
href="mailto:[email protected]"
614614
>
615-
<Info className="h-4 w-4" />
615+
<InfoIcon className="h-4 w-4" weight="duotone" />
616616
Get Support
617617
</a>
618618
</Button>

‎apps/dashboard/app/(main)/websites/[id]/funnels/_components/empty-state.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { PlusIcon, TargetIcon } from '@phosphor-icons/react';
3+
import { PlusIcon, FunnelIcon } from '@phosphor-icons/react';
44
import { Button } from '@/components/ui/button';
55
import { Card, CardContent } from '@/components/ui/card';
66
import { cn } from '@/lib/utils';
@@ -15,7 +15,7 @@ export function EmptyState({ onCreateFunnel }: EmptyStateProps) {
1515
<CardContent className="flex flex-col items-center justify-center px-8 py-16">
1616
<div className="group relative mb-8">
1717
<div className="rounded-full border-2 border-primary/20 bg-primary/10 p-6 transition-transform duration-300 group-hover:scale-105">
18-
<TargetIcon
18+
<FunnelIcon
1919
className="h-16 w-16 text-primary"
2020
size={16}
2121
weight="duotone"

‎apps/dashboard/app/(main)/websites/[id]/funnels/_components/page-header.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ export function PageHeader({
5555
className="gap-2 rounded-lg border-border/50 px-4 py-2 font-medium transition-all duration-300 hover:border-primary/50 hover:bg-primary/5"
5656
disabled={isRefreshing}
5757
onClick={onRefresh}
58-
size="default"
5958
variant="outline"
6059
>
6160
<ArrowClockwiseIcon

‎apps/dashboard/app/(main)/websites/[id]/funnels/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { ChartBarIcon, TrendDownIcon } from '@phosphor-icons/react';
3+
import { FunnelIcon, TrendDownIcon } from '@phosphor-icons/react';
44
import { useAtom } from 'jotai';
55
import { useParams } from 'next/navigation';
66
import { lazy, Suspense, useCallback, useMemo, useRef, useState } from 'react';
@@ -255,7 +255,7 @@ export default function FunnelsPage() {
255255
description="Track user journeys and optimize conversion drop-off points"
256256
hasError={!!funnelsError}
257257
icon={
258-
<ChartBarIcon
258+
<FunnelIcon
259259
className="h-6 w-6 text-primary"
260260
size={16}
261261
weight="duotone"

‎apps/dashboard/app/(main)/websites/[id]/goals/_components/empty-state.tsx‎

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,57 @@
11
'use client';
22

3-
import { Plus, Target } from '@phosphor-icons/react';
3+
import { PlusIcon, TargetIcon } from '@phosphor-icons/react';
44
import { Button } from '@/components/ui/button';
55
import { Card, CardContent } from '@/components/ui/card';
6+
import { cn } from '@/lib/utils';
67

78
interface EmptyStateProps {
89
onCreateGoal: () => void;
910
}
1011

1112
export function EmptyState({ onCreateGoal }: EmptyStateProps) {
1213
return (
13-
<Card className="rounded border-2 border-muted-foreground/25 border-dashed">
14-
<CardContent className="flex flex-col items-center justify-center px-6 py-12 text-center">
15-
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted/50">
16-
<Target
17-
className="text-muted-foreground"
18-
size={24}
19-
weight="duotone"
20-
/>
14+
<Card className="fade-in-50 animate-in rounded-xl border-2 border-dashed bg-gradient-to-br from-background to-muted/20 duration-700">
15+
<CardContent className="flex flex-col items-center justify-center px-8 py-16">
16+
<div className="group relative mb-8">
17+
<div className="rounded-full border-2 border-primary/20 bg-primary/10 p-6 transition-transform duration-300 group-hover:scale-105">
18+
<TargetIcon
19+
className="h-16 w-16 text-primary"
20+
size={16}
21+
weight="duotone"
22+
/>
23+
</div>
24+
<div className="-top-2 -right-2 absolute animate-pulse rounded-full border-2 border-primary/20 bg-background p-2 shadow-sm">
25+
<PlusIcon className="h-6 w-6 text-primary" size={16} />
26+
</div>
27+
</div>
28+
<div className="max-w-md space-y-4 text-center">
29+
<h3 className="font-semibold text-2xl text-foreground">
30+
No goals yet
31+
</h3>
32+
<p className="text-muted-foreground leading-relaxed">
33+
Track conversions like sign-ups, purchases, or button clicks
34+
to measure key user actions and optimize your conversion rates.
35+
</p>
36+
<div className="pt-2">
37+
<Button
38+
className={cn(
39+
'gap-2 rounded-lg px-8 py-4 font-medium text-base',
40+
'bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary',
41+
'group relative overflow-hidden transition-all duration-300'
42+
)}
43+
onClick={onCreateGoal}
44+
size="lg"
45+
>
46+
<div className="absolute inset-0 translate-x-[-100%] bg-gradient-to-r from-white/0 via-white/20 to-white/0 transition-transform duration-700 group-hover:translate-x-[100%]" />
47+
<PlusIcon
48+
className="relative z-10 h-5 w-5 transition-transform duration-300 group-hover:rotate-90"
49+
size={16}
50+
/>
51+
<span className="relative z-10">Create Your First Goal</span>
52+
</Button>
53+
</div>
2154
</div>
22-
23-
<h3 className="mb-2 font-semibold text-foreground text-lg">
24-
No goals yet
25-
</h3>
26-
27-
<p className="mb-6 max-w-sm text-muted-foreground text-sm">
28-
Track conversions like sign-ups, purchases, or button clicks
29-
</p>
30-
31-
<Button className="gap-2" onClick={onCreateGoal}>
32-
<Plus size={16} />
33-
Create Goal
34-
</Button>
3555
</CardContent>
3656
</Card>
3757
);

‎apps/dashboard/app/(main)/websites/[id]/goals/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { TrendDownIcon } from '@phosphor-icons/react';
3+
import { TargetIcon } from '@phosphor-icons/react';
44
import { useAtom } from 'jotai';
55
import { useParams } from 'next/navigation';
66
import {
@@ -200,7 +200,7 @@ export default function GoalsPage() {
200200
<Card className="rounded border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950">
201201
<CardContent className="pt-6">
202202
<div className="flex items-center gap-2">
203-
<TrendDownIcon
203+
<TargetIcon
204204
className="h-5 w-5 text-red-600"
205205
size={16}
206206
weight="duotone"
@@ -226,7 +226,7 @@ export default function GoalsPage() {
226226
description="Track key conversions and measure success"
227227
hasError={!!goalsError}
228228
icon={
229-
<TrendDownIcon
229+
<TargetIcon
230230
className="h-6 w-6 text-primary"
231231
size={16}
232232
weight="duotone"

‎apps/dashboard/app/(main)/websites/[id]/map/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ function WebsiteMapPage() {
137137
</Tabs>
138138
}
139139
icon={
140-
<GlobeIcon
140+
<MapPinIcon
141141
aria-label="Globe"
142142
className="h-5 w-5 text-primary"
143143
weight="duotone"

‎apps/dashboard/app/(main)/websites/[id]/profiles/_components/profiles-list.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { Loader2Icon, UserRound } from 'lucide-react';
3+
import { UsersIcon, SpinnerIcon } from '@phosphor-icons/react';
44
import { useCallback, useEffect, useState } from 'react';
55
import { Card, CardContent } from '@/components/ui/card';
66
import { useProfilesData } from '@/hooks/use-dynamic-query';
@@ -136,7 +136,7 @@ export function ProfilesList({ websiteId }: ProfilesListProps) {
136136
<div className="space-y-6">
137137
<WebsitePageHeader
138138
description="Visitor profiles with session data and behavior patterns"
139-
icon={<UserRound className="h-6 w-6 text-primary" />}
139+
icon={<UsersIcon className="h-6 w-6 text-primary" />}
140140
title="Recent Profiles"
141141
variant="minimal"
142142
websiteId={websiteId}
@@ -153,7 +153,7 @@ export function ProfilesList({ websiteId }: ProfilesListProps) {
153153
</div>
154154
<div className="flex items-center justify-center pt-4">
155155
<div className="flex items-center gap-2 text-muted-foreground">
156-
<Loader2Icon className="h-4 w-4 animate-spin" />
156+
<SpinnerIcon className="h-4 w-4 animate-spin" />
157157
<span className="text-sm">Loading profiles...</span>
158158
</div>
159159
</div>
@@ -170,7 +170,7 @@ export function ProfilesList({ websiteId }: ProfilesListProps) {
170170
description="Visitor profiles with session data and behavior patterns"
171171
errorMessage={error?.message || 'Failed to load profiles'}
172172
hasError={true}
173-
icon={<UserRound className="h-6 w-6 text-primary" />}
173+
icon={<UsersIcon className="h-6 w-6 text-primary" />}
174174
title="Recent Profiles"
175175
variant="minimal"
176176
websiteId={websiteId}
@@ -184,15 +184,15 @@ export function ProfilesList({ websiteId }: ProfilesListProps) {
184184
<div className="space-y-6">
185185
<WebsitePageHeader
186186
description="Visitor profiles with session data and behavior patterns"
187-
icon={<UserRound className="h-6 w-6 text-primary" />}
187+
icon={<UsersIcon className="h-6 w-6 text-primary" />}
188188
title="Recent Profiles"
189189
variant="minimal"
190190
websiteId={websiteId}
191191
/>
192192
<Card>
193193
<CardContent>
194-
<div className="py-12 text-center text-muted-foreground">
195-
<UserRound className="mx-auto mb-4 h-12 w-12 opacity-50" />
194+
<div className="flex flex-col items-center py-12 text-center text-muted-foreground">
195+
<UsersIcon className="mb-4 h-12 w-12 opacity-50" />
196196
<p className="mb-2 font-medium text-lg">No profiles found</p>
197197
<p className="text-sm">
198198
Visitor profiles will appear here once users visit your website
@@ -208,7 +208,7 @@ export function ProfilesList({ websiteId }: ProfilesListProps) {
208208
<div className="space-y-6">
209209
<WebsitePageHeader
210210
description="Visitor profiles with session data and behavior patterns"
211-
icon={<UserRound className="h-6 w-6 text-primary" />}
211+
icon={<UsersIcon className="h-6 w-6 text-primary" />}
212212
subtitle={`${allProfiles.length} loaded`}
213213
title="Recent Profiles"
214214
variant="minimal"
@@ -233,7 +233,7 @@ export function ProfilesList({ websiteId }: ProfilesListProps) {
233233
<div className="flex justify-center">
234234
{isLoading ? (
235235
<div className="flex items-center gap-2 text-muted-foreground">
236-
<Loader2Icon className="h-4 w-4 animate-spin" />
236+
<SpinnerIcon className="h-4 w-4 animate-spin" />
237237
<span className="text-sm">Loading more profiles...</span>
238238
</div>
239239
) : null}

0 commit comments

Comments
 (0)