standardize empty-state illustration sizing

Add shared empty-state illustration sizing tokens and apply them across existing empty-state surfaces to keep sizing consistent across breakpoints without changing assets.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: devsimze

src/components/common/CompactEmptyWalletState.tsx

@@ -1,5 +1,6 @@
 import { WalletMinimal } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { EMPTY_STATE_ILLUSTRATION_SIZES } from './emptyStateIllustration.config';
 
 interface CompactEmptyWalletStateProps {
 	title?: string;
@@ -19,8 +20,18 @@ const CompactEmptyWalletState: React.FC<CompactEmptyWalletStateProps> = ({
 				className
 			)}
 		>
-			<div className="mt-0.5 rounded-lg bg-amber-300/20 p-1.5">
-				<WalletMinimal className="size-4 text-amber-200" />
+			<div
+				className={cn(
+					'mt-0.5 flex items-center justify-center rounded-lg bg-amber-300/20',
+					EMPTY_STATE_ILLUSTRATION_SIZES.compactBadgeFrame
+				)}
+			>
+				<WalletMinimal
+					className={cn(
+						'text-amber-200',
+						EMPTY_STATE_ILLUSTRATION_SIZES.compactBadgeIcon
+					)}
+				/>
 			</div>
 			<div>
 				<p className="text-sm font-semibold text-amber-100">{title}</p>

src/components/common/EmptyState.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { RotateCcw } from 'lucide-react';
+import { EMPTY_STATE_ILLUSTRATION_SIZES } from './emptyStateIllustration.config';
 
 interface EmptyStateProps {
 	image: string;
@@ -26,11 +27,19 @@ const EmptyState: React.FC<EmptyStateProps> = ({
 			role="status"
 			aria-label={title}
 		>
-			<div className="relative mb-6">
+			<div
+				className={cn(
+					'relative mb-6 flex items-center justify-center',
+					EMPTY_STATE_ILLUSTRATION_SIZES.heroFrame
+				)}
+			>
 				<div className="absolute inset-0 size-full rounded-full bg-amber-500/10 blur-2xl" />
 				<img
 					src={image}
-					className="relative z-10 size-[180px] object-contain opacity-60 grayscale transition-all duration-500 hover:opacity-80 hover:grayscale-0"
+					className={cn(
+						'relative z-10 opacity-60 grayscale transition-all duration-500 hover:opacity-80 hover:grayscale-0',
+						EMPTY_STATE_ILLUSTRATION_SIZES.heroVisual
+					)}
 					alt=""
 					aria-hidden="true"
 				/>

src/components/common/emptyStateIllustration.config.ts

@@ -0,0 +1,8 @@
+export const EMPTY_STATE_ILLUSTRATION_SIZES = {
+	heroFrame: 'size-36 sm:size-40 md:size-44',
+	heroVisual: 'size-full object-contain',
+	compactBadgeFrame: 'size-8 shrink-0',
+	compactBadgeIcon: 'size-4',
+	panelBadgeFrame: 'size-11 shrink-0',
+	panelBadgeIcon: 'size-5',
+} as const;