modcomms/frontend/components/LoadingVisual.tsx
Vadym Samoilenko 4302b9391a Restyle full application from Barclays to Oliver Agency brand
Replace entire Barclays colour palette (navy #1A2142, lime #C3FB5A, violet
#7A0FF9) with Oliver brand tokens: black #1A1A1A, gold #FFCB05, orange
#FF5C00, azure #0487B6, sky #5DF5EA, grey #EFEFEF, green #09821F.

- Switch font from Inter/Barclays Effra to Arial (system font)
- Add new Oliver logo asset (BAR-ModComms-logo-v4.png)
- Sidebar: black background, new logo, azure active state
- Hero: orange "Intelligent Review" text, hide AI-Powered tagline
- Hide ChecksOverview on Home page per Oliver design
- Toast notification: orange background with black text
- All tables: sky headers, alternating white/grey rows
- Campaign badges: gold "In Progress", green "Completed"
- Analytics: grey KPI cards, sky accent on Key Insight, oliver trend colours
- All buttons: azure fill, pill-shaped (rounded-full)
- All tabs/toggles/dropdowns: azure accent colour
- Update HTML title to "Mod Comms - Intelligent Review"
- Default border radius set to 10px

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-03 10:16:26 +00:00

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-oliver-azure/20 animate-slow-ping"></div>
<div className="absolute w-3/4 h-3/4 rounded-full bg-oliver-azure/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-oliver-azure" />
</div>
</div>
<h2 className="text-2xl font-bold text-oliver-black 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>
);
};