0fdaedc7ff
Updates all remaining frontend components to use the new Barclays design system color tokens: - brand-dark-blue → primary-blue (#1A2142) - brand-accent → active-blue (#006DE3) - brand-light-blue → cyan-brand (#00AEEF) - brand-gray → grey-100 (#F6F6F6) Components updated: - CampaignDetail and ProofDetailView in Campaigns.tsx - Projects.tsx (full component migration) - StatusDashboard.tsx (status tiles and colors) - CreateProjectModal.tsx (modal styling) - FeedbackReport.tsx (remaining brand colors) - Login.tsx and Profile.tsx - WIPReviewer.tsx and CopyGenAI.tsx - Header, LoadingVisual, ToggleSwitch - AssetPreview, ProofPreview, AssetUpload - ProofTypeManager Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
25 lines
1.3 KiB
TypeScript
Executable file
25 lines
1.3 KiB
TypeScript
Executable file
import React from 'react';
|
|
import { BarclaysLogo } from './icons/BarclaysLogo';
|
|
|
|
export const LoadingVisual: React.FC = () => {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center text-center py-20 px-6 min-h-[600px]">
|
|
<div className="relative flex items-center justify-center w-48 h-48">
|
|
{/* Pulsing circles */}
|
|
<div className="absolute w-full h-full rounded-full bg-active-blue/20 animate-slow-ping"></div>
|
|
<div className="absolute w-3/4 h-3/4 rounded-full bg-active-blue/30 animate-slow-ping [animation-delay:-1s]"></div>
|
|
|
|
{/* Central Icon */}
|
|
<div className="relative bg-white backdrop-blur-sm rounded-full p-6 border border-gray-200 shadow-lg flex items-center justify-center w-28 h-28">
|
|
<BarclaysLogo className="h-16 w-16 text-active-blue" />
|
|
</div>
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-primary-blue mt-12">
|
|
Finalizing your report...
|
|
</h2>
|
|
<p className="text-gray-500 mt-2 max-w-md">
|
|
Our AI agents are completing their analysis. Your detailed feedback summary will appear here shortly.
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|