Merge pull request #153 from Johnpii1/issue-133

Issue 133

Author: Chucks1093

src/components/common/CreatorCard.tsx

@@ -118,6 +118,7 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 			<div className="relative mb-4 aspect-square overflow-hidden rounded-xl">
 				<CreatorInitialsAvatar
 					name={creator.title}
+					creatorId={creator.id}
 					imageSrc={creator.thumbnail}
 					imageClassName="transition-transform duration-500 md:group-hover:scale-[1.03]"
 				/>

src/components/common/CreatorInitialsAvatar.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { cn } from '@/lib/utils';
+import { getFallbackAvatarColors } from '@/utils/avatarColor.util';
 
 interface CreatorInitialsAvatarProps {
 	name: string;
+	creatorId?: string | number | null;
 	imageSrc?: string;
 	className?: string;
 	imageClassName?: string;
@@ -24,20 +26,26 @@ const getInitials = (name: string) => {
 
 const CreatorInitialsAvatar: React.FC<CreatorInitialsAvatarProps> = ({
 	name,
+	creatorId,
 	imageSrc,
 	className,
 	imageClassName,
 }) => {
 	const [hasError, setHasError] = useState(false);
 	const initials = getInitials(name);
+	const fallbackColors = getFallbackAvatarColors(creatorId);
 
 	if (!imageSrc || hasError) {
 		return (
 			<div
 				className={cn(
-					'flex size-full items-center justify-center bg-gradient-to-br from-slate-800 via-slate-700 to-amber-700 text-3xl font-black tracking-wide text-white/95',
+					'flex size-full items-center justify-center text-3xl font-black tracking-wide',
 					className
 				)}
+				style={{
+					background: fallbackColors.background,
+					color: fallbackColors.textColor,
+				}}
 			>
 				<span aria-label={`${name} initials avatar`}>{initials}</span>
 			</div>

src/components/common/CreatorProfileHeader.tsx

@@ -9,6 +9,7 @@ import CreatorInitialsAvatar from '@/components/common/CreatorInitialsAvatar';
 interface CreatorProfileHeaderProps {
 	name: string;
 	handle: string;
+	creatorId?: string | number | null;
 	avatarUrl?: string;
 	isVerified?: boolean;
 	className?: string;
@@ -17,6 +18,7 @@ interface CreatorProfileHeaderProps {
 const CreatorProfileHeader: React.FC<CreatorProfileHeaderProps> = ({
 	name,
 	handle,
+	creatorId,
 	avatarUrl,
 	isVerified,
 	className,
@@ -63,7 +65,7 @@ const CreatorProfileHeader: React.FC<CreatorProfileHeaderProps> = ({
 		>
 			<div className="flex flex-col gap-4 md:flex-row md:items-center md:gap-6">
 				<div className="size-24 overflow-hidden rounded-2xl border-4 border-white/10 shadow-xl md:size-32">
-					<CreatorInitialsAvatar name={name} imageSrc={avatarUrl} />
+					<CreatorInitialsAvatar name={name} creatorId={creatorId} imageSrc={avatarUrl} />
 				</div>
 				<div className="space-y-1">
 					<div className="flex items-center gap-2">

src/components/common/__tests__/CreatorInitialsAvatar.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import CreatorInitialsAvatar from '@/components/common/CreatorInitialsAvatar';
+import { getFallbackAvatarColors } from '@/utils/avatarColor.util';
+
+describe('CreatorInitialsAvatar', () => {
+	it('uses deterministic fallback colors for the same creator id', () => {
+		const first = getFallbackAvatarColors('creator-123');
+		const second = getFallbackAvatarColors('creator-123');
+		const third = getFallbackAvatarColors('creator-456');
+
+		expect(first).toEqual(second);
+		expect(first.background).not.toBe(third.background);
+		expect(first.textColor).toBe('rgba(255, 255, 255, 0.95)');
+	});
+
+	it('renders initials fallback with hashed background when image is missing', () => {
+		render(<CreatorInitialsAvatar name="Alex Rivers" creatorId="creator-123" />);
+
+		const initials = screen.getByLabelText('Alex Rivers initials avatar');
+		const avatar = initials.parentElement;
+		const colors = getFallbackAvatarColors('creator-123');
+
+		expect(initials).toHaveTextContent('AR');
+		expect(avatar).toHaveStyle({
+			background: colors.background,
+			color: colors.textColor,
+		});
+	});
+});

src/components/ui/dialog.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Dialog, DialogContent } from './dialog';
+
+describe('DialogContent', () => {
+	it('adds mobile safe-area bottom inset padding and restores desktop spacing', () => {
+		render(
+			<Dialog open>
+				<DialogContent>Dialog body</DialogContent>
+			</Dialog>
+		);
+
+		const content = screen.getByRole('dialog');
+		expect(content.className).toContain(
+			'pb-[calc(1.5rem+env(safe-area-inset-bottom))]'
+		);
+		expect(content.className).toContain('sm:pb-6');
+	});
+});

src/components/ui/dialog.tsx

@@ -59,7 +59,7 @@ function DialogContent({
 			<DialogPrimitive.Content
 				data-slot="dialog-content"
 				className={cn(
-					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',
+					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 pb-[calc(1.5rem+env(safe-area-inset-bottom))] shadow-lg duration-200 outline-none sm:max-w-lg sm:pb-6',
 					className
 				)}
 				{...props}

src/pages/LandingPage.tsx

@@ -482,6 +482,7 @@ function LandingPage() {
 					<CreatorProfileHeader
 						name="Alex Rivers"
 						handle="arivers"
+						creatorId="arivers"
 						isVerified={true}
 						avatarUrl="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop"
 					/>

src/utils/avatarColor.util.ts

@@ -0,0 +1,19 @@
+const stringHash = (value: string) => {
+	let hash = 0;
+	for (let i = 0; i < value.length; i += 1) {
+		hash = (hash * 31 + value.charCodeAt(i)) >>> 0;
+	}
+	return hash;
+};
+
+export const getFallbackAvatarColors = (creatorId?: string | number | null) => {
+	const normalizedId = String(creatorId ?? '').trim();
+	const hash = stringHash(normalizedId || 'fallback-avatar');
+	const baseHue = hash % 360;
+	const accentHue = (baseHue + 28) % 360;
+
+	return {
+		background: `linear-gradient(135deg, hsl(${baseHue} 65% 28%), hsl(${accentHue} 72% 36%))`,
+		textColor: 'rgba(255, 255, 255, 0.95)',
+	};
+};