UI overhaul: white backgrounds, flat design, teal hero, sidebar flush-left nav
- Add teal-brand (#01A1A2) color to Tailwind config - Hero: white bg, teal text, remove gradient circles/noise overlay, font-semibold - Sidebar: stacked logo, lime COMPLIANCE AI, flush-left active items, remove blue dots - ChecksOverview: remove gradient background and decorative blurs - Campaigns: white bg, primary-blue table text, font-semibold headings - Analytics: white bg, borderless shadow cards, sentence case headings - Auditing: white bg, font-semibold heading - Settings: white bg, remove tab container styling, flat cards, sentence case Proof types - Profile: white bg, flat layout, active-blue question button, design system colors - All page titles changed from font-bold to font-semibold Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
michael
parent
ebf92a91c7
commit
325221610f
9 changed files with 72 additions and 89 deletions
|
|
@ -65,9 +65,9 @@ export const Analytics: React.FC = () => {
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
|
||||
<header className="mb-8">
|
||||
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Performance Analytics</h1>
|
||||
<h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Performance analytics</h1>
|
||||
<p className="text-base lg:text-lg text-primary-blue mt-1">Overall usage and performance statistics for the tool.</p>
|
||||
</header>
|
||||
|
||||
|
|
@ -77,7 +77,7 @@ export const Analytics: React.FC = () => {
|
|||
{stats.map((stat) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<div key={stat.name} className="bg-grey-100 rounded-[10px] p-6 flex items-start border-2 border-grey-300 transition-all hover:shadow-lg hover:border-active-blue">
|
||||
<div key={stat.name} className="bg-white rounded-[10px] p-6 flex items-start shadow-sm transition-all hover:shadow-lg">
|
||||
<div className="p-3 rounded-full bg-white text-black-title mr-4 flex-shrink-0">
|
||||
<Icon className="h-9 w-9" />
|
||||
</div>
|
||||
|
|
@ -93,7 +93,7 @@ export const Analytics: React.FC = () => {
|
|||
|
||||
{/* AI Performance Summary */}
|
||||
<section className="mt-10">
|
||||
<h2 className="text-2xl font-bold text-primary-blue mb-4">AI Performance Summary</h2>
|
||||
<h2 className="text-2xl font-semibold text-primary-blue mb-4">AI performance summary</h2>
|
||||
<div className="bg-white border-2 border-electric-violet text-black-title p-6 rounded-[10px] shadow-md flex items-start gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<LightbulbIcon className="h-7 w-7 text-electric-violet" />
|
||||
|
|
@ -109,7 +109,7 @@ export const Analytics: React.FC = () => {
|
|||
|
||||
{/* Agent Performance Table */}
|
||||
<section className="mt-10">
|
||||
<h2 className="text-2xl font-bold text-primary-blue mb-4">Agent Performance (Last 7 Days)</h2>
|
||||
<h2 className="text-2xl font-semibold text-primary-blue mb-4">Agent performance (last 7 days)</h2>
|
||||
<div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full">
|
||||
|
|
|
|||
|
|
@ -163,9 +163,9 @@ export const Auditing: React.FC<AuditingProps> = ({ flaggedItems, resolvedItems,
|
|||
const [activeTab, setActiveTab] = useState<'Flags' | 'Resolutions' | 'Errors'>('Flags');
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
|
||||
<header className="mb-8">
|
||||
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Auditing</h1>
|
||||
<h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Auditing</h1>
|
||||
<p className="text-base lg:text-lg text-primary-blue mt-1">Review and investigate all user-flagged feedback.</p>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -364,7 +364,7 @@ const CampaignList: React.FC<{
|
|||
const isIndeterminate = selectedCampaigns.size > 0 && selectedCampaigns.size < filteredCampaigns.length;
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
|
||||
<CampaignDeleteConfirmationModal
|
||||
isOpen={!!campaignToDelete}
|
||||
onClose={() => setCampaignToDelete(null)}
|
||||
|
|
@ -388,7 +388,7 @@ const CampaignList: React.FC<{
|
|||
<header className="mb-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Campaigns</h1>
|
||||
<h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Campaigns</h1>
|
||||
<p className="text-base lg:text-lg text-primary-blue mt-1">Manage your campaigns and proof collections.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
|
|
@ -478,8 +478,8 @@ const CampaignList: React.FC<{
|
|||
aria-label={`Select ${campaign.name}`}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-black-title">{campaign.name}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{campaign.proofs}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{campaign.name}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{campaign.proofs}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm w-40">
|
||||
<div className="relative">
|
||||
<select
|
||||
|
|
@ -495,9 +495,9 @@ const CampaignList: React.FC<{
|
|||
<ChevronDownIcon className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 h-full w-4 text-black-title" />
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{campaign.agencyLead}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{campaign.agency}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{formatDate(campaign.lastModified)}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{campaign.agencyLead}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{campaign.agency}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-primary-blue">{formatDate(campaign.lastModified)}</td>
|
||||
<td className="px-4 py-4 whitespace-nowrap text-sm text-right">
|
||||
<button
|
||||
onClick={(e) => handleSingleDelete(campaign, e)}
|
||||
|
|
@ -1061,7 +1061,7 @@ const CampaignDetail: React.FC<{
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
|
||||
<DeleteConfirmationModal
|
||||
isOpen={!!proofToDelete}
|
||||
onClose={() => setProofToDelete(null)}
|
||||
|
|
@ -1089,7 +1089,7 @@ const CampaignDetail: React.FC<{
|
|||
<ArrowLeftIcon className="h-6 w-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">{campaignName}</h1>
|
||||
<h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">{campaignName}</h1>
|
||||
<p className="text-base lg:text-lg text-grey-900 mt-1">Proof overview and compliance status.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1450,7 +1450,7 @@ const ProofDetailView: React.FC<{
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
|
||||
<header className="mb-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
|
|
@ -1462,7 +1462,7 @@ const ProofDetailView: React.FC<{
|
|||
<ArrowLeftIcon className="h-6 w-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">{proof.proofName}</h1>
|
||||
<h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">{proof.proofName}</h1>
|
||||
<div className="flex items-center gap-2 mt-2 text-sm text-grey-700 font-medium">
|
||||
<span>{proof.channel}</span>
|
||||
<span className="text-grey-300">•</span>
|
||||
|
|
@ -1482,7 +1482,7 @@ const ProofDetailView: React.FC<{
|
|||
<div className="lg:col-span-1">
|
||||
<div className="sticky top-8 flex flex-col gap-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-primary-blue mb-4">
|
||||
<h2 className="text-2xl font-semibold text-primary-blue mb-4">
|
||||
Proof Preview
|
||||
</h2>
|
||||
<ProofPreview
|
||||
|
|
@ -1494,7 +1494,7 @@ const ProofDetailView: React.FC<{
|
|||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3 gap-2">
|
||||
<h3 className="text-xl font-bold text-primary-blue flex items-center gap-2">
|
||||
<h3 className="text-xl font-semibold text-primary-blue flex items-center gap-2">
|
||||
<HistoryIcon className="h-6 w-6 text-active-blue"/>
|
||||
Version History
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -41,12 +41,7 @@ const specialistAgents: CheckDetail[] = [
|
|||
|
||||
export const ChecksOverview: React.FC = () => {
|
||||
return (
|
||||
<div className="relative bg-gradient-to-br from-lime/20 via-white to-lime/10 py-12 sm:py-16 w-full">
|
||||
{/* Decorative Background */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 left-1/4 w-[800px] h-[800px] bg-lime/30 rounded-full blur-3xl -translate-y-1/2 mix-blend-multiply"></div>
|
||||
<div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-success-light rounded-full blur-3xl translate-y-1/3 mix-blend-multiply"></div>
|
||||
</div>
|
||||
<div className="relative bg-white py-12 sm:py-16 w-full">
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Header */}
|
||||
|
|
@ -55,7 +50,7 @@ export const ChecksOverview: React.FC = () => {
|
|||
<span className="w-2 h-2 rounded-full bg-success mr-2 animate-pulse"></span>
|
||||
Intelligent Workflow
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-extrabold text-primary-blue tracking-tight mb-4">
|
||||
<h2 className="text-3xl md:text-4xl font-semibold text-primary-blue tracking-tight mb-4">
|
||||
Orchestrated by AI
|
||||
</h2>
|
||||
<p className="text-lg text-black-title leading-relaxed">
|
||||
|
|
|
|||
|
|
@ -14,36 +14,28 @@ const ArrowRightIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
|
|||
|
||||
export const Hero: React.FC<HeroProps> = ({ onGetStarted }) => {
|
||||
return (
|
||||
<div className="relative overflow-hidden bg-primary-blue min-h-[350px] sm:min-h-[400px] md:min-h-[500px] flex items-center">
|
||||
{/* Abstract background elements */}
|
||||
<div className="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-active-blue/20 blur-3xl pointer-events-none"></div>
|
||||
<div className="absolute bottom-[-20%] left-[-10%] w-[500px] h-[500px] rounded-full bg-electric-violet/20 blur-3xl pointer-events-none"></div>
|
||||
|
||||
{/* Grid Pattern Overlay */}
|
||||
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 pointer-events-none"></div>
|
||||
|
||||
<div className="relative overflow-hidden bg-white min-h-[350px] sm:min-h-[400px] md:min-h-[500px] flex items-center">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10 w-full">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center px-3 py-1 rounded-full bg-active-blue/10 border border-active-blue/20 text-cyan-brand text-xs font-bold uppercase tracking-widest mb-6">
|
||||
<span className="w-2 h-2 rounded-full bg-cyan-brand mr-2 animate-pulse"></span>
|
||||
<div className="text-teal-brand text-xs font-bold uppercase tracking-widest mb-6">
|
||||
AI-Powered Compliance
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-extrabold text-white leading-tight mb-6">
|
||||
<h1 className="text-5xl md:text-7xl font-semibold text-teal-brand leading-tight mb-6">
|
||||
Mod Comms <br/>
|
||||
<span className="text-electric-violet">
|
||||
Intelligent Review
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl text-slate-300 mb-10 leading-relaxed max-w-2xl">
|
||||
<p className="text-lg md:text-xl text-teal-brand mb-10 leading-relaxed max-w-2xl">
|
||||
Streamline your creative approval process. Mod Comms analyses your proofs against guidelines and best practice in seconds, not days.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button
|
||||
onClick={onGetStarted}
|
||||
className="group inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-active-blue rounded-full shadow-lg shadow-active-blue/30 hover:bg-active-blue/90 transition-all duration-300"
|
||||
className="group inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-active-blue rounded-full hover:bg-active-blue/90 transition-all duration-300"
|
||||
>
|
||||
Start Analysis
|
||||
<ArrowRightIcon className="ml-2 h-5 w-5 transform group-hover:translate-x-1 transition-transform" />
|
||||
|
|
|
|||
|
|
@ -73,35 +73,35 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-white">
|
||||
<header className="mb-8">
|
||||
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Your Profile</h1>
|
||||
<p className="text-base lg:text-lg text-gray-600 mt-1">View your account details and manage settings.</p>
|
||||
<h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Your Profile</h1>
|
||||
<p className="text-base lg:text-lg text-grey-700 mt-1">View your account details and manage settings.</p>
|
||||
</header>
|
||||
|
||||
<div className="max-w-3xl">
|
||||
<section className="bg-white rounded-lg shadow-md p-6 sm:p-8 border border-gray-200">
|
||||
<h2 className="text-2xl font-bold text-primary-blue mb-6">Account Information</h2>
|
||||
<section className="p-6 sm:p-8">
|
||||
<h2 className="text-2xl font-semibold text-primary-blue mb-6">Account Information</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-5">
|
||||
{Object.entries(userDetails).map(([key, value]) => (
|
||||
<div key={key}>
|
||||
<p className="text-sm font-semibold text-gray-500 tracking-wide uppercase">{key}</p>
|
||||
<p className="text-lg text-gray-800 mt-1">{value}</p>
|
||||
<p className="text-sm font-semibold text-grey-700 tracking-wide uppercase">{key}</p>
|
||||
<p className="text-lg text-black-title mt-1">{value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200 mt-8 pt-6 flex flex-col sm:flex-row gap-3">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex items-center justify-center gap-2 bg-red-600 text-white font-semibold py-2 px-4 rounded-md hover:bg-red-700 transition-colors duration-300"
|
||||
<div className="border-t border-grey-300 mt-8 pt-6 flex flex-col sm:flex-row gap-3">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex items-center justify-center gap-2 bg-error text-white font-semibold py-2 px-4 rounded-md hover:bg-error/90 transition-colors duration-300"
|
||||
>
|
||||
<LogoutIcon className="h-5 w-5" />
|
||||
Logout
|
||||
</button>
|
||||
<button
|
||||
<button
|
||||
onClick={handleToggleQuestionForm}
|
||||
className="flex items-center justify-center gap-2 bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-md hover:bg-gray-300 transition-colors duration-300"
|
||||
className="flex items-center justify-center gap-2 text-active-blue hover:text-active-blue/80 bg-transparent font-semibold py-2 px-4 rounded-md transition-colors duration-300"
|
||||
>
|
||||
<QuestionMarkIcon className="h-5 w-5" />
|
||||
Got a question?
|
||||
|
|
@ -110,10 +110,10 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
|
|||
</section>
|
||||
|
||||
{isQuestionFormVisible && (
|
||||
<section className="mt-8 bg-white rounded-lg shadow-md p-6 sm:p-8 border border-gray-200">
|
||||
<h2 className="text-2xl font-bold text-primary-blue mb-4">Ask a Question</h2>
|
||||
<section className="mt-8 p-6 sm:p-8">
|
||||
<h2 className="text-2xl font-semibold text-primary-blue mb-4">Ask a Question</h2>
|
||||
<form onSubmit={handleSubmitQuestion}>
|
||||
<p className="text-gray-600 mb-4">Your question will be sent to the OLIVER Agency support team.</p>
|
||||
<p className="text-grey-700 mb-4">Your question will be sent to the OLIVER Agency support team.</p>
|
||||
{submitStatus && (
|
||||
<div className={`mb-4 p-3 rounded-md ${submitStatus.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
|
||||
{submitStatus.message}
|
||||
|
|
@ -122,7 +122,7 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
|
|||
<textarea
|
||||
value={question}
|
||||
onChange={(e) => setQuestion(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-active-blue focus:border-active-blue transition"
|
||||
className="w-full p-3 border border-grey-300 rounded-md focus:ring-2 focus:ring-active-blue focus:border-active-blue transition text-black-title"
|
||||
placeholder="Type your question here..."
|
||||
rows={5}
|
||||
required
|
||||
|
|
@ -131,7 +131,7 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
|
|||
<div className="mt-4 flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-active-blue text-white font-semibold py-2 px-5 rounded-md hover:bg-primary-blue transition-colors duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
className="bg-active-blue text-white font-semibold py-2 px-5 rounded-md hover:bg-primary-blue transition-colors duration-300 disabled:bg-grey-300 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
disabled={!question.trim() || isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ const ManagementCard: React.FC<ManagementCardProps> = ({ title, items, onAdd, on
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-[10px] shadow-md p-6 border border-grey-300 flex flex-col h-full">
|
||||
<h2 className="text-xl font-bold text-primary-blue mb-4">{title}</h2>
|
||||
<div className="p-6 flex flex-col h-full">
|
||||
<h2 className="text-xl font-semibold text-primary-blue mb-4">{title}</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex gap-2 mb-4">
|
||||
<input
|
||||
|
|
@ -159,8 +159,8 @@ const UsersTab: React.FC = () => {
|
|||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Add User Section */}
|
||||
<div className="bg-white rounded-[10px] shadow-md p-6 border border-grey-300">
|
||||
<h3 className="text-lg font-bold text-primary-blue mb-4 flex items-center gap-2">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-primary-blue mb-4 flex items-center gap-2">
|
||||
<PlusIcon className="h-5 w-5 text-active-blue" />
|
||||
Add New User
|
||||
</h3>
|
||||
|
|
@ -210,7 +210,7 @@ const UsersTab: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* User List */}
|
||||
<div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
|
||||
<div className="overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full">
|
||||
<thead className="bg-lime">
|
||||
|
|
@ -321,9 +321,9 @@ export const Settings: React.FC<SettingsProps> = ({
|
|||
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100 flex flex-col">
|
||||
<div className="p-4 sm:p-6 lg:p-8 h-full bg-white flex flex-col">
|
||||
<header className="mb-6 flex-shrink-0">
|
||||
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Settings</h1>
|
||||
<h1 className="text-3xl lg:text-4xl font-semibold text-primary-blue">Settings</h1>
|
||||
<p className="text-base lg:text-lg text-primary-blue mt-1">
|
||||
Configure application defaults and user access.
|
||||
</p>
|
||||
|
|
@ -331,13 +331,13 @@ export const Settings: React.FC<SettingsProps> = ({
|
|||
|
||||
<div className="flex-1 flex flex-col min-h-0">
|
||||
{/* Tabs Header */}
|
||||
<div className="border-b border-grey-300 bg-white px-4 rounded-t-[10px] shadow-sm flex-shrink-0">
|
||||
<div className="border-b border-grey-300 flex-shrink-0">
|
||||
<nav className="-mb-px flex space-x-8 overflow-x-auto" aria-label="Tabs">
|
||||
{[
|
||||
{ id: 'Campaigns', label: 'Campaigns' },
|
||||
{ id: 'Channels', label: 'Channels' },
|
||||
{ id: 'SubChannels', label: 'Sub-channels' },
|
||||
{ id: 'ProofTypes', label: 'Proof Types' },
|
||||
{ id: 'ProofTypes', label: 'Proof types' },
|
||||
{ id: 'Users', label: 'Users' },
|
||||
{ id: 'Beta', label: '[Beta]' },
|
||||
].map((tab) => (
|
||||
|
|
@ -475,7 +475,7 @@ export const Settings: React.FC<SettingsProps> = ({
|
|||
{activeTab === 'Beta' && (
|
||||
<div className="max-w-3xl space-y-6">
|
||||
<div className="bg-white rounded-[10px] shadow-md p-6 border border-grey-300">
|
||||
<h2 className="text-xl font-bold text-primary-blue mb-2 flex items-center gap-2">
|
||||
<h2 className="text-xl font-semibold text-primary-blue mb-2 flex items-center gap-2">
|
||||
<span className="relative flex h-3 w-3">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-electric-violet opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-3 w-3 bg-electric-violet"></span>
|
||||
|
|
|
|||
|
|
@ -29,23 +29,21 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
|
|||
return (
|
||||
<aside className="w-72 flex-shrink-0 bg-primary-blue text-slate-200 flex flex-col border-r border-white/10 font-sans">
|
||||
{/* Brand Header */}
|
||||
<div className="h-24 flex items-center px-8 border-b border-white/10">
|
||||
<BarclaysLogo className="h-8 w-auto text-cyan-brand" />
|
||||
<div className="ml-3 flex flex-col">
|
||||
<span className="text-lg font-bold tracking-tight text-white leading-tight">
|
||||
Mod Comms
|
||||
</span>
|
||||
<span className="text-xs text-electric-violet uppercase tracking-widest font-semibold">
|
||||
Compliance AI
|
||||
</span>
|
||||
<span className="text-xs text-grey-700 tracking-wider mt-0.5">
|
||||
powered by <span className="font-bold">OLIVER</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="py-6 px-8 border-b border-white/10 flex flex-col items-center text-center">
|
||||
<BarclaysLogo className="h-10 w-auto text-cyan-brand mb-2" />
|
||||
<span className="text-lg font-bold tracking-tight text-white leading-tight">
|
||||
Mod Comms
|
||||
</span>
|
||||
<span className="text-xs text-lime uppercase tracking-widest font-semibold">
|
||||
Compliance AI
|
||||
</span>
|
||||
<span className="text-xs text-grey-700 tracking-wider mt-0.5">
|
||||
powered by <span className="font-bold">OLIVER</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 px-4 py-8 space-y-2 overflow-y-auto">
|
||||
<nav className="flex-1 pr-4 pl-0 py-8 space-y-2 overflow-y-auto">
|
||||
{navigation.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = item.name === activeItem;
|
||||
|
|
@ -55,21 +53,18 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, userNa
|
|||
<button
|
||||
key={item.name}
|
||||
onClick={() => !isComingSoon && onNavigate(item.name)}
|
||||
className={`group w-full flex items-center px-4 py-3.5 text-left text-sm font-medium rounded-[10px] transition-all duration-300 ease-in-out ${
|
||||
className={`group w-full flex items-center pl-8 pr-4 py-3.5 text-left text-sm font-medium transition-all duration-300 ease-in-out ${
|
||||
isActive
|
||||
? 'bg-white text-primary-blue shadow-lg'
|
||||
? 'bg-white text-primary-blue shadow-lg rounded-r-[10px] rounded-l-none'
|
||||
: isComingSoon
|
||||
? 'text-slate-600 cursor-not-allowed'
|
||||
: 'text-slate-300 hover:bg-white/10 hover:text-white'
|
||||
? 'text-slate-600 cursor-not-allowed rounded-[10px]'
|
||||
: 'text-slate-300 hover:bg-white/10 hover:text-white rounded-[10px]'
|
||||
}`}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
disabled={isComingSoon}
|
||||
>
|
||||
<Icon className={`h-5 w-5 mr-4 transition-transform duration-300 ${isActive ? 'scale-110' : 'group-hover:scale-110'}`} />
|
||||
<span className="flex-1 tracking-wide">{item.name}</span>
|
||||
{isActive && (
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-active-blue"></div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
'electric-violet': '#7A0FF9',
|
||||
'lime': '#C3FB5A',
|
||||
'cyan-brand': '#00AEEF',
|
||||
'teal-brand': '#01A1A2',
|
||||
|
||||
// Functional Colors
|
||||
'grey-100': '#F6F6F6',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue