salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stlyes fixes

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-29 19:52:51 +00:00
parent c91175fdcb
commit 4f7ab9c606
155 changed files with 1576 additions and 2489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/common/BulkExportModal.tsx
View File

@@ -36,8 +36,8 @@ export default function BulkExportModal({
<div className="p-6">
{/* Header with icon */}
<div className="flex items-center gap-3 mb-4">
<div className="flex items-center justify-center w-10 h-10 bg-blue-50 rounded-xl dark:bg-blue-500/10">
<InfoIcon className="w-5 h-5 text-blue-500" />
<div className="flex items-center justify-center w-10 h-10 bg-brand-50 rounded-xl dark:bg-brand-500/10">
<InfoIcon className="w-5 h-5 text-brand-500" />
</div>
<h2 className="text-xl font-bold text-gray-800 dark:text-white">
{title}

4
frontend/src/components/common/BulkStatusUpdateModal.tsx
View File

@@ -55,8 +55,8 @@ export default function BulkStatusUpdateModal({
<div className="p-6">
{/* Header with icon */}
<div className="flex items-center gap-3 mb-4">
<div className="flex items-center justify-center w-10 h-10 bg-blue-50 rounded-xl dark:bg-blue-500/10">
<InfoIcon className="w-5 h-5 text-blue-500" />
<div className="flex items-center justify-center w-10 h-10 bg-brand-50 rounded-xl dark:bg-brand-500/10">
<InfoIcon className="w-5 h-5 text-brand-500" />
</div>
<h2 className="text-xl font-bold text-gray-800 dark:text-white">
{title}

6
frontend/src/components/common/ContentImageCell.tsx
View File

@@ -143,10 +143,10 @@ export default function ContentImageCell({ image, maxPromptLength = 100, showPro
)}
{image.status === 'failed' && (
<div className="w-full h-24 bg-red-100 dark:bg-red-900/20 rounded border border-red-300 dark:border-red-700 flex items-center justify-center">
<div className="w-full h-24 bg-error-100 dark:bg-error-900/20 rounded border border-error-300 dark:border-error-700 flex items-center justify-center">
<div className="text-center">
<svg
className="w-6 h-6 mx-auto text-red-500 mb-1"
className="w-6 h-6 mx-auto text-error-500 mb-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -158,7 +158,7 @@ export default function ContentImageCell({ image, maxPromptLength = 100, showPro
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p className="text-xs text-red-700 dark:text-red-400">Failed</p>
<p className="text-xs text-error-700 dark:text-error-400">Failed</p>
</div>
</div>
)}

16
frontend/src/components/common/GlobalErrorDisplay.tsx
View File

@@ -18,25 +18,25 @@ export default function GlobalErrorDisplay() {
{errors.map((error, index) => (
<div
key={index}
className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg shadow-lg p-4 animate-in slide-in-from-right"
className="bg-error-50 dark:bg-error-900/20 border border-error-200 dark:border-error-800 rounded-lg shadow-lg p-4 animate-in slide-in-from-right"
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<span className="text-red-600 dark:text-red-400 text-lg">⚠️</span>
<span className="text-sm font-semibold text-red-800 dark:text-red-200">
<span className="text-error-600 dark:text-error-400 text-lg">⚠️</span>
<span className="text-sm font-semibold text-error-800 dark:text-error-200">
{error.source}
</span>
</div>
<p className="text-sm text-red-700 dark:text-red-300 mb-2">
<p className="text-sm text-error-700 dark:text-error-300 mb-2">
{error.message}
</p>
{error.stack && (
<details className="mt-2">
<summary className="text-xs text-red-600 dark:text-red-400 cursor-pointer hover:underline">
<summary className="text-xs text-error-600 dark:text-error-400 cursor-pointer hover:underline">
Show stack trace
</summary>
<pre className="mt-2 text-xs bg-red-100 dark:bg-red-900/40 p-2 rounded overflow-auto max-h-32">
<pre className="mt-2 text-xs bg-error-100 dark:bg-error-900/40 p-2 rounded overflow-auto max-h-32">
{error.stack}
</pre>
</details>
@@ -44,7 +44,7 @@ export default function GlobalErrorDisplay() {
</div>
<button
onClick={() => clearError(index)}
className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 text-xl leading-none"
className="text-error-600 dark:text-error-400 hover:text-error-800 dark:hover:text-error-200 text-xl leading-none"
aria-label="Dismiss error"
>
×
@@ -55,7 +55,7 @@ export default function GlobalErrorDisplay() {
{errors.length > 1 && (
<button
onClick={clearAllErrors}
className="w-full px-3 py-2 text-xs bg-red-600 text-white rounded hover:bg-red-700"
className="w-full px-3 py-2 text-xs bg-error-600 text-white rounded hover:bg-error-700"
>
Clear All Errors
</button>

22
frontend/src/components/common/ImageGenerationCard.tsx
View File

@@ -265,14 +265,14 @@ export default function ImageGenerationCard({
<div className="border-t border-gray-200 p-5 dark:border-gray-800">
<div className="space-y-5">
{/* API Provider and Model Display */}
<div className="flex items-center gap-3 rounded-lg bg-blue-50 px-4 py-3 dark:bg-blue-900/20">
<div className="flex items-center gap-3 rounded-lg bg-brand-50 px-4 py-3 dark:bg-brand-900/20">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
className="text-blue-600 dark:text-blue-400"
className="text-brand-600 dark:text-brand-400"
>
<path
d="M10 2L3 7V17C3 17.5304 3.21071 18.0391 3.58579 18.4142C3.96086 18.7893 4.46957 19 5 19H15C15.5304 19 16.0391 18.7893 16.4142 18.4142C16.7893 18.0391 17 17.5304 17 17V7L10 2Z"
@@ -283,8 +283,8 @@ export default function ImageGenerationCard({
/>
</svg>
<div>
<p className="text-xs font-medium text-blue-600 dark:text-blue-400">Provider & Model</p>
<p className="text-sm font-semibold text-blue-900 dark:text-blue-200">
<p className="text-xs font-medium text-brand-600 dark:text-brand-400">Provider & Model</p>
<p className="text-sm font-semibold text-brand-900 dark:text-brand-200">
{getProviderDisplay()}
</p>
</div>
@@ -299,7 +299,7 @@ export default function ImageGenerationCard({
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
rows={6}
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
placeholder="Describe the visual elements, style, mood, and composition you want in the image..."
/>
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
@@ -316,7 +316,7 @@ export default function ImageGenerationCard({
value={negativePrompt}
onChange={(e) => setNegativePrompt(e.target.value)}
rows={2}
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
placeholder="Describe what you DON'T want in the image..."
/>
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
@@ -334,7 +334,7 @@ export default function ImageGenerationCard({
<select
value={imageType}
onChange={(e) => setImageType(e.target.value)}
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
>
{typeOptions.map((option) => (
<option key={option.value} value={option.value}>
@@ -352,7 +352,7 @@ export default function ImageGenerationCard({
<select
value={imageSize}
onChange={(e) => setImageSize(e.target.value)}
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
>
{sizeOptions.map((option) => (
<option key={option.value} value={option.value}>
@@ -370,7 +370,7 @@ export default function ImageGenerationCard({
<select
value={imageFormat}
onChange={(e) => setImageFormat(e.target.value)}
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
>
{formatOptions.map((option) => (
<option key={option.value} value={option.value}>
@@ -440,8 +440,8 @@ export default function ImageGenerationCard({
{/* Error display */}
{error && (
<div className="mt-4 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
<div className="mt-4 rounded-lg border border-error-200 bg-error-50 p-4 dark:border-error-800 dark:bg-error-900/20">
<p className="text-sm text-error-600 dark:text-error-400">{error}</p>
</div>
)}
</article>

20
frontend/src/components/common/ImageQueueModal.tsx
View File

@@ -446,11 +446,11 @@ export default function ImageQueueModal({
const getProgressColor = (status: string) => {
switch (status) {
case 'completed':
return 'bg-green-500';
return 'bg-success-500';
case 'failed':
return 'bg-red-500';
return 'bg-error-500';
case 'processing':
return 'bg-blue-500';
return 'bg-brand-500';
default:
return 'bg-gray-300';
}
@@ -471,7 +471,7 @@ export default function ImageQueueModal({
{/* Header */}
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<div className="flex items-center gap-3">
<FileIcon className="w-6 h-6 text-blue-500" />
<FileIcon className="w-6 h-6 text-brand-500" />
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Generating Images
@@ -496,11 +496,11 @@ export default function ImageQueueModal({
key={item.index}
className={`p-4 rounded-lg border-2 transition-colors ${
item.status === 'processing'
? 'bg-blue-50 dark:bg-blue-900/20 border-blue-500'
? 'bg-brand-50 dark:bg-brand-900/20 border-brand-500'
: item.status === 'completed'
? 'bg-green-50 dark:bg-green-900/20 border-green-500'
? 'bg-success-50 dark:bg-success-900/20 border-success-500'
: item.status === 'failed'
? 'bg-red-50 dark:bg-red-900/20 border-red-500'
? 'bg-error-50 dark:bg-error-900/20 border-error-500'
: 'bg-gray-50 dark:bg-gray-700/50 border-gray-300 dark:border-gray-600'
}`}
>
@@ -509,7 +509,7 @@ export default function ImageQueueModal({
<div className="flex-1">
{/* Header Row */}
<div className="flex items-center gap-3 mb-2">
<span className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500 text-white text-xs font-bold">
<span className="flex items-center justify-center w-6 h-6 rounded-full bg-brand-500 text-white text-xs font-bold">
{item.index}
</span>
<span className="font-semibold text-sm text-gray-900 dark:text-white">
@@ -551,7 +551,7 @@ export default function ImageQueueModal({
{/* Error Message */}
{item.error && (
<div className="mt-2 p-2 bg-red-100 dark:bg-red-900/30 border-l-4 border-red-500 rounded text-xs text-red-700 dark:text-red-300">
<div className="mt-2 p-2 bg-error-100 dark:bg-error-900/30 border-l-4 border-error-500 rounded text-xs text-error-700 dark:text-error-300">
{item.error}
</div>
)}
@@ -595,7 +595,7 @@ export default function ImageQueueModal({
{allDone && (
<button
onClick={onClose}
className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
className="px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
>
Close
</button>

4
frontend/src/components/common/ImageResultCard.tsx
View File

@@ -79,7 +79,7 @@ export default function ImageResultCard({
<div className="border-t border-gray-200 p-5 dark:border-gray-800">
{errorState ? (
<div className="flex flex-col items-center justify-center py-12 text-center">
<div className="mb-4 rounded-full bg-red-100 p-4 dark:bg-red-900/20">
<div className="mb-4 rounded-full bg-error-100 p-4 dark:bg-error-900/20">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -90,7 +90,7 @@ export default function ImageResultCard({
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="text-red-600 dark:text-red-400"
className="text-error-600 dark:text-error-400"
>
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
<line x1="12" y1="9" x2="12" y2="13" />

6
frontend/src/components/common/IntegrationCard.tsx
View File

@@ -100,10 +100,10 @@ export default function IntegrationCard({
return 'bg-gray-400 dark:bg-gray-500 animate-pulse'; // Grey while validating (with pulse)
}
if (validationStatus === 'success') {
return 'bg-green-500 dark:bg-green-600'; // Green for success
return 'bg-success-500 dark:bg-success-600'; // Green for success
}
if (validationStatus === 'error') {
return 'bg-red-500 dark:bg-red-600'; // Red for error
return 'bg-error-500 dark:bg-error-600'; // Red for error
}
return 'bg-gray-400 dark:bg-gray-500'; // Default grey
};
@@ -120,7 +120,7 @@ export default function IntegrationCard({
return { text: 'Enabled', color: 'text-gray-800 dark:text-white', bold: true };
}
if (validationStatus === 'error') {
return { text: 'Error', color: 'text-red-600 dark:text-red-400', bold: false };
return { text: 'Error', color: 'text-error-600 dark:text-error-400', bold: false };
}
return { text: 'Disabled', color: 'text-gray-400 dark:text-gray-500', bold: false };
};

22
frontend/src/components/common/PageHeader.tsx
View File

@@ -100,18 +100,18 @@ export default function PageHeader({
}, [activeSite?.id, activeSite?.is_active, hideSiteSector, loadSectorsForSite, addError]);
const badgeColors = {
blue: { bg: 'bg-blue-600 dark:bg-blue-500', light: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' },
green: { bg: 'bg-green-600 dark:bg-green-500', light: 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300' },
blue: { bg: 'bg-brand-600 dark:bg-brand-500', light: 'bg-brand-100 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300' },
green: { bg: 'bg-success-600 dark:bg-success-500', light: 'bg-success-100 text-success-700 dark:bg-success-500/20 dark:text-success-300' },
purple: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
orange: { bg: 'bg-orange-600 dark:bg-orange-500', light: 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300' },
red: { bg: 'bg-red-600 dark:bg-red-500', light: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300' },
indigo: { bg: 'bg-indigo-600 dark:bg-indigo-500', light: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300' },
yellow: { bg: 'bg-yellow-600 dark:bg-yellow-500', light: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-300' },
pink: { bg: 'bg-pink-600 dark:bg-pink-500', light: 'bg-pink-100 text-pink-700 dark:bg-pink-500/20 dark:text-pink-300' },
emerald: { bg: 'bg-emerald-600 dark:bg-emerald-500', light: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300' },
cyan: { bg: 'bg-cyan-600 dark:bg-cyan-500', light: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-300' },
amber: { bg: 'bg-amber-600 dark:bg-amber-500', light: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300' },
teal: { bg: 'bg-teal-600 dark:bg-teal-500', light: 'bg-teal-100 text-teal-700 dark:bg-teal-500/20 dark:text-teal-300' },
orange: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
red: { bg: 'bg-error-600 dark:bg-error-500', light: 'bg-error-100 text-error-700 dark:bg-error-500/20 dark:text-error-300' },
indigo: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
yellow: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
pink: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
emerald: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
cyan: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
amber: { bg: 'bg-warning-600 dark:bg-warning-500', light: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-300' },
teal: { bg: 'bg-purple-600 dark:bg-purple-500', light: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300' },
};
return (

12
frontend/src/components/common/ProgressModal.tsx
View File

@@ -775,7 +775,7 @@ export default function ProgressModal({
<div className="mb-6">
{/* Big centered check icon */}
<div className="flex justify-center mb-4">
<div className="w-16 h-16 rounded-full bg-green-600 dark:bg-green-700 flex items-center justify-center">
<div className="w-16 h-16 rounded-full bg-success-600 dark:bg-success-700 flex items-center justify-center">
<svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
@@ -783,7 +783,7 @@ export default function ProgressModal({
</div>
{/* Dark success alert box with centered text */}
<div className="p-5 rounded-lg bg-green-600 dark:bg-green-700 border border-green-700 dark:border-green-600">
<div className="p-5 rounded-lg bg-success-600 dark:bg-success-700 border border-success-700 dark:border-success-600">
<div className="text-base font-semibold text-white text-center whitespace-pre-line">
{successMessage}
</div>
@@ -798,14 +798,14 @@ export default function ProgressModal({
key={index}
className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
item.completed
? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
? 'bg-success-50 dark:bg-success-900/20 border-success-200 dark:border-success-800'
: 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 opacity-60'
}`}
>
{/* Icon - only checkmark for completed, gray circle for pending */}
<div className="flex-shrink-0">
{item.completed ? (
<svg className="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
<svg className="w-5 h-5 text-success-600 dark:text-success-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
) : (
@@ -817,7 +817,7 @@ export default function ProgressModal({
<span
className={`flex-1 text-sm font-medium ${
item.completed
? 'text-green-800 dark:text-green-300'
? 'text-success-800 dark:text-success-300'
: 'text-gray-500 dark:text-gray-400'
}`}
>
@@ -834,7 +834,7 @@ export default function ProgressModal({
variant="primary"
size="lg"
onClick={onClose}
className="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 text-white px-8 py-3 text-base font-semibold"
className="bg-success-600 hover:bg-success-700 dark:bg-success-700 dark:hover:bg-success-800 text-white px-8 py-3 text-base font-semibold"
>
Close
</Button>

8
frontend/src/components/common/SectorSelector.tsx
View File

@@ -97,14 +97,14 @@ export default function SectorSelector() {
onItemClick={() => handleSectorSelect(null)}
className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
!activeSector
? "bg-blue-50 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300"
? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
: "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
}`}
>
<span className="flex-1">All Sectors</span>
{!activeSector && (
<svg
className="w-4 h-4 text-blue-600 dark:text-blue-400"
className="w-4 h-4 text-brand-600 dark:text-brand-400"
fill="currentColor"
viewBox="0 0 20 20"
>
@@ -122,14 +122,14 @@ export default function SectorSelector() {
onItemClick={() => handleSectorSelect(sector.id)}
className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
activeSector?.id === sector.id
? "bg-blue-50 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300"
? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
: "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
}`}
>
<span className="flex-1">{sector.name}</span>
{activeSector?.id === sector.id && (
<svg
className="w-4 h-4 text-blue-600 dark:text-blue-400"
className="w-4 h-4 text-brand-600 dark:text-brand-400"
fill="currentColor"
viewBox="0 0 20 20"
>

4
frontend/src/components/common/SingleRecordStatusUpdateModal.tsx
View File

@@ -55,8 +55,8 @@ export default function SingleRecordStatusUpdateModal({
<div className="p-6">
{/* Header with icon */}
<div className="flex items-center gap-3 mb-4">
<div className="flex items-center justify-center w-10 h-10 bg-blue-50 rounded-xl dark:bg-blue-500/10">
<InfoIcon className="w-5 h-5 text-blue-500" />
<div className="flex items-center justify-center w-10 h-10 bg-brand-50 rounded-xl dark:bg-brand-500/10">
<InfoIcon className="w-5 h-5 text-brand-500" />
</div>
<h2 className="text-xl font-bold text-gray-800 dark:text-white">
{title}

4
frontend/src/components/common/SiteCard.tsx
View File

@@ -28,14 +28,14 @@ export default function SiteCard({
const getStatusColor = () => {
if (site.is_active) {
return 'bg-green-500 dark:bg-green-600';
return 'bg-success-500 dark:bg-success-600';
}
return 'bg-gray-400 dark:bg-gray-500';
};
const getStatusText = () => {
if (site.is_active) {
return { text: 'Active', color: 'text-green-600 dark:text-green-400', bold: true };
return { text: 'Active', color: 'text-success-600 dark:text-success-400', bold: true };
}
return { text: 'Inactive', color: 'text-gray-400 dark:text-gray-500', bold: false };
};

2
frontend/src/components/common/ToggleTableRow.tsx
View File

@@ -335,7 +335,7 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
onClick={onClick}
className={`inline-flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200 ${
isExpanded
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20'
? 'text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-900/20'
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
} ${className}`}
aria-label={isExpanded ? 'Collapse content' : 'Expand content'}

8
frontend/src/components/common/ValidationCard.tsx
View File

@@ -161,7 +161,7 @@ export default function ValidationCard({
<div className="space-y-3">
{/* Success Message */}
{testResult.success && (
<div className="flex items-center gap-2 text-green-600 dark:text-green-400">
<div className="flex items-center gap-2 text-success-600 dark:text-success-400">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
@@ -171,7 +171,7 @@ export default function ValidationCard({
{/* Error Message */}
{!testResult.success && (
<div className="flex items-center gap-2 text-red-600 dark:text-red-400">
<div className="flex items-center gap-2 text-error-600 dark:text-error-400">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
</svg>
@@ -181,7 +181,7 @@ export default function ValidationCard({
{/* Detailed Results Box */}
{testResult.success && (
<div className="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 rounded">
<div className="bg-brand-50 dark:bg-brand-900/20 border-l-4 border-brand-500 p-4 rounded">
<div className="space-y-2 text-sm">
{integrationId === 'openai' && withResponse ? (
// OpenAI response test details
@@ -241,7 +241,7 @@ export default function ValidationCard({
href={testResult.full_response.image_url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 dark:text-blue-400 hover:underline"
className="text-brand-600 dark:text-brand-400 hover:underline"
>
View Image
</a>

26
frontend/src/components/common/WorkflowInsights.tsx
View File

@@ -27,32 +27,32 @@ export const WorkflowInsights: React.FC<WorkflowInsightsProps> = ({ insights, cl
const notificationColors = hasCritical
? {
bg: 'bg-amber-50 dark:bg-amber-500/10',
border: 'border-amber-300 dark:border-amber-700',
iconBg: 'bg-amber-100 dark:bg-amber-500/20',
bg: 'bg-warning-50 dark:bg-warning-500/10',
border: 'border-warning-300 dark:border-warning-700',
iconBg: 'bg-warning-100 dark:bg-warning-500/20',
}
: hasSuccess
? {
bg: 'bg-green-50 dark:bg-green-500/10',
border: 'border-green-300 dark:border-green-700',
iconBg: 'bg-green-100 dark:bg-green-500/20',
bg: 'bg-success-50 dark:bg-success-500/10',
border: 'border-success-300 dark:border-success-700',
iconBg: 'bg-success-100 dark:bg-success-500/20',
}
: {
bg: 'bg-blue-50 dark:bg-blue-500/10',
border: 'border-blue-300 dark:border-blue-700',
iconBg: 'bg-blue-100 dark:bg-blue-500/20',
bg: 'bg-brand-50 dark:bg-brand-500/10',
border: 'border-brand-300 dark:border-brand-700',
iconBg: 'bg-brand-100 dark:bg-brand-500/20',
};
const getIcon = (type: string) => {
switch (type) {
case 'success':
return <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />;
return <CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400" />;
case 'warning':
return <AlertIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />;
return <AlertIcon className="w-5 h-5 text-warning-600 dark:text-warning-400" />;
case 'action':
return <BoltIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />;
return <BoltIcon className="w-5 h-5 text-brand-600 dark:text-brand-400" />;
default:
return <InfoIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />;
return <InfoIcon className="w-5 h-5 text-brand-600 dark:text-brand-400" />;
}
};