Apply Barclays brand colors to Projects.tsx and fix Sidebar corner radius
Updates Projects.tsx to use Barclays design system colors throughout: - StatusBadge: bg-warning/bg-success/bg-warning-light/bg-grey-100 - OverallStatusBadge: bg-success/bg-error/bg-grey-300 - Tables: bg-lime headers, bg-grey-300 borders, even:bg-grey-100 rows - Buttons: rounded-full pill shape, border-2 outlines - Forms: rounded-[10px], text-black-title labels - Hover states: hover:bg-info-light for row selection - Delete modal: rounded-[10px], bg-error delete button Updates Sidebar.tsx nav buttons from rounded-xl to rounded-[10px] per spec. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
michael
parent
0fdaedc7ff
commit
7698bbbd5a
2 changed files with 104 additions and 104 deletions
|
|
@ -157,16 +157,16 @@ const StatusBadge: React.FC<{ status: string }> = ({ status }) => {
|
|||
let colorClasses = '';
|
||||
switch (status) {
|
||||
case 'In Progress':
|
||||
colorClasses = 'bg-blue-100 text-blue-800';
|
||||
colorClasses = 'bg-warning text-black-title';
|
||||
break;
|
||||
case 'Completed':
|
||||
colorClasses = 'bg-green-100 text-green-800';
|
||||
colorClasses = 'bg-success text-white';
|
||||
break;
|
||||
case 'Needs Review':
|
||||
colorClasses = 'bg-yellow-100 text-yellow-800';
|
||||
colorClasses = 'bg-warning-light text-black-title';
|
||||
break;
|
||||
default:
|
||||
colorClasses = 'bg-gray-100 text-gray-800';
|
||||
colorClasses = 'bg-grey-100 text-black-title';
|
||||
}
|
||||
return (
|
||||
<span className={`px-2.5 py-0.5 text-xs font-semibold rounded-full ${colorClasses}`}>
|
||||
|
|
@ -179,16 +179,16 @@ const OverallStatusBadge: React.FC<{ status: 'Passed' | 'Failed' | 'Analysis Err
|
|||
let colorClasses = '';
|
||||
switch (status) {
|
||||
case 'Passed':
|
||||
colorClasses = 'bg-green-100 text-green-800';
|
||||
colorClasses = 'bg-success text-white';
|
||||
break;
|
||||
case 'Failed':
|
||||
colorClasses = 'bg-red-100 text-red-800';
|
||||
colorClasses = 'bg-error text-white';
|
||||
break;
|
||||
case 'Analysis Error':
|
||||
colorClasses = 'bg-gray-200 text-gray-800';
|
||||
colorClasses = 'bg-grey-300 text-black-title';
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center px-3 py-1 text-sm font-bold rounded-full ${colorClasses}`}>
|
||||
{status}
|
||||
|
|
@ -213,13 +213,13 @@ const ProjectList: React.FC<{
|
|||
let colorClasses = '';
|
||||
switch (status) {
|
||||
case 'In Progress':
|
||||
colorClasses = 'bg-blue-100 text-blue-800';
|
||||
colorClasses = 'bg-warning text-black-title';
|
||||
break;
|
||||
case 'Completed':
|
||||
colorClasses = 'bg-green-100 text-green-800';
|
||||
colorClasses = 'bg-success text-white';
|
||||
break;
|
||||
default:
|
||||
colorClasses = 'bg-gray-100 text-gray-800';
|
||||
colorClasses = 'bg-grey-100 text-black-title';
|
||||
}
|
||||
return `${baseClasses} ${colorClasses}`;
|
||||
};
|
||||
|
|
@ -230,16 +230,16 @@ const ProjectList: React.FC<{
|
|||
<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">Projects</h1>
|
||||
<p className="text-base lg:text-lg text-gray-600 mt-1">Manage your campaigns and asset collections.</p>
|
||||
<p className="text-base lg:text-lg text-primary-blue mt-1">Manage your campaigns and asset collections.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<label htmlFor="show-completed" className="text-sm font-medium text-gray-700 whitespace-nowrap">Show Completed</label>
|
||||
<label htmlFor="show-completed" className="text-sm font-medium text-black-title whitespace-nowrap">Show Completed</label>
|
||||
<ToggleSwitch enabled={showCompleted} onChange={setShowCompleted} />
|
||||
</div>
|
||||
<button
|
||||
onClick={onOpenModal}
|
||||
className="flex items-center gap-2 bg-active-blue text-white font-semibold py-2 px-4 rounded-lg hover:bg-primary-blue transition-colors duration-300"
|
||||
className="flex items-center gap-2 bg-active-blue text-white font-semibold py-2 px-4 rounded-full hover:bg-primary-blue transition-colors duration-300"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
Create New Project
|
||||
|
|
@ -249,25 +249,25 @@ const ProjectList: React.FC<{
|
|||
</header>
|
||||
|
||||
<section>
|
||||
<div className="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
|
||||
<div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<table className="min-w-full divide-y divide-grey-300">
|
||||
<thead className="bg-lime">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Project Name</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Assets</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Status</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Created By</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Owning Agency</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Last Modified</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Project Name</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Assets</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Status</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Created By</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Owning Agency</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Last Modified</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
<tbody className="bg-white divide-y divide-grey-300">
|
||||
{filteredProjects.map((project) => {
|
||||
return (
|
||||
<tr key={project.name} className="hover:bg-gray-100 cursor-pointer" onClick={() => onSelectProject(project.name)}>
|
||||
<tr key={project.name} className="hover:bg-info-light cursor-pointer even:bg-grey-100" onClick={() => onSelectProject(project.name)}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{project.name}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{project.assets}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{project.assets}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm w-40">
|
||||
<div className="relative">
|
||||
<select
|
||||
|
|
@ -280,12 +280,12 @@ const ProjectList: React.FC<{
|
|||
<option value="In Progress">In Progress</option>
|
||||
<option value="Completed">Completed</option>
|
||||
</select>
|
||||
<ChevronDownIcon className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 h-full w-4 text-gray-500" />
|
||||
<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-gray-700">{project.agencyLead}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{project.agency}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{project.lastModified}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{project.agencyLead}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{project.agency}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{project.lastModified}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
|
@ -344,11 +344,11 @@ const ProjectAssetUpload: React.FC<{
|
|||
const isNewVersion = existingAssetNames.includes(assetName.trim()) && assetName.trim() !== '';
|
||||
|
||||
return (
|
||||
<section className="bg-white rounded-lg shadow-md p-6 border border-gray-200 mb-8">
|
||||
<section className="bg-white rounded-[10px] shadow-md p-6 border border-grey-300 mb-8">
|
||||
<h2 className="text-xl font-bold text-primary-blue mb-4">Upload New Asset</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="asset-name" className="flex items-center text-sm font-medium text-gray-700 mb-1">
|
||||
<label htmlFor="asset-name" className="flex items-center text-sm font-medium text-black-title mb-1">
|
||||
<DocumentIcon className="h-5 w-5 mr-2 text-active-blue shrink-0" />
|
||||
Asset Name
|
||||
</label>
|
||||
|
|
@ -359,11 +359,11 @@ const ProjectAssetUpload: React.FC<{
|
|||
onChange={(e) => setAssetName(e.target.value)}
|
||||
placeholder="e.g., Q4 Hero Instagram Post"
|
||||
disabled={isLoading}
|
||||
className="w-full bg-white border border-gray-300 rounded-md py-2 px-3 text-gray-900 focus:outline-none focus:ring-2 focus:ring-active-blue disabled:bg-gray-100"
|
||||
className="w-full bg-white border border-grey-300 rounded-[10px] py-2 px-3 text-black-title focus:outline-none focus:ring-2 focus:ring-active-blue disabled:bg-grey-100"
|
||||
required
|
||||
/>
|
||||
{isNewVersion && (
|
||||
<p className="text-xs text-blue-600 mt-2 p-2 bg-blue-50 rounded-md">
|
||||
<p className="text-xs text-active-blue mt-2 p-2 bg-info-light rounded-[10px]">
|
||||
An asset with this name already exists. This will be uploaded as a new version.
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -371,7 +371,7 @@ const ProjectAssetUpload: React.FC<{
|
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Channel Dropdown */}
|
||||
<div>
|
||||
<label htmlFor="asset-channel" className="flex items-center text-sm font-medium text-gray-700 mb-1">
|
||||
<label htmlFor="asset-channel" className="flex items-center text-sm font-medium text-black-title mb-1">
|
||||
<ChannelIcon className="h-5 w-5 mr-2 text-active-blue shrink-0" />
|
||||
Channel
|
||||
</label>
|
||||
|
|
@ -381,20 +381,20 @@ const ProjectAssetUpload: React.FC<{
|
|||
value={channel}
|
||||
onChange={(e) => setChannel(e.target.value)}
|
||||
disabled={isLoading}
|
||||
className="w-full bg-white border border-gray-300 rounded-md py-2 pl-3 pr-10 text-gray-900 focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none disabled:bg-gray-100"
|
||||
className="w-full bg-white border border-grey-300 rounded-[10px] py-2 pl-3 pr-10 text-black-title focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none disabled:bg-grey-100"
|
||||
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>
|
||||
{/* Sub-Channel Dropdown */}
|
||||
<div>
|
||||
<label htmlFor="asset-sub-channel" className="flex items-center text-sm font-medium text-gray-700 mb-1">
|
||||
<label htmlFor="asset-sub-channel" className="flex items-center text-sm font-medium text-black-title mb-1">
|
||||
<TagIcon className="h-5 w-5 mr-2 text-active-blue shrink-0" />
|
||||
Sub-Channel
|
||||
</label>
|
||||
|
|
@ -404,13 +404,13 @@ const ProjectAssetUpload: React.FC<{
|
|||
value={subChannel}
|
||||
onChange={(e) => setSubChannel(e.target.value)}
|
||||
disabled={isLoading || !channel}
|
||||
className="w-full bg-white border border-gray-300 rounded-md py-2 pl-3 pr-10 text-gray-900 focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none disabled:bg-gray-100 disabled:text-gray-400"
|
||||
className="w-full bg-white border border-grey-300 rounded-[10px] py-2 pl-3 pr-10 text-black-title focus:outline-none focus:ring-2 focus:ring-active-blue 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>
|
||||
|
|
@ -418,27 +418,27 @@ const ProjectAssetUpload: React.FC<{
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Asset File</label>
|
||||
<div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
||||
<label className="block text-sm font-medium text-black-title mb-1">Asset File</label>
|
||||
<div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-grey-300 border-dashed rounded-[10px]">
|
||||
<div className="space-y-1 text-center">
|
||||
<UploadIcon className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<div className="flex text-sm text-gray-600">
|
||||
<label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-md font-medium text-active-blue hover:text-primary-blue focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-active-blue">
|
||||
<UploadIcon className="mx-auto h-12 w-12 text-grey-700" />
|
||||
<div className="flex text-sm text-black-title">
|
||||
<label htmlFor="file-upload" className="relative cursor-pointer bg-white rounded-[10px] font-medium text-active-blue hover:text-primary-blue focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-active-blue">
|
||||
<span>Upload a file</span>
|
||||
<input id="file-upload" name="file-upload" type="file" className="sr-only" ref={fileInputRef} onChange={handleFileChange} disabled={isLoading} accept="image/png, image/jpeg, image/webp, image/gif, video/mp4, application/pdf" />
|
||||
</label>
|
||||
<p className="pl-1">or drag and drop</p>
|
||||
</div>
|
||||
{file ? <p className="text-sm font-semibold text-primary-blue mt-2">{file.name}</p> : <p className="text-xs text-gray-500">PNG, JPG, GIF, WEBP, MP4, PDF</p>}
|
||||
{file ? <p className="text-sm font-semibold text-primary-blue mt-2">{file.name}</p> : <p className="text-xs text-grey-900">PNG, JPG, GIF, WEBP, MP4, PDF</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-2 gap-3">
|
||||
<button type="button" onClick={onCancel} disabled={isLoading} className="bg-gray-200 text-gray-800 font-semibold py-2.5 px-5 rounded-lg hover:bg-gray-300 transition-colors duration-300 disabled:opacity-50">
|
||||
<button type="button" onClick={onCancel} disabled={isLoading} className="bg-grey-300 text-black-title font-semibold py-2.5 px-5 rounded-full hover:bg-grey-700 hover:text-white transition-colors duration-300 disabled:opacity-50">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" disabled={isSubmitDisabled} className="flex items-center justify-center bg-active-blue text-white font-bold py-2.5 px-5 rounded-lg hover:bg-primary-blue transition-all duration-300 disabled:bg-gray-400 disabled:cursor-not-allowed">
|
||||
<button type="submit" disabled={isSubmitDisabled} className="flex items-center justify-center bg-active-blue text-white font-bold py-2.5 px-5 rounded-full hover:bg-primary-blue transition-all duration-300 disabled:bg-grey-700 disabled:cursor-not-allowed">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<svg className="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
|
|
@ -470,13 +470,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-active-blue 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>
|
||||
);
|
||||
};
|
||||
|
|
@ -497,25 +497,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-primary-blue">Confirm Deletion</h3>
|
||||
<p className="text-gray-600 my-4">
|
||||
<p className="text-black-title my-4">
|
||||
Are you sure you want to permanently delete the asset "{assetName}"? 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="bg-grey-300 text-black-title font-semibold py-2 px-4 rounded-full hover:bg-grey-700 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-4 rounded-full hover:bg-error/80 transition-colors"
|
||||
>
|
||||
Delete Asset
|
||||
</button>
|
||||
|
|
@ -598,7 +598,7 @@ const ProjectDetail: React.FC<{
|
|||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="p-2 text-gray-500 rounded-full hover:bg-gray-200 hover:text-primary-blue transition-colors duration-200"
|
||||
className="p-2 text-grey-700 rounded-full hover:bg-grey-300 hover:text-primary-blue transition-colors duration-200"
|
||||
title="Back to projects"
|
||||
aria-label="Back to projects list"
|
||||
>
|
||||
|
|
@ -606,7 +606,7 @@ const ProjectDetail: React.FC<{
|
|||
</button>
|
||||
<div>
|
||||
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">{projectName}</h1>
|
||||
<p className="text-base lg:text-lg text-gray-600 mt-1">Asset overview and compliance status.</p>
|
||||
<p className="text-base lg:text-lg text-primary-blue mt-1">Asset overview and compliance status.</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -629,48 +629,48 @@ const ProjectDetail: React.FC<{
|
|||
<div className="mb-6 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => console.log('Download all assets clicked')}
|
||||
className="flex items-center gap-2 bg-white text-active-blue font-semibold py-2 px-4 rounded-lg border border-active-blue hover:bg-active-blue/10 transition-colors duration-300"
|
||||
className="flex items-center gap-2 bg-white text-active-blue font-semibold py-2 px-4 rounded-full border-2 border-active-blue hover:bg-active-blue/10 transition-colors duration-300"
|
||||
>
|
||||
<DownloadIcon className="h-5 w-5" />
|
||||
Download All Assets
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsUploadFormVisible(true)}
|
||||
className="flex items-center gap-2 bg-active-blue text-white font-semibold py-2 px-4 rounded-lg hover:bg-primary-blue transition-colors duration-300"
|
||||
className="flex items-center gap-2 bg-active-blue text-white font-semibold py-2 px-4 rounded-full hover:bg-primary-blue transition-colors duration-300"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
Upload New Asset
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
|
||||
<div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<table className="min-w-full divide-y divide-grey-300">
|
||||
<thead className="bg-lime">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Asset Name</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Workfront #</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Channel</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Sub-Channel</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Overall Status</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Asset Name</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Workfront #</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Channel</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Sub-Channel</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Overall Status</th>
|
||||
<th scope="col" className="relative px-6 py-3"><span className="sr-only">Actions</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
<tbody className="bg-white divide-y divide-grey-300">
|
||||
{assets.map((asset, index) => {
|
||||
if (asset.status === 'analyzing') {
|
||||
return (
|
||||
<tr key={asset.tempId} className="bg-gray-50 opacity-80">
|
||||
<tr key={asset.tempId} className="bg-grey-100 opacity-80">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{asset.assetName}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 italic">Pending</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.channel}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.subChannel}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-grey-700 italic">Pending</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.channel}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.subChannel}</td>
|
||||
<td className="px-6 py-4" colSpan={2}>
|
||||
{asset.analysisProgress ?
|
||||
<LoadingCell progress={asset.analysisProgress} /> :
|
||||
{asset.analysisProgress ?
|
||||
<LoadingCell progress={asset.analysisProgress} /> :
|
||||
<div className="flex justify-center items-center h-full">
|
||||
<SpinnerIcon className="h-5 w-5 text-active-blue custom-spinner" />
|
||||
<span className="ml-2 text-sm text-gray-600">Preparing...</span>
|
||||
<span className="ml-2 text-sm text-black-title">Preparing...</span>
|
||||
</div>
|
||||
}
|
||||
</td>
|
||||
|
|
@ -680,15 +680,15 @@ const ProjectDetail: React.FC<{
|
|||
|
||||
if (asset.status === 'error') {
|
||||
return (
|
||||
<tr key={asset.tempId} className="bg-red-50">
|
||||
<tr key={asset.tempId} className="bg-error-light">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{asset.assetName}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 italic">Failed</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.channel}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.subChannel}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-red-700 font-semibold" colSpan={2}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-grey-700 italic">Failed</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.channel}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.subChannel}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-error font-semibold" colSpan={2}>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>Analysis failed.</span>
|
||||
<button
|
||||
<button
|
||||
onClick={() => onRetryAnalysis(projectName, asset.tempId)}
|
||||
className="flex items-center gap-1.5 text-xs font-semibold text-active-blue hover:text-primary-blue whitespace-nowrap px-3 py-1.5 rounded-full bg-active-blue/10 hover:bg-active-blue/20 transition-colors"
|
||||
>
|
||||
|
|
@ -708,22 +708,22 @@ const ProjectDetail: React.FC<{
|
|||
if (!latestVersion) return null; // Should not happen for completed assets
|
||||
|
||||
return (
|
||||
<tr
|
||||
<tr
|
||||
key={latestVersion.workfrontId || index}
|
||||
className={isClickable ? "hover:bg-gray-100 cursor-pointer" : ""}
|
||||
className={isClickable ? "hover:bg-info-light cursor-pointer even:bg-grey-100" : "even:bg-grey-100"}
|
||||
onClick={() => isClickable && onSelectAsset(asset)}
|
||||
>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">
|
||||
{asset.assetName}
|
||||
{isVersioned && (
|
||||
<span className="ml-2 bg-gray-200 text-gray-700 text-xs font-bold px-2 py-0.5 rounded-full">
|
||||
<span className="ml-2 bg-grey-300 text-black-title text-xs font-bold px-2 py-0.5 rounded-full">
|
||||
V{latestVersion.version}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{latestVersion.workfrontId}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.channel}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{asset.subChannel}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{latestVersion.workfrontId}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.channel}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{asset.subChannel}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<OverallStatusBadge status={latestVersion.overallStatus} />
|
||||
</td>
|
||||
|
|
@ -731,7 +731,7 @@ const ProjectDetail: React.FC<{
|
|||
<div className="flex items-center justify-end gap-1">
|
||||
<button
|
||||
onClick={(e) => handleNewVersionClick(e, asset)}
|
||||
className="p-2 text-gray-400 rounded-full hover:bg-blue-100 hover:text-blue-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="p-2 text-grey-700 rounded-full hover:bg-info-light hover:text-active-blue transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title={`Upload new version for ${asset.assetName}`}
|
||||
disabled={isUploading}
|
||||
>
|
||||
|
|
@ -739,7 +739,7 @@ const ProjectDetail: React.FC<{
|
|||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); console.log('Download asset clicked'); }}
|
||||
className="p-2 text-gray-400 rounded-full hover:bg-green-100 hover:text-green-600 transition-colors"
|
||||
className="p-2 text-grey-700 rounded-full hover:bg-success-light hover:text-success transition-colors"
|
||||
title={`Download ${asset.assetName}`}
|
||||
>
|
||||
<DownloadIcon className="h-5 w-5" />
|
||||
|
|
@ -749,7 +749,7 @@ const ProjectDetail: React.FC<{
|
|||
e.stopPropagation();
|
||||
setAssetToDelete(asset);
|
||||
}}
|
||||
className="p-2 text-gray-400 rounded-full hover:bg-red-100 hover:text-red-600 transition-colors"
|
||||
className="p-2 text-grey-700 rounded-full hover:bg-error-light hover:text-error transition-colors"
|
||||
title={`Delete ${asset.assetName}`}
|
||||
>
|
||||
<TrashIcon className="h-5 w-5" />
|
||||
|
|
@ -844,7 +844,7 @@ const AssetDetailView: React.FC<{
|
|||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="p-2 text-gray-500 rounded-full hover:bg-gray-200 hover:text-primary-blue transition-colors duration-200"
|
||||
className="p-2 text-grey-700 rounded-full hover:bg-grey-300 hover:text-primary-blue transition-colors duration-200"
|
||||
title="Back to project details"
|
||||
aria-label="Back to project details"
|
||||
>
|
||||
|
|
@ -852,7 +852,7 @@ const AssetDetailView: React.FC<{
|
|||
</button>
|
||||
<div>
|
||||
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">{asset.assetName}</h1>
|
||||
<p className="text-base lg:text-lg text-gray-600 mt-1">Detailed AI feedback report.</p>
|
||||
<p className="text-base lg:text-lg text-primary-blue mt-1">Detailed AI feedback report.</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -879,7 +879,7 @@ const AssetDetailView: React.FC<{
|
|||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => console.log('Download version clicked')}
|
||||
className="flex items-center gap-2 text-sm bg-active-blue text-white font-semibold py-1.5 px-3 rounded-lg border border-transparent hover:bg-primary-blue transition-colors duration-200"
|
||||
className="flex items-center gap-2 text-sm bg-active-blue text-white font-semibold py-1.5 px-3 rounded-full border border-transparent hover:bg-primary-blue transition-colors duration-200"
|
||||
title={`Download Version ${selectedVersion.version}`}
|
||||
>
|
||||
<DownloadIcon className="h-4 w-4" />
|
||||
|
|
@ -888,7 +888,7 @@ const AssetDetailView: React.FC<{
|
|||
<button
|
||||
onClick={handleUploadClick}
|
||||
disabled={isUploadingNewVersion}
|
||||
className="flex items-center gap-2 text-sm bg-white text-active-blue font-semibold py-1.5 px-3 rounded-lg border border-active-blue hover:bg-active-blue/10 transition-colors duration-200 disabled:bg-gray-200 disabled:text-gray-500 disabled:cursor-wait"
|
||||
className="flex items-center gap-2 text-sm bg-white text-active-blue font-semibold py-1.5 px-3 rounded-full border-2 border-active-blue hover:bg-active-blue/10 transition-colors duration-200 disabled:bg-grey-300 disabled:text-grey-700 disabled:cursor-wait"
|
||||
title="Upload a new version of this asset"
|
||||
>
|
||||
{isUploadingNewVersion ? (
|
||||
|
|
@ -917,20 +917,20 @@ const AssetDetailView: React.FC<{
|
|||
{versions.map((version: any, index: number) => {
|
||||
const isActive = index === selectedVersionIndex;
|
||||
return (
|
||||
<button
|
||||
<button
|
||||
key={version.version}
|
||||
onClick={() => setSelectedVersionIndex(index)}
|
||||
className={`w-full text-left p-3 rounded-lg border-2 transition-all ${
|
||||
isActive
|
||||
? 'bg-active-blue/10 border-active-blue shadow-sm'
|
||||
: 'bg-white border-gray-200 hover:border-active-blue/50 hover:bg-gray-50'
|
||||
className={`w-full text-left p-3 rounded-[10px] border-2 transition-all ${
|
||||
isActive
|
||||
? 'bg-info-light border-active-blue shadow-sm'
|
||||
: 'bg-white border-grey-300 hover:border-active-blue/50 hover:bg-grey-100'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<p className={`font-bold ${isActive ? 'text-primary-blue' : 'text-gray-800'}`}>Version {version.version}</p>
|
||||
<p className="text-xs text-gray-500">{version.timestamp}</p>
|
||||
<p className={`font-bold ${isActive ? 'text-primary-blue' : 'text-black-title'}`}>Version {version.version}</p>
|
||||
<p className="text-xs text-grey-700">{version.timestamp}</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mt-1">Workfront ID: {version.workfrontId}</p>
|
||||
<p className="text-sm text-black-title mt-1">Workfront ID: {version.workfrontId}</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ 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-xl transition-all duration-300 ease-in-out ${
|
||||
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 ${
|
||||
isActive
|
||||
? 'bg-white text-primary-blue shadow-lg'
|
||||
: isComingSoon
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue