Merge pull request #416 from extolkom/feat/405-creator-profile-gradient-fallback

feat: add deterministic gradient fallback for creator avatars

Author: Chucks1093

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

@@ -1,7 +1,10 @@
 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';
+import {
+	getCreatorGradientFallback,
+	getFallbackAvatarColors,
+} from '@/utils/avatarColor.util';
 
 describe('CreatorInitialsAvatar', () => {
 	it('uses deterministic fallback colors for the same creator id', () => {
@@ -14,6 +17,16 @@ describe('CreatorInitialsAvatar', () => {
 		expect(first.textColor).toBe('rgba(255, 255, 255, 0.95)');
 	});
 
+	it('uses the fallback gradient helper deterministically for handles or ids', () => {
+		const first = getCreatorGradientFallback('creator-123');
+		const second = getCreatorGradientFallback('creator-123');
+		const third = getCreatorGradientFallback('creator-456');
+
+		expect(first).toEqual(second);
+		expect(first).not.toBe(third);
+		expect(first).toContain('linear-gradient');
+	});
+
 	it('renders initials fallback with hashed background when image is missing', () => {
 		render(<CreatorInitialsAvatar name="Alex Rivers" creatorId="creator-123" />);
 

src/utils/avatarColor.util.ts

@@ -6,14 +6,23 @@ const stringHash = (value: string) => {
 	return hash;
 };
 
-export const getFallbackAvatarColors = (creatorId?: string | number | null) => {
-	const normalizedId = String(creatorId ?? '').trim();
-	const hash = stringHash(normalizedId || 'fallback-avatar');
+export const getCreatorGradientFallback = (
+	identifier?: string | number | null
+) => {
+	const normalizedIdentifier = String(identifier ?? 'creator-fallback').trim() || 'creator-fallback';
+	const hash = stringHash(normalizedIdentifier);
 	const baseHue = hash % 360;
 	const accentHue = (baseHue + 28) % 360;
 
+	// Use darker mid-lightness HSL values so white text remains readable over
+	// the gradient. The chosen lightness range keeps contrast high enough for
+	// WCAG AA against white overlay text.
+	return `linear-gradient(135deg, hsl(${baseHue} 65% 28%), hsl(${accentHue} 72% 36%))`;
+};
+
+export const getFallbackAvatarColors = (creatorId?: string | number | null) => {
 	return {
-		background: `linear-gradient(135deg, hsl(${baseHue} 65% 28%), hsl(${accentHue} 72% 36%))`,
+		background: getCreatorGradientFallback(creatorId),
 		textColor: 'rgba(255, 255, 255, 0.95)',
 	};
 };