From 75b2c6e6991bb4abab86cae264b811da3fa33169 Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Tue, 27 Jan 2026 13:52:57 -0600
Subject: [PATCH] Update modals and remaining UI components in Campaigns

- Update UploadProofModal with new design system colors
- Update LoadingCell progress bar to active-blue
- Update DeleteConfirmationModal with pill buttons and rounded corners
- Update CampaignDeleteConfirmationModal styling
- Apply consistent border radius (10px) to all modals
- Update drag & drop zone colors to use success theme

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/components/Campaigns.tsx | 156 +++++++++++++++---------------
 1 file changed, 78 insertions(+), 78 deletions(-)

diff --git a/frontend/components/Campaigns.tsx b/frontend/components/Campaigns.tsx
index f05f9e7..3b44df4 100755
--- a/frontend/components/Campaigns.tsx
+++ b/frontend/components/Campaigns.tsx
@@ -616,38 +616,38 @@ const UploadProofModal: React.FC<{
     return (
         <div className="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
              <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-                <div 
-                    className="fixed inset-0 bg-slate-900/75 backdrop-blur-sm transition-opacity" 
-                    aria-hidden="true" 
+                <div
+                    className="fixed inset-0 bg-slate-900/75 backdrop-blur-sm transition-opacity"
+                    aria-hidden="true"
                     onClick={onClose}
                 ></div>
                 <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">&#8203;</span>
-                
-                <div className="relative inline-block transform overflow-hidden rounded-2xl bg-white text-left align-bottom shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:align-middle border border-gray-100">
+
+                <div className="relative inline-block transform overflow-hidden rounded-[10px] bg-white text-left align-bottom shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:align-middle border border-grey-300">
                     {/* Header */}
-                    <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 border-b border-gray-100 flex justify-between items-start">
+                    <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 border-b border-grey-300 flex justify-between items-start">
                         <div>
-                             <h3 className="text-2xl font-bold text-brand-dark-blue" id="modal-title">Upload New Proof</h3>
-                             <p className="text-sm text-gray-500 mt-1">Drag and drop your asset below to start AI analysis.</p>
+                             <h3 className="text-2xl font-bold text-primary-blue" id="modal-title">Upload New Proof</h3>
+                             <p className="text-sm text-grey-900 mt-1">Drag and drop your asset below to start AI analysis.</p>
                         </div>
-                        <button 
-                            onClick={onClose} 
-                            className="rounded-full p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors"
+                        <button
+                            onClick={onClose}
+                            className="rounded-full p-2 text-grey-700 hover:bg-grey-100 hover:text-black-title transition-colors"
                         >
                             <XIcon className="h-6 w-6" />
                         </button>
                     </div>
-                    
+
                     {/* Content */}
                     <form onSubmit={handleSubmit}>
                         <div className="px-4 pt-5 pb-4 sm:p-8">
                             <div className="space-y-6">
                                 {/* Proof Name */}
                                 <div>
-                                    <label htmlFor="proof-name" className="block text-sm font-bold text-brand-dark-blue mb-2">Proof Name</label>
+                                    <label htmlFor="proof-name" className="block text-sm font-bold text-primary-blue mb-2">Proof Name</label>
                                     <div className="relative">
                                         <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                            <DocumentIcon className="h-5 w-5 text-gray-400" />
+                                            <DocumentIcon className="h-5 w-5 text-grey-700" />
                                         </div>
                                         <input
                                             id="proof-name"
@@ -656,13 +656,13 @@ const UploadProofModal: React.FC<{
                                             onChange={(e) => setProofName(e.target.value)}
                                             placeholder="e.g., Q4 Hero Instagram Post"
                                             disabled={isLoading}
-                                            className="w-full rounded-xl border-gray-300 shadow-sm focus:border-brand-accent focus:ring-brand-accent p-3 pl-10 bg-white transition-all text-gray-900"
+                                            className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 pl-10 bg-white transition-all text-black-title"
                                             required
                                         />
                                     </div>
                                      {isNewVersion && (
-                                        <p className="text-xs text-blue-600 mt-2 p-2 bg-blue-50 rounded-lg flex items-center gap-2">
-                                            <span className="w-1.5 h-1.5 rounded-full bg-blue-600"></span>
+                                        <p className="text-xs text-active-blue mt-2 p-2 bg-info-light rounded-[10px] flex items-center gap-2">
+                                            <span className="w-1.5 h-1.5 rounded-full bg-active-blue"></span>
                                             A proof with this name already exists. This will be uploaded as a new version.
                                         </p>
                                     )}
@@ -671,73 +671,73 @@ const UploadProofModal: React.FC<{
                                 {/* Dropdowns Grid */}
                                 <div className="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2">
                                     <div>
-                                        <label htmlFor="proof-channel" className="block text-sm font-bold text-brand-dark-blue mb-2">Channel</label>
+                                        <label htmlFor="proof-channel" className="block text-sm font-bold text-primary-blue mb-2">Channel</label>
                                         <div className="relative">
                                             <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                                <ChannelIcon className="h-5 w-5 text-gray-400" />
+                                                <ChannelIcon className="h-5 w-5 text-grey-700" />
                                             </div>
                                             <select
                                                 id="proof-channel"
                                                 value={channel}
                                                 onChange={(e) => setChannel(e.target.value)}
                                                 disabled={isLoading}
-                                                className="w-full rounded-xl border-gray-300 shadow-sm focus:border-brand-accent focus:ring-brand-accent p-3 pl-10 bg-white transition-all text-gray-900 appearance-none"
+                                                className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 pl-10 bg-white transition-all text-black-title appearance-none"
                                                 required
                                             >
                                                 <option value="" disabled>Select Channel</option>
                                                 {availableChannels.map(opt => <option key={opt} value={opt}>{opt}</option>)}
                                             </select>
-                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400">
+                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
                                                 <ChevronDownIcon className="h-4 w-4" />
                                             </div>
                                         </div>
                                     </div>
-                                    
+
                                     <div>
-                                        <label htmlFor="proof-sub-channel" className="block text-sm font-bold text-brand-dark-blue mb-2">Sub-Channel</label>
+                                        <label htmlFor="proof-sub-channel" className="block text-sm font-bold text-primary-blue mb-2">Sub-Channel</label>
                                         <div className="relative">
                                             <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                                <TagIcon className="h-5 w-5 text-gray-400" />
+                                                <TagIcon className="h-5 w-5 text-grey-700" />
                                             </div>
                                             <select
                                                 id="proof-sub-channel"
                                                 value={subChannel}
                                                 onChange={(e) => setSubChannel(e.target.value)}
                                                 disabled={isLoading || !channel}
-                                                className="w-full rounded-xl border-gray-300 shadow-sm focus:border-brand-accent focus:ring-brand-accent p-3 pl-10 bg-white transition-all text-gray-900 appearance-none disabled:bg-gray-100 disabled:text-gray-400"
+                                                className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 pl-10 bg-white transition-all text-black-title appearance-none disabled:bg-grey-100 disabled:text-grey-700"
                                                 required
                                             >
                                                 <option value="" disabled>Select Sub-Channel</option>
                                                 {availableSubChannels.map(opt => <option key={opt} value={opt}>{opt}</option>)}
                                             </select>
-                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400">
+                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
                                                 <ChevronDownIcon className="h-4 w-4" />
                                             </div>
                                         </div>
                                     </div>
 
                                     <div className="sm:col-span-2">
-                                        <label htmlFor="proof-type" className="block text-sm font-bold text-brand-dark-blue mb-2">Proof Type</label>
+                                        <label htmlFor="proof-type" className="block text-sm font-bold text-primary-blue mb-2">Proof Type</label>
                                         <div className="relative">
                                             <select
                                                 id="proof-type"
                                                 value={proofType}
                                                 onChange={(e) => setProofType(e.target.value)}
                                                 disabled={isLoading || !subChannel || availableProofTypes.length === 0}
-                                                className="w-full rounded-xl border-gray-300 shadow-sm focus:border-brand-accent focus:ring-brand-accent p-3 bg-white transition-all text-gray-900 appearance-none disabled:bg-gray-100 disabled:text-gray-400"
+                                                className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 bg-white transition-all text-black-title appearance-none disabled:bg-grey-100 disabled:text-grey-700"
                                                 required={showProofType}
                                             >
                                                 <option value="" disabled>
-                                                    {!subChannel 
-                                                        ? "Select a Sub-Channel first" 
-                                                        : availableProofTypes.length === 0 
-                                                            ? "No proof types available" 
+                                                    {!subChannel
+                                                        ? "Select a Sub-Channel first"
+                                                        : availableProofTypes.length === 0
+                                                            ? "No proof types available"
                                                             : "Select Proof Type"
                                                     }
                                                 </option>
                                                 {availableProofTypes.map(opt => <option key={opt} value={opt}>{opt}</option>)}
                                             </select>
-                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-400">
+                                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
                                                 <ChevronDownIcon className="h-4 w-4" />
                                             </div>
                                         </div>
@@ -746,45 +746,45 @@ const UploadProofModal: React.FC<{
 
                                 {/* Drag & Drop Zone */}
                                 <div>
-                                    <label className="block text-sm font-bold text-brand-dark-blue mb-2">Proof File</label>
-                                    <div 
+                                    <label className="block text-sm font-bold text-primary-blue mb-2">Proof File</label>
+                                    <div
                                         onDragOver={handleDragOver}
                                         onDrop={handleDrop}
                                         className={`
-                                            relative mt-1 flex justify-center px-6 pt-10 pb-10 border-2 border-dashed rounded-xl transition-all group cursor-pointer
-                                            ${file ? 'border-emerald-500 bg-emerald-50' : 'border-gray-300 hover:bg-emerald-50/30 hover:border-emerald-400/50'}
+                                            relative mt-1 flex justify-center px-6 pt-10 pb-10 border-2 border-dashed rounded-[10px] transition-all group cursor-pointer
+                                            ${file ? 'border-success bg-success-light' : 'border-grey-300 hover:bg-success-light/30 hover:border-success/50'}
                                         `}
                                     >
-                                        <input 
-                                            id="file-upload" 
-                                            name="file-upload" 
-                                            type="file" 
-                                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" 
-                                            ref={fileInputRef} 
-                                            onChange={handleFileChange} 
-                                            disabled={isLoading} 
-                                            accept="image/png, image/jpeg, image/webp, image/gif, video/mp4, application/pdf" 
+                                        <input
+                                            id="file-upload"
+                                            name="file-upload"
+                                            type="file"
+                                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                                            ref={fileInputRef}
+                                            onChange={handleFileChange}
+                                            disabled={isLoading}
+                                            accept="image/png, image/jpeg, image/webp, image/gif, video/mp4, application/pdf"
                                         />
                                         <div className="text-center space-y-2 pointer-events-none">
                                             {!file ? (
                                                 <>
-                                                    <div className="mx-auto h-16 w-16 bg-gray-100 text-gray-400 rounded-full flex items-center justify-center group-hover:scale-110 group-hover:text-emerald-600 group-hover:bg-emerald-100 transition-all duration-300">
+                                                    <div className="mx-auto h-16 w-16 bg-grey-100 text-grey-700 rounded-full flex items-center justify-center group-hover:scale-110 group-hover:text-success group-hover:bg-success-light transition-all duration-300">
                                                         <UploadIcon className="h-8 w-8" />
                                                     </div>
-                                                    <div className="text-sm text-gray-600">
-                                                        <span className="font-bold text-emerald-600">Click to upload</span> or drag and drop
+                                                    <div className="text-sm text-black-title">
+                                                        <span className="font-bold text-success">Click to upload</span> or drag and drop
                                                     </div>
-                                                    <p className="text-xs text-gray-400">SVG, PNG, JPG or GIF (max. 800x400px)</p>
+                                                    <p className="text-xs text-grey-700">SVG, PNG, JPG or GIF (max. 800x400px)</p>
                                                 </>
                                             ) : (
                                                 <>
-                                                    <div className="mx-auto h-16 w-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center scale-110 shadow-sm">
+                                                    <div className="mx-auto h-16 w-16 bg-success-light text-success rounded-full flex items-center justify-center scale-110 shadow-sm">
                                                         <CheckCircleIcon className="h-8 w-8" />
                                                     </div>
-                                                    <div className="text-sm font-bold text-brand-dark-blue truncate max-w-xs mx-auto">
+                                                    <div className="text-sm font-bold text-black-title truncate max-w-xs mx-auto">
                                                         {file.name}
                                                     </div>
-                                                    <p className="text-xs text-gray-500">Ready for analysis</p>
+                                                    <p className="text-xs text-grey-900">Ready for analysis</p>
                                                 </>
                                             )}
                                         </div>
@@ -794,19 +794,19 @@ const UploadProofModal: React.FC<{
                         </div>
 
                         {/* Footer */}
-                        <div className="bg-gray-50 px-4 py-4 sm:px-6 border-t border-gray-100 flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
-                             <button 
-                                type="button" 
-                                onClick={onClose} 
-                                disabled={isLoading} 
-                                className="w-full sm:w-auto bg-white border border-gray-300 text-gray-700 font-semibold py-2.5 px-5 rounded-xl hover:bg-gray-50 hover:text-gray-900 transition-colors duration-300 disabled:opacity-50"
+                        <div className="bg-grey-100 px-4 py-4 sm:px-6 border-t border-grey-300 flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
+                             <button
+                                type="button"
+                                onClick={onClose}
+                                disabled={isLoading}
+                                className="w-full sm:w-auto border-2 border-active-blue text-active-blue font-semibold py-2.5 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors duration-300 disabled:opacity-50"
                             >
                                 Cancel
                             </button>
-                            <button 
-                                type="submit" 
-                                disabled={isSubmitDisabled} 
-                                className="w-full sm:w-auto flex items-center justify-center bg-brand-accent text-white font-bold py-2.5 px-6 rounded-xl hover:bg-brand-dark-blue shadow-lg shadow-brand-accent/20 transition-all duration-300 disabled:bg-gray-300 disabled:text-gray-500 disabled:shadow-none disabled:cursor-not-allowed"
+                            <button
+                                type="submit"
+                                disabled={isSubmitDisabled}
+                                className="w-full sm:w-auto flex items-center justify-center bg-active-blue text-white font-bold py-2.5 px-6 rounded-full hover:bg-active-blue/90 shadow-lg shadow-active-blue/20 transition-all duration-300 disabled:bg-grey-300 disabled:text-grey-700 disabled:shadow-none disabled:cursor-not-allowed"
                             >
                                 {isLoading ? (
                                     <>
@@ -825,7 +825,7 @@ const UploadProofModal: React.FC<{
 
 const LoadingCell: React.FC<{ progress: { completed: number; total: number } }> = ({ progress }) => {
     const percent = progress.total > 0 ? Math.round((progress.completed / progress.total) * 100) : 0;
-    
+
     let statusText = 'Analyzing...';
     if (progress.completed < AGENT_NAMES.length) {
         const agentName = AGENT_NAMES[progress.completed];
@@ -838,13 +838,13 @@ const LoadingCell: React.FC<{ progress: { completed: number; total: number } }>
 
     return (
         <div className="flex flex-col items-center justify-center h-full px-2 text-center w-full">
-            <div className="w-full bg-gray-200 rounded-full h-1.5 mb-1.5">
-                <div 
-                    className="bg-brand-accent h-1.5 rounded-full" 
+            <div className="w-full bg-grey-300 rounded-full h-1.5 mb-1.5">
+                <div
+                    className="bg-active-blue h-1.5 rounded-full"
                     style={{ width: `${percent}%`, transition: 'width 0.3s ease-in-out' }}
                 ></div>
             </div>
-            <span className="text-xs text-gray-600 truncate w-full">{statusText} ({percent}%)</span>
+            <span className="text-xs text-black-title truncate w-full">{statusText} ({percent}%)</span>
         </div>
     );
 };
@@ -865,25 +865,25 @@ const DeleteConfirmationModal: React.FC<{
             role="dialog"
         >
             <div
-                className="bg-white rounded-lg shadow-xl p-6 sm:p-8 w-full max-w-md transform transition-all"
+                className="bg-white rounded-[10px] shadow-xl p-6 sm:p-8 w-full max-w-md transform transition-all"
                 onClick={e => e.stopPropagation()}
             >
-                <h3 className="text-xl font-bold text-brand-dark-blue">Confirm Deletion</h3>
-                <p className="text-gray-600 my-4">
+                <h3 className="text-xl font-bold text-primary-blue">Confirm Deletion</h3>
+                <p className="text-black-title my-4">
                     Are you sure you want to permanently delete the proof "{proofName}"? This action cannot be undone.
                 </p>
                 <div className="mt-6 flex justify-end gap-3">
                     <button
                         type="button"
                         onClick={onClose}
-                        className="bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-md hover:bg-gray-300 transition-colors"
+                        className="border-2 border-active-blue text-active-blue font-semibold py-2 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors"
                     >
                         Cancel
                     </button>
                     <button
                         type="button"
                         onClick={onConfirm}
-                        className="bg-red-600 text-white font-semibold py-2 px-4 rounded-md hover:bg-red-700 transition-colors"
+                        className="bg-error text-white font-semibold py-2 px-6 rounded-full hover:bg-error/90 transition-colors"
                     >
                         Delete Proof
                     </button>
@@ -912,11 +912,11 @@ const CampaignDeleteConfirmationModal: React.FC<{
             role="dialog"
         >
             <div
-                className="bg-white rounded-lg shadow-xl p-6 sm:p-8 w-full max-w-md transform transition-all"
+                className="bg-white rounded-[10px] shadow-xl p-6 sm:p-8 w-full max-w-md transform transition-all"
                 onClick={e => e.stopPropagation()}
             >
-                <h3 className="text-xl font-bold text-brand-dark-blue">Confirm Deletion</h3>
-                <p className="text-gray-600 my-4">
+                <h3 className="text-xl font-bold text-primary-blue">Confirm Deletion</h3>
+                <p className="text-black-title my-4">
                     {isBulk ? (
                         <>Are you sure you want to permanently delete <strong>{selectedCount} selected campaign{selectedCount !== 1 ? 's' : ''}</strong>? All associated proofs will also be deleted. This action cannot be undone.</>
                     ) : (
@@ -927,14 +927,14 @@ const CampaignDeleteConfirmationModal: React.FC<{
                     <button
                         type="button"
                         onClick={onClose}
-                        className="bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-md hover:bg-gray-300 transition-colors"
+                        className="border-2 border-active-blue text-active-blue font-semibold py-2 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors"
                     >
                         Cancel
                     </button>
                     <button
                         type="button"
                         onClick={onConfirm}
-                        className="bg-red-600 text-white font-semibold py-2 px-4 rounded-md hover:bg-red-700 transition-colors"
+                        className="bg-error text-white font-semibold py-2 px-6 rounded-full hover:bg-error/90 transition-colors"
                     >
                         {isBulk ? `Delete ${selectedCount} Campaign${selectedCount !== 1 ? 's' : ''}` : 'Delete Campaign'}
                     </button>