diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx index 63facf48..ce09e6ba 100644 --- a/app/courrier/page.tsx +++ b/app/courrier/page.tsx @@ -102,6 +102,20 @@ interface EmailMessage { }; } +// Define a color palette for account circles +const colorPalette = [ + 'bg-blue-500', + 'bg-green-500', + 'bg-red-500', + 'bg-yellow-500', + 'bg-purple-500', + 'bg-pink-500', + 'bg-indigo-500', + 'bg-teal-500', + 'bg-orange-500', + 'bg-cyan-500', +]; + export default function CourrierPage() { const router = useRouter(); const { data: session } = useSession(); @@ -381,7 +395,7 @@ export default function CourrierPage() { id: account.id, name: account.display_name || account.email, email: account.email, - color: account.color || 'bg-blue-500', + color: colorPalette[(updatedAccounts.length - 1) % colorPalette.length], folders: validFolders }); console.log(`[DEBUG] Added account with folders:`, { @@ -402,7 +416,7 @@ export default function CourrierPage() { id: 'default-account', name: data.displayName || data.email, email: data.email, - color: 'bg-blue-500', + color: colorPalette[(updatedAccounts.length - 1) % colorPalette.length], folders: folderList }); } @@ -883,7 +897,7 @@ export default function CourrierPage() { id: `account-${Date.now()}`, // generate unique string ID name: formValues.display_name, email: formValues.email, - color: `bg-blue-500`, // Default color class + color: colorPalette[(accounts.length) % colorPalette.length], folders: testResult.details.sampleFolders || ['INBOX', 'Sent', 'Drafts', 'Trash'] // Use discovered folders or defaults };