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

reanme purple to info

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-24 15:27:51 +00:00
parent 7b022f3a06
commit 75deda304e
76 changed files with 323 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.rules
View File

@@ -62,7 +62,7 @@ All colors in the system derive from 6 primary hex values in `design-system.css`
- `--color-success` (#2CA18E) - Success Green - `--color-success` (#2CA18E) - Success Green
- `--color-warning` (#D9A12C) - Warning Amber - `--color-warning` (#D9A12C) - Warning Amber
- `--color-danger` (#A12C40) - Danger Red - `--color-danger` (#A12C40) - Danger Red
- `--color-purple` (#2C40A1) - Purple accent - `--color-info` (#18b2c4) - Info/accent color
- `--color-gray-base` (#667085) - Neutral gray - `--color-gray-base` (#667085) - Neutral gray
### Tailwind Color Classes ### Tailwind Color Classes
@@ -74,7 +74,7 @@ gray-* (25-950) - Neutral scale
success-* (25-950) - Green scale success-* (25-950) - Green scale
error-* (25-950) - Red scale error-* (25-950) - Red scale
warning-* (25-950) - Amber scale warning-* (25-950) - Amber scale
purple-* (25-950) - Purple scale info-* (25-950) - Info/accent scale
``` ```
**❌ BANNED** (These will NOT work): **❌ BANNED** (These will NOT work):

4
frontend/src/components/Automation/CurrentProcessingCard.tsx
View File

@@ -326,11 +326,11 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
// PLANNER: Blue → Pink → Amber | WRITER: Navy → Blue → Pink → Green // PLANNER: Blue → Pink → Amber | WRITER: Navy → Blue → Pink → Green
const stageColors = [ const stageColors = [
'from-brand-500 to-brand-600', // Stage 1: Keywords → Clusters (blue) 'from-brand-500 to-brand-600', // Stage 1: Keywords → Clusters (blue)
'from-purple-500 to-purple-600', // Stage 2: Clusters → Ideas (pink) 'from-info-500 to-info-600', // Stage 2: Clusters → Ideas (pink)
'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber) 'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber)
'from-gray-700 to-gray-800', // Stage 4: Tasks → Content (navy) 'from-gray-700 to-gray-800', // Stage 4: Tasks → Content (navy)
'from-brand-500 to-brand-600', // Stage 5: Content → Image Prompts (blue) 'from-brand-500 to-brand-600', // Stage 5: Content → Image Prompts (blue)
'from-purple-500 to-purple-600', // Stage 6: Image Prompts → Images (pink) 'from-info-500 to-info-600', // Stage 6: Image Prompts → Images (pink)
'from-success-500 to-success-600', // Stage 7: Review → Published (green) 'from-success-500 to-success-600', // Stage 7: Review → Published (green)
]; ];
const stageColorClass = stageColors[(currentRun.current_stage || 1) - 1] || 'from-brand-500 to-brand-600'; const stageColorClass = stageColors[(currentRun.current_stage || 1) - 1] || 'from-brand-500 to-brand-600';

4
frontend/src/components/Automation/DetailView/CreditBreakdownChart.tsx
View File

@@ -39,12 +39,12 @@ const CreditBreakdownChart: React.FC<CreditBreakdownChartProps> = ({ stages }) =
labels: chartLabels, labels: chartLabels,
colors: [ colors: [
'var(--color-brand-500)', 'var(--color-brand-500)',
'var(--color-purple-500)', 'var(--color-info-500)',
'var(--color-warning-500)', 'var(--color-warning-500)',
'var(--color-success-500)', 'var(--color-success-500)',
'var(--color-gray-500)', 'var(--color-gray-500)',
'var(--color-brand-700)', 'var(--color-brand-700)',
'var(--color-purple-700)', 'var(--color-info-700)',
], ],
legend: { legend: {
position: 'bottom', position: 'bottom',

4
frontend/src/components/Automation/DetailView/MeaningfulRunHistory.tsx
View File

@@ -43,11 +43,11 @@ const STAGE_LABELS: Record<number, { input: string; output: string }> = {
const STAGE_COLORS: Record<number, string> = { const STAGE_COLORS: Record<number, string> = {
1: 'bg-brand-500', 1: 'bg-brand-500',
2: 'bg-purple-500', 2: 'bg-info-500',
3: 'bg-warning-500', 3: 'bg-warning-500',
4: 'bg-gray-600', 4: 'bg-gray-600',
5: 'bg-brand-400', 5: 'bg-brand-400',
6: 'bg-purple-400', 6: 'bg-info-400',
7: 'bg-success-500', 7: 'bg-success-500',
}; };

4
frontend/src/components/Automation/DetailView/PredictiveCostAnalysis.tsx
View File

@@ -107,12 +107,12 @@ const PredictiveCostAnalysis: React.FC<PredictiveCostAnalysisProps> = ({ analysi
labels: chartLabels, labels: chartLabels,
colors: [ colors: [
'var(--color-brand-500)', 'var(--color-brand-500)',
'var(--color-purple-500)', 'var(--color-info-500)',
'var(--color-warning-500)', 'var(--color-warning-500)',
'var(--color-success-500)', 'var(--color-success-500)',
'var(--color-gray-500)', 'var(--color-gray-500)',
'var(--color-brand-700)', 'var(--color-brand-700)',
'var(--color-purple-700)', 'var(--color-info-700)',
], ],
legend: { legend: {
position: 'bottom', position: 'bottom',

4
frontend/src/components/Automation/DetailView/ProductionSummary.tsx
View File

@@ -89,8 +89,8 @@ const ProductionSummary: React.FC<ProductionSummaryProps> = ({
{ {
label: 'Ideas', label: 'Ideas',
value: counts.ideas, value: counts.ideas,
color: 'text-purple-600 dark:text-purple-400', color: 'text-info-600 dark:text-info-400',
bgColor: 'bg-purple-50 dark:bg-purple-900/20', bgColor: 'bg-info-50 dark:bg-info-900/20',
}, },
{ {
label: 'Content', label: 'Content',

4
frontend/src/components/Automation/GlobalProgressBar.tsx
View File

@@ -19,11 +19,11 @@ import { BoltIcon, CheckCircleIcon, PauseIcon } from '../../icons';
// - Images→Publish: success/green // - Images→Publish: success/green
const STAGE_COLORS = [ const STAGE_COLORS = [
'from-brand-500 to-brand-600', // Stage 1: Keywords → Clusters (brand/blue) 'from-brand-500 to-brand-600', // Stage 1: Keywords → Clusters (brand/blue)
'from-purple-500 to-purple-600', // Stage 2: Clusters → Ideas (purple/pink) 'from-info-500 to-info-600', // Stage 2: Clusters → Ideas (purple/pink)
'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber) 'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber)
'from-gray-700 to-gray-800', // Stage 4: Tasks → Content (navy) 'from-gray-700 to-gray-800', // Stage 4: Tasks → Content (navy)
'from-brand-500 to-brand-600', // Stage 5: Content → Image Prompts (brand/blue) 'from-brand-500 to-brand-600', // Stage 5: Content → Image Prompts (brand/blue)
'from-purple-500 to-purple-600', // Stage 6: Image Prompts → Images (purple/pink) 'from-info-500 to-info-600', // Stage 6: Image Prompts → Images (purple/pink)
'from-success-500 to-success-600', // Stage 7: Review Gate (green) 'from-success-500 to-success-600', // Stage 7: Review Gate (green)
]; ];

4
frontend/src/components/Automation/StageCard.tsx
View File

@@ -27,7 +27,7 @@ const StageCard: React.FC<StageCardProps> = ({
const getStatusColor = () => { const getStatusColor = () => {
if (isActive) return 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 dark:border-brand-400'; if (isActive) return 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 dark:border-brand-400';
if (isComplete) return 'border-success-500 bg-success-50 dark:bg-success-900/20 dark:border-success-400'; if (isComplete) return 'border-success-500 bg-success-50 dark:bg-success-900/20 dark:border-success-400';
if (pipelineData && pipelineData.pending > 0) return 'border-purple-400 bg-purple-50 dark:bg-purple-900/20 dark:border-purple-400'; if (pipelineData && pipelineData.pending > 0) return 'border-info-400 bg-info-50 dark:bg-info-900/20 dark:border-info-400';
return 'border-gray-300 bg-gray-50 dark:bg-gray-800 dark:border-gray-600'; return 'border-gray-300 bg-gray-50 dark:bg-gray-800 dark:border-gray-600';
}; };
@@ -58,7 +58,7 @@ const StageCard: React.FC<StageCardProps> = ({
<div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-600"> <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-600">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-xs text-gray-600 dark:text-gray-400">Pending:</span> <span className="text-xs text-gray-600 dark:text-gray-400">Pending:</span>
<span className="text-lg font-bold text-purple-600 dark:text-purple-400">{pipelineData.pending}</span> <span className="text-lg font-bold text-info-600 dark:text-info-400">{pipelineData.pending}</span>
</div> </div>
<div className="text-xs text-gray-500 dark:text-gray-500 mt-1">{getStatusText()}</div> <div className="text-xs text-gray-500 dark:text-gray-500 mt-1">{getStatusText()}</div>
</div> </div>

10
frontend/src/components/billing/CreditCostBreakdownPanel.tsx
View File

@@ -108,9 +108,9 @@ export default function CreditCostBreakdownPanel() {
{ bg: 'bg-brand-50 dark:bg-brand-900/20', text: 'text-brand-600 dark:text-brand-400', border: 'border-brand-500 dark:border-brand-400' }, { bg: 'bg-brand-50 dark:bg-brand-900/20', text: 'text-brand-600 dark:text-brand-400', border: 'border-brand-500 dark:border-brand-400' },
{ bg: 'bg-success-50 dark:bg-success-900/20', text: 'text-success-600 dark:text-success-400', border: 'border-success-500 dark:border-success-400' }, { bg: 'bg-success-50 dark:bg-success-900/20', text: 'text-success-600 dark:text-success-400', border: 'border-success-500 dark:border-success-400' },
{ bg: 'bg-brand-50 dark:bg-brand-900/20', text: 'text-brand-600 dark:text-brand-400', border: 'border-brand-500 dark:border-brand-400' }, { bg: 'bg-brand-50 dark:bg-brand-900/20', text: 'text-brand-600 dark:text-brand-400', border: 'border-brand-500 dark:border-brand-400' },
{ bg: 'bg-purple-50 dark:bg-purple-900/20', text: 'text-purple-600 dark:text-purple-400', border: 'border-purple-500 dark:border-purple-400' }, { bg: 'bg-info-50 dark:bg-info-900/20', text: 'text-info-600 dark:text-info-400', border: 'border-info-500 dark:border-info-400' },
{ bg: 'bg-warning-50 dark:bg-warning-900/20', text: 'text-warning-600 dark:text-warning-400', border: 'border-warning-500 dark:border-warning-400' }, { bg: 'bg-warning-50 dark:bg-warning-900/20', text: 'text-warning-600 dark:text-warning-400', border: 'border-warning-500 dark:border-warning-400' },
{ bg: 'bg-purple-50 dark:bg-purple-900/20', text: 'text-purple-600 dark:text-purple-400', border: 'border-purple-500 dark:border-purple-400' }, { bg: 'bg-info-50 dark:bg-info-900/20', text: 'text-info-600 dark:text-info-400', border: 'border-info-500 dark:border-info-400' },
]; ];
return ( return (
@@ -143,10 +143,10 @@ export default function CreditCostBreakdownPanel() {
<div className="text-xs text-gray-500 mt-1">Daily average</div> <div className="text-xs text-gray-500 mt-1">Daily average</div>
</Card> </Card>
<Card className="p-6 border-l-4 border-purple-500 dark:border-purple-400"> <Card className="p-6 border-l-4 border-info-500 dark:border-info-400">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-3 mb-2">
<div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg"> <div className="p-2 bg-info-50 dark:bg-info-900/20 rounded-lg">
<TrendingUpIcon className="w-5 h-5 text-purple-500 dark:text-purple-400" /> <TrendingUpIcon className="w-5 h-5 text-info-500 dark:text-info-400" />
</div> </div>
<div className="text-sm text-gray-600 dark:text-gray-400">Total Operations</div> <div className="text-sm text-gray-600 dark:text-gray-400">Total Operations</div>
</div> </div>

14
frontend/src/components/billing/CreditInsightsCharts.tsx
View File

@@ -34,7 +34,7 @@ const OPERATION_LABELS: Record<string, string> = {
const CHART_COLORS = [ const CHART_COLORS = [
'var(--color-brand-500)', 'var(--color-brand-500)',
'var(--color-purple-500)', 'var(--color-info-500)',
'var(--color-success-500)', 'var(--color-success-500)',
'var(--color-warning-500)', 'var(--color-warning-500)',
'var(--color-error-500)', 'var(--color-error-500)',
@@ -252,7 +252,7 @@ export default function CreditInsightsCharts({ analytics, loading, period }: Cre
show: false, show: false,
}, },
}, },
colors: ['var(--color-purple-500)'], colors: ['var(--color-info-500)'],
plotOptions: { plotOptions: {
bar: { bar: {
horizontal: true, horizontal: true,
@@ -325,12 +325,12 @@ export default function CreditInsightsCharts({ analytics, loading, period }: Cre
<Card className="p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800"> <Card className="p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<BarChart3Icon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <BarChart3Icon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<div className="text-xs text-gray-600 dark:text-gray-400">Peak Usage</div> <div className="text-xs text-gray-600 dark:text-gray-400">Peak Usage</div>
<div className="text-xl font-bold text-purple-600 dark:text-purple-400"> <div className="text-xl font-bold text-info-600 dark:text-info-400">
{peakUsage.toLocaleString()} {peakUsage.toLocaleString()}
</div> </div>
<div className="text-xs text-gray-500 dark:text-gray-400">credits in one day</div> <div className="text-xs text-gray-500 dark:text-gray-400">credits in one day</div>
@@ -391,8 +391,8 @@ export default function CreditInsightsCharts({ analytics, loading, period }: Cre
{/* Operations by Count - Bar Chart */} {/* Operations by Count - Bar Chart */}
<Card className="p-6"> <Card className="p-6">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<BarChart3Icon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <BarChart3Icon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white"> <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Operations Count Operations Count

6
frontend/src/components/billing/UsageLimitsPanel.tsx
View File

@@ -36,9 +36,9 @@ function LimitCard({ title, icon, usage, type, daysUntilReset, accentColor = 'br
info: 'var(--color-primary)', info: 'var(--color-primary)',
warning: 'var(--color-warning)', warning: 'var(--color-warning)',
danger: 'var(--color-danger)', danger: 'var(--color-danger)',
purple: 'var(--color-purple)', purple: 'var(--color-info)',
indigo: 'var(--color-purple)', indigo: 'var(--color-info)',
pink: 'var(--color-purple)', pink: 'var(--color-info)',
teal: 'var(--color-success)', teal: 'var(--color-success)',
cyan: 'var(--color-primary)', cyan: 'var(--color-primary)',
}; };

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

@@ -102,16 +102,16 @@ export default function PageHeader({
const badgeColors = { const badgeColors = {
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' }, 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' }, 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' }, purple: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' }, 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' }, 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' }, indigo: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' }, 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' }, pink: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' }, emerald: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' }, cyan: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' }, 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' }, teal: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
}; };
return ( return (

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

@@ -892,7 +892,7 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
{suggestedQuestions.map((item, idx) => ( {suggestedQuestions.map((item, idx) => (
<div <div
key={idx} key={idx}
className="group px-3 py-2.5 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20 border border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700 cursor-pointer transition-all hover:shadow-md" className="group px-3 py-2.5 rounded-lg bg-gradient-to-r from-indigo-50 to-info-50 dark:from-indigo-900/20 dark:to-info-900/20 border border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700 cursor-pointer transition-all hover:shadow-md"
onClick={() => { onClick={() => {
navigate(item.path); navigate(item.path);
onClose(); onClose();

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

@@ -49,7 +49,7 @@ export default function SiteInfoBar({
<span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300 border border-brand-200 dark:border-brand-800"> <span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300 border border-brand-200 dark:border-brand-800">
{site.site_type || 'marketing'} {site.site_type || 'marketing'}
</span> </span>
<span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-purple-50 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 border border-purple-200 dark:border-purple-800"> <span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-info-50 text-info-700 dark:bg-info-900/30 dark:text-info-300 border border-info-200 dark:border-info-800">
{site.hosting_type || 'igny8_sites'} {site.hosting_type || 'igny8_sites'}
</span> </span>
<span className={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${ <span className={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${
@@ -99,7 +99,7 @@ export default function SiteInfoBar({
onClick={() => navigate(`/sites/${site.id}/settings`)} onClick={() => navigate(`/sites/${site.id}/settings`)}
variant="outline" variant="outline"
size="sm" size="sm"
className="border-purple-300 text-purple-700 hover:bg-purple-50 dark:border-purple-600 dark:text-purple-400 dark:hover:bg-purple-900/20" className="border-info-300 text-info-700 hover:bg-info-50 dark:border-info-600 dark:text-info-400 dark:hover:bg-info-900/20"
startIcon={<GridIcon className="w-4 h-4" />} startIcon={<GridIcon className="w-4 h-4" />}
> >
Settings Settings

2
frontend/src/components/content/SourceBadge.tsx
View File

@@ -9,7 +9,7 @@ interface SourceBadgeProps {
const sourceConfig = { const sourceConfig = {
igny8: { label: 'IGNY8', color: 'bg-brand-100 text-brand-800 dark:bg-brand-900 dark:text-brand-300' }, igny8: { label: 'IGNY8', color: 'bg-brand-100 text-brand-800 dark:bg-brand-900 dark:text-brand-300' },
wordpress: { label: 'WordPress', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' }, wordpress: { label: 'WordPress', color: 'bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-300' },
shopify: { label: 'Shopify', color: 'bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-300' }, shopify: { label: 'Shopify', color: 'bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-300' },
custom: { label: 'Custom', color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' }, custom: { label: 'Custom', color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' },
}; };

4
frontend/src/components/content/SyncStatusBadge.tsx
View File

@@ -8,9 +8,9 @@ interface SyncStatusBadgeProps {
} }
const statusConfig = { const statusConfig = {
native: { label: 'Native', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' }, native: { label: 'Native', color: 'bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-300' },
imported: { label: 'Imported', color: 'bg-warning-100 text-warning-800 dark:bg-warning-900 dark:text-warning-300' }, imported: { label: 'Imported', color: 'bg-warning-100 text-warning-800 dark:bg-warning-900 dark:text-warning-300' },
synced: { label: 'Synced', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' }, synced: { label: 'Synced', color: 'bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-300' },
}; };
export const SyncStatusBadge: React.FC<SyncStatusBadgeProps> = ({ status, className = '' }) => { export const SyncStatusBadge: React.FC<SyncStatusBadgeProps> = ({ status, className = '' }) => {

4
frontend/src/components/dashboard/AIOperationsWidget.tsx
View File

@@ -44,10 +44,10 @@ interface AIOperationsWidgetProps {
* - Images: purple/pink (matches Images module) * - Images: purple/pink (matches Images module)
*/ */
const operationConfig: Record<string, { label: string; icon: typeof GroupIcon; gradient: string }> = { const operationConfig: Record<string, { label: string; icon: typeof GroupIcon; gradient: string }> = {
clustering: { label: 'Clustering', icon: GroupIcon, gradient: 'from-purple-500 to-purple-600' }, clustering: { label: 'Clustering', icon: GroupIcon, gradient: 'from-info-500 to-info-600' },
ideas: { label: 'Ideas', icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' }, ideas: { label: 'Ideas', icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' },
content: { label: 'Content', icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' }, content: { label: 'Content', icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' },
images: { label: 'Images', icon: FileIcon, gradient: 'from-purple-500 to-purple-600' }, images: { label: 'Images', icon: FileIcon, gradient: 'from-info-500 to-info-600' },
}; };
// Default config for unknown operation types // Default config for unknown operation types

6
frontend/src/components/dashboard/CreditAvailabilityWidget.tsx
View File

@@ -21,10 +21,10 @@ interface CreditAvailabilityWidgetProps {
// Average credit costs per operation // Average credit costs per operation
const OPERATION_COSTS = { const OPERATION_COSTS = {
clustering: { label: 'Clustering Runs', cost: 10, icon: GroupIcon, color: 'text-purple-600 dark:text-purple-400' }, clustering: { label: 'Clustering Runs', cost: 10, icon: GroupIcon, color: 'text-info-600 dark:text-info-400' },
ideas: { label: 'Content Ideas', cost: 2, icon: BoltIcon, color: 'text-warning-600 dark:text-warning-400' }, ideas: { label: 'Content Ideas', cost: 2, icon: BoltIcon, color: 'text-warning-600 dark:text-warning-400' },
content: { label: 'Articles', cost: 50, icon: FileTextIcon, color: 'text-success-600 dark:text-success-400' }, content: { label: 'Articles', cost: 50, icon: FileTextIcon, color: 'text-success-600 dark:text-success-400' },
images: { label: 'Images', cost: 5, icon: FileIcon, color: 'text-purple-600 dark:text-purple-400' }, images: { label: 'Images', cost: 5, icon: FileIcon, color: 'text-info-600 dark:text-info-400' },
}; };
export default function CreditAvailabilityWidget({ export default function CreditAvailabilityWidget({
@@ -68,7 +68,7 @@ export default function CreditAvailabilityWidget({
</div> </div>
{/* Credits Balance */} {/* Credits Balance */}
<div className="bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/20 dark:to-purple-900/20 rounded-lg p-4 mb-4"> <div className="bg-gradient-to-r from-brand-50 to-info-50 dark:from-brand-900/20 dark:to-info-900/20 rounded-lg p-4 mb-4">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className="text-sm text-gray-600 dark:text-gray-400">Available Credits</span> <span className="text-sm text-gray-600 dark:text-gray-400">Available Credits</span>
<span className="text-2xl font-bold text-brand-600 dark:text-brand-400"> <span className="text-2xl font-bold text-brand-600 dark:text-brand-400">

8
frontend/src/components/dashboard/EnhancedMetricCard.tsx
View File

@@ -37,10 +37,10 @@ const accentColors = {
icon: "text-warning-500", icon: "text-warning-500",
}, },
purple: { purple: {
bg: "bg-purple-50 dark:bg-purple-500/10", bg: "bg-info-50 dark:bg-info-500/10",
hover: "hover:bg-purple-100 dark:hover:bg-purple-500/20", hover: "hover:bg-info-100 dark:hover:bg-info-500/20",
border: "bg-purple-500", border: "bg-info-500",
icon: "text-purple-500", icon: "text-info-500",
}, },
red: { red: {
bg: "bg-error-50 dark:bg-error-500/10", bg: "bg-error-50 dark:bg-error-500/10",

4
frontend/src/components/dashboard/KeywordLibraryStatsWidget.tsx
View File

@@ -81,8 +81,8 @@ export default function KeywordLibraryStatsWidget({ stats, loading }: KeywordLib
{/* Card 2: By Country */} {/* Card 2: By Country */}
<Card className="p-6"> <Card className="p-6">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center"> <div className="w-10 h-10 rounded-lg bg-info-100 dark:bg-info-900/50 flex items-center justify-center">
<GlobeIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <GlobeIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<h3 className="text-sm font-semibold text-gray-900 dark:text-white"> <h3 className="text-sm font-semibold text-gray-900 dark:text-white">

4
frontend/src/components/dashboard/OperationsCostsWidget.tsx
View File

@@ -29,7 +29,7 @@ const operationConfig = {
clustering: { clustering: {
label: 'Clustering', label: 'Clustering',
icon: GroupIcon, icon: GroupIcon,
color: 'text-purple-600 dark:text-purple-400', color: 'text-info-600 dark:text-info-400',
href: '/planner/clusters', href: '/planner/clusters',
}, },
ideas: { ideas: {
@@ -47,7 +47,7 @@ const operationConfig = {
images: { images: {
label: 'Images', label: 'Images',
icon: FileIcon, icon: FileIcon,
color: 'text-purple-600 dark:text-purple-400', color: 'text-info-600 dark:text-info-400',
href: '/writer/images', href: '/writer/images',
}, },
}; };

4
frontend/src/components/dashboard/QuickActionsWidget.tsx
View File

@@ -42,7 +42,7 @@ const workflowSteps = [
description: 'AI groups related keywords into content clusters', description: 'AI groups related keywords into content clusters',
href: '/planner/keyword-opportunities', // Clustering runs from keywords page href: '/planner/keyword-opportunities', // Clustering runs from keywords page
actionLabel: 'Cluster', actionLabel: 'Cluster',
gradient: 'from-purple-500 to-purple-600', gradient: 'from-info-500 to-info-600',
buttonTone: 'brand' as const, buttonTone: 'brand' as const,
}, },
{ {
@@ -78,7 +78,7 @@ const workflowSteps = [
description: 'Create featured images and media for articles', description: 'Create featured images and media for articles',
href: '/writer/images', href: '/writer/images',
actionLabel: 'Images', actionLabel: 'Images',
gradient: 'from-purple-500 to-purple-600', gradient: 'from-info-500 to-info-600',
buttonTone: 'brand' as const, buttonTone: 'brand' as const,
}, },
{ {

4
frontend/src/components/dashboard/RecentActivityWidget.tsx
View File

@@ -43,10 +43,10 @@ interface RecentActivityWidgetProps {
* - sync: success/green * - sync: success/green
*/ */
const activityConfig: Record<string, { icon: typeof GroupIcon; gradient: string }> = { const activityConfig: Record<string, { icon: typeof GroupIcon; gradient: string }> = {
clustering: { icon: GroupIcon, gradient: 'from-purple-500 to-purple-600' }, clustering: { icon: GroupIcon, gradient: 'from-info-500 to-info-600' },
ideas: { icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' }, ideas: { icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' },
content: { icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' }, content: { icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' },
images: { icon: FileIcon, gradient: 'from-purple-500 to-purple-600' }, images: { icon: FileIcon, gradient: 'from-info-500 to-info-600' },
published: { icon: PaperPlaneIcon, gradient: 'from-success-500 to-success-600' }, published: { icon: PaperPlaneIcon, gradient: 'from-success-500 to-success-600' },
keywords: { icon: ListIcon, gradient: 'from-brand-500 to-brand-600' }, keywords: { icon: ListIcon, gradient: 'from-brand-500 to-brand-600' },
error: { icon: AlertIcon, gradient: 'from-error-500 to-error-600' }, error: { icon: AlertIcon, gradient: 'from-error-500 to-error-600' },

2
frontend/src/components/dashboard/StandardThreeWidgetFooter.tsx
View File

@@ -84,7 +84,7 @@ const getProgressBarStyle = (color: SubmoduleColor = 'blue'): React.CSSPropertie
blue: 'var(--color-primary)', blue: 'var(--color-primary)',
green: 'var(--color-success)', green: 'var(--color-success)',
amber: 'var(--color-warning)', amber: 'var(--color-warning)',
purple: 'var(--color-purple)', purple: 'var(--color-info)',
}; };
return { backgroundColor: colorMap[color] }; return { backgroundColor: colorMap[color] };
}; };

4
frontend/src/components/dashboard/StandardizedModuleWidget.tsx
View File

@@ -240,7 +240,7 @@ export default function StandardizedModuleWidget({
{credits.clusteringCredits > 0 && ( {credits.clusteringCredits > 0 && (
<span className="text-[color:var(--color-text-dim)] dark:text-gray-400"> <span className="text-[color:var(--color-text-dim)] dark:text-gray-400">
Clustering{' '} Clustering{' '}
<strong className="font-bold" style={{ color: 'var(--color-purple)' }}>{credits.clusteringCredits}</strong> <strong className="font-bold" style={{ color: 'var(--color-info)' }}>{credits.clusteringCredits}</strong>
</span> </span>
)} )}
{credits.ideaGenerationCredits > 0 && ( {credits.ideaGenerationCredits > 0 && (
@@ -265,7 +265,7 @@ export default function StandardizedModuleWidget({
{credits.imageGenerationCredits > 0 && ( {credits.imageGenerationCredits > 0 && (
<span className="text-[color:var(--color-text-dim)] dark:text-gray-400"> <span className="text-[color:var(--color-text-dim)] dark:text-gray-400">
Images{' '} Images{' '}
<strong className="font-bold" style={{ color: 'var(--color-purple)' }}>{credits.imageGenerationCredits}</strong> <strong className="font-bold" style={{ color: 'var(--color-info)' }}>{credits.imageGenerationCredits}</strong>
</span> </span>
)} )}
</div> </div>

4
frontend/src/components/dashboard/ThreeWidgetFooter.tsx
View File

@@ -12,7 +12,7 @@
* - --color-primary: Brand blue for primary actions/bars * - --color-primary: Brand blue for primary actions/bars
* - --color-success: Green for success states * - --color-success: Green for success states
* - --color-warning: Amber for warnings * - --color-warning: Amber for warnings
* - --color-purple: Purple accent * - --color-info: Purple accent
*/ */
import React from 'react'; import React from 'react';
@@ -91,7 +91,7 @@ const getProgressBarStyle = (color: SubmoduleColor = 'blue'): React.CSSPropertie
blue: 'var(--color-primary)', blue: 'var(--color-primary)',
green: 'var(--color-success)', green: 'var(--color-success)',
amber: 'var(--color-warning)', amber: 'var(--color-warning)',
purple: 'var(--color-purple)', purple: 'var(--color-info)',
}; };
return { backgroundColor: colorMap[color] }; return { backgroundColor: colorMap[color] };
}; };

2
frontend/src/components/dashboard/WorkflowPipelineWidget.tsx
View File

@@ -48,7 +48,7 @@ interface WorkflowPipelineWidgetProps {
const stages = [ const stages = [
{ key: 'sites', label: 'Sites', icon: GridIcon, href: '/sites', gradient: '', transparent: true }, { key: 'sites', label: 'Sites', icon: GridIcon, href: '/sites', gradient: '', transparent: true },
{ key: 'keywords', label: 'Keywords', icon: ListIcon, href: '/planner/keywords', gradient: 'from-brand-500 to-brand-600' }, { key: 'keywords', label: 'Keywords', icon: ListIcon, href: '/planner/keywords', gradient: 'from-brand-500 to-brand-600' },
{ key: 'clusters', label: 'Clusters', icon: GroupIcon, href: '/planner/clusters', gradient: 'from-purple-500 to-purple-600' }, { key: 'clusters', label: 'Clusters', icon: GroupIcon, href: '/planner/clusters', gradient: 'from-info-500 to-info-600' },
{ key: 'ideas', label: 'Ideas', icon: BoltIcon, href: '/planner/ideas', gradient: 'from-warning-500 to-warning-600' }, { key: 'ideas', label: 'Ideas', icon: BoltIcon, href: '/planner/ideas', gradient: 'from-warning-500 to-warning-600' },
{ key: 'tasks', label: 'Tasks', icon: CheckCircleIcon, href: '/writer/tasks', gradient: 'from-gray-700 to-gray-800' }, { key: 'tasks', label: 'Tasks', icon: CheckCircleIcon, href: '/writer/tasks', gradient: 'from-gray-700 to-gray-800' },
{ key: 'drafts', label: 'Drafts', icon: FileTextIcon, href: '/writer/content', gradient: 'from-brand-500 to-brand-600' }, { key: 'drafts', label: 'Drafts', icon: FileTextIcon, href: '/writer/content', gradient: 'from-brand-500 to-brand-600' },

2
frontend/src/components/header/UserDropdown.tsx
View File

@@ -142,7 +142,7 @@ export default function UserDropdown() {
variant="primary" variant="primary"
tone="brand" tone="brand"
endIcon={<ArrowRightIcon className="w-4 h-4" />} endIcon={<ArrowRightIcon className="w-4 h-4" />}
className="mt-3 w-full justify-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600" className="mt-3 w-full justify-center bg-info-600 hover:bg-info-700 dark:bg-info-500 dark:hover:bg-info-600"
> >
Sign out Sign out
</Button> </Button>

4
frontend/src/components/keywords-library/SectorCardsGrid.tsx
View File

@@ -115,8 +115,8 @@ export default function SectorCardsGrid({
{over10k.toLocaleString()} {over10k.toLocaleString()}
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-center p-2 rounded-lg border border-purple-200 dark:border-purple-800 bg-purple-50/50 dark:bg-purple-900/10"> <div className="flex flex-col items-center justify-center p-2 rounded-lg border border-info-200 dark:border-info-800 bg-info-50/50 dark:bg-info-900/10">
<div className="text-sm font-semibold text-purple-600 dark:text-purple-400">5K - 10K</div> <div className="text-sm font-semibold text-info-600 dark:text-info-400">5K - 10K</div>
<div className="text-base font-bold text-gray-900 dark:text-white"> <div className="text-base font-bold text-gray-900 dark:text-white">
{midVolume.toLocaleString()} {midVolume.toLocaleString()}
</div> </div>

12
frontend/src/components/keywords-library/SectorMetricCard.tsx
View File

@@ -101,12 +101,12 @@ const STAT_CONFIG: Record<StatType, {
label: 'Long Tail', label: 'Long Tail',
description: '4+ words with good volume', description: '4+ words with good volume',
icon: <DocsIcon className="w-5 h-5" />, icon: <DocsIcon className="w-5 h-5" />,
accentColor: 'bg-purple-500', accentColor: 'bg-info-500',
borderColor: 'border-purple-500', borderColor: 'border-info-500',
ringColor: 'ring-purple-500/20', ringColor: 'ring-info-500/20',
dotColor: 'bg-purple-500', dotColor: 'bg-info-500',
textColor: 'text-purple-600 dark:text-purple-400', textColor: 'text-info-600 dark:text-info-400',
badgeColor: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300', badgeColor: 'bg-info-100 text-info-700 dark:bg-info-900/40 dark:text-info-300',
showThreshold: true, showThreshold: true,
thresholdPrefix: 'Vol >', thresholdPrefix: 'Vol >',
}, },

4
frontend/src/components/keywords-library/SmartSuggestions.tsx
View File

@@ -46,7 +46,7 @@ export default function SmartSuggestions({
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className={clsx( <div className={clsx(
'w-8 h-8 rounded-lg flex items-center justify-center', 'w-8 h-8 rounded-lg flex items-center justify-center',
'bg-gradient-to-br from-brand-500 to-purple-500' 'bg-gradient-to-br from-brand-500 to-info-500'
)}> )}>
<ShootingStarIcon className="w-4 h-4 text-white" /> <ShootingStarIcon className="w-4 h-4 text-white" />
</div> </div>
@@ -73,7 +73,7 @@ export default function SmartSuggestions({
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className={clsx( <div className={clsx(
'w-10 h-10 rounded-lg flex items-center justify-center', 'w-10 h-10 rounded-lg flex items-center justify-center',
'bg-gradient-to-br from-brand-500 to-purple-500', 'bg-gradient-to-br from-brand-500 to-info-500',
hasContent && 'animate-pulse' hasContent && 'animate-pulse'
)}> )}>
<ShootingStarIcon className="w-5 h-5 text-white" /> <ShootingStarIcon className="w-5 h-5 text-white" />

2
frontend/src/components/optimizer/OptimizationScores.tsx
View File

@@ -187,7 +187,7 @@ export const OptimizationScores: React.FC<OptimizationScoresProps> = ({
</span> </span>
)} )}
{scores.has_taxonomy_mapping && ( {scores.has_taxonomy_mapping && (
<span className="px-2 py-0.5 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded"> <span className="px-2 py-0.5 bg-info-100 dark:bg-info-900 text-info-800 dark:text-info-200 rounded">
Taxonomy Taxonomy
</span> </span>
)} )}

8
frontend/src/components/sites/WordPressIntegrationCard.tsx
View File

@@ -50,8 +50,8 @@ export default function WordPressIntegrationCard({
<Card className="p-6"> <Card className="p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg">
<GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" /> <GlobeIcon className="w-6 h-6 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white"> <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -75,8 +75,8 @@ export default function WordPressIntegrationCard({
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg">
<GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" /> <GlobeIcon className="w-6 h-6 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white"> <h3 className="text-lg font-semibold text-gray-900 dark:text-white">

6
frontend/src/components/sites/WordPressIntegrationForm.tsx
View File

@@ -262,8 +262,8 @@ export default function WordPressIntegrationForm({
{/* Header */} {/* Header */}
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg">
<GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" /> <GlobeIcon className="w-6 h-6 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<h2 className="text-xl font-semibold text-gray-900 dark:text-white"> <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
@@ -454,7 +454,7 @@ export default function WordPressIntegrationForm({
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2"> <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<DownloadIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <DownloadIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
IGNY8 WP Bridge Plugin IGNY8 WP Bridge Plugin
</h3> </h3>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1"> <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">

4
frontend/src/components/sites/WordPressIntegrationModal.tsx
View File

@@ -69,8 +69,8 @@ export default function WordPressIntegrationModal({
<div className="p-6"> <div className="p-6">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<GlobeIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <GlobeIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<h2 className="text-xl font-semibold text-gray-900 dark:text-white"> <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
{initialData ? 'Edit WordPress Integration' : 'Connect WordPress Site'} {initialData ? 'Edit WordPress Integration' : 'Connect WordPress Site'}

30
frontend/src/components/ui/badge/Badge.tsx
View File

@@ -67,34 +67,34 @@ const toneStyles: Record<
"text-gray-800 ring-1 ring-gray-300 dark:ring-white/[0.08] dark:text-white/90", "text-gray-800 ring-1 ring-gray-300 dark:ring-white/[0.08] dark:text-white/90",
}, },
purple: { purple: {
solid: "bg-purple-600 text-white", solid: "bg-info-600 text-white",
soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400", soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
outline: outline:
"text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400", "text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
}, },
indigo: { indigo: {
solid: "bg-purple-600 text-white", solid: "bg-info-600 text-white",
soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400", soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
outline: outline:
"text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400", "text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
}, },
pink: { pink: {
solid: "bg-purple-600 text-white", solid: "bg-info-600 text-white",
soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400", soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
outline: outline:
"text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400", "text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
}, },
teal: { teal: {
solid: "bg-purple-600 text-white", solid: "bg-info-600 text-white",
soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400", soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
outline: outline:
"text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400", "text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
}, },
cyan: { cyan: {
solid: "bg-purple-600 text-white", solid: "bg-info-600 text-white",
soft: "bg-purple-50 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400", soft: "bg-info-50 text-info-700 dark:bg-info-500/15 dark:text-info-400",
outline: outline:
"text-purple-700 ring-1 ring-purple-200 dark:ring-purple-500/30 dark:text-purple-400", "text-info-700 ring-1 ring-info-200 dark:ring-info-500/30 dark:text-info-400",
}, },
blue: { blue: {
solid: "bg-brand-600 text-white", solid: "bg-brand-600 text-white",

28
frontend/src/config/colors.config.ts
View File

@@ -40,8 +40,8 @@ export const CSS_VAR_COLORS = {
warningDark: '--color-warning-dark', warningDark: '--color-warning-dark',
danger: '--color-danger', danger: '--color-danger',
dangerDark: '--color-danger-dark', dangerDark: '--color-danger-dark',
purple: '--color-purple', purple: '--color-info',
purpleDark: '--color-purple-dark', purpleDark: '--color-info-dark',
grayBase: '--color-gray-base', grayBase: '--color-gray-base',
grayDark: '--color-gray-dark', grayDark: '--color-gray-dark',
} as const; } as const;
@@ -66,12 +66,12 @@ export const MODULE_COLORS = {
cssVar: CSS_VAR_COLORS.primary, cssVar: CSS_VAR_COLORS.primary,
}, },
clusters: { clusters: {
bg: 'bg-purple-500', bg: 'bg-info-500',
bgLight: 'bg-purple-50', bgLight: 'bg-info-50',
text: 'text-purple-500', text: 'text-info-500',
textDark: 'text-purple-600', textDark: 'text-info-600',
border: 'border-purple-500', border: 'border-info-500',
gradient: 'from-purple-500 to-purple-600', gradient: 'from-info-500 to-info-600',
cssVar: CSS_VAR_COLORS.purple, cssVar: CSS_VAR_COLORS.purple,
}, },
ideas: { ideas: {
@@ -104,12 +104,12 @@ export const MODULE_COLORS = {
cssVar: CSS_VAR_COLORS.primary, cssVar: CSS_VAR_COLORS.primary,
}, },
images: { images: {
bg: 'bg-purple-500', bg: 'bg-info-500',
bgLight: 'bg-purple-50', bgLight: 'bg-info-50',
text: 'text-purple-500', text: 'text-info-500',
textDark: 'text-purple-600', textDark: 'text-info-600',
border: 'border-purple-500', border: 'border-info-500',
gradient: 'from-purple-500 to-purple-600', gradient: 'from-info-500 to-info-600',
cssVar: CSS_VAR_COLORS.purple, cssVar: CSS_VAR_COLORS.purple,
}, },
review: { review: {

2
frontend/src/config/pages/content.config.tsx
View File

@@ -331,7 +331,7 @@ export const createContentPageConfig = (
{/* Prompts Icon */} {/* Prompts Icon */}
<div <div
className={`w-5 h-5 flex items-center justify-center flex-shrink-0 ${ className={`w-5 h-5 flex items-center justify-center flex-shrink-0 ${
hasPrompts ? 'text-purple-500 dark:text-purple-400' : 'text-gray-300 dark:text-gray-600' hasPrompts ? 'text-info-500 dark:text-info-400' : 'text-gray-300 dark:text-gray-600'
}`} }`}
title={hasPrompts ? 'Prompts ready' : 'No prompts'} title={hasPrompts ? 'Prompts ready' : 'No prompts'}
> >

2
frontend/src/config/pages/table-actions.config.tsx
View File

@@ -260,7 +260,7 @@ const tableActionsConfigs: Record<string, TableActionsConfig> = {
{ {
key: 'generate_image_prompts', key: 'generate_image_prompts',
label: 'Generate Image Prompts', label: 'Generate Image Prompts',
icon: <BoltIcon className="w-5 h-5 text-purple-500" />, icon: <BoltIcon className="w-5 h-5 text-info-500" />,
variant: 'primary', variant: 'primary',
}, },
], ],

12
frontend/src/layout/AppHeader.tsx
View File

@@ -35,16 +35,16 @@ const SITE_WITH_ALL_SITES_ROUTES = [
const badgeColors: Record<string, { bg: string; light: string }> = { const badgeColors: Record<string, { bg: string; light: string }> = {
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' }, 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' }, 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' }, purple: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' }, 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' }, 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' }, indigo: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' }, 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' }, pink: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' }, emerald: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' }, cyan: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-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' }, 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' }, teal: { bg: 'bg-info-600 dark:bg-info-500', light: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300' },
}; };
const AppHeader: React.FC = () => { const AppHeader: React.FC = () => {

2
frontend/src/layout/AppSidebar.tsx
View File

@@ -440,7 +440,7 @@ const AppSidebar: React.FC = () => {
height={30} height={30}
/> />
{/* AI SEO Engine Badge */} {/* AI SEO Engine Badge */}
<span className="mt-2 px-2 py-0.5 text-xs font-medium rounded-[5px] bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300"> <span className="mt-2 px-2 py-0.5 text-xs font-medium rounded-[5px] bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-300">
AI SEO Engine AI SEO Engine
</span> </span>
</> </>

6
frontend/src/marketing/components/CTASection.tsx
View File

@@ -58,9 +58,9 @@ const CTASection: React.FC<CTASectionProps> = ({
return ( return (
<section className="py-24 bg-gradient-to-b from-white via-gray-50 to-white"> <section className="py-24 bg-gradient-to-b from-white via-gray-50 to-white">
<div className="max-w-5xl mx-auto px-6"> <div className="max-w-5xl mx-auto px-6">
<div className="relative overflow-hidden rounded-3xl border-2 border-[var(--color-primary)]/20 bg-gradient-to-br from-[var(--color-primary)]/5 via-[var(--color-purple)]/5 to-[var(--color-success)]/5 p-10 md:p-14 shadow-xl"> <div className="relative overflow-hidden rounded-3xl border-2 border-[var(--color-primary)]/20 bg-gradient-to-br from-[var(--color-primary)]/5 via-[var(--color-info)]/5 to-[var(--color-success)]/5 p-10 md:p-14 shadow-xl">
<div className="absolute inset-0 bg-gradient-to-r from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" /> <div className="absolute inset-0 bg-gradient-to-r from-[var(--color-primary)]/10 via-transparent to-[var(--color-info)]/10" />
<div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-purple)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10 opacity-50" /> <div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-info)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10 opacity-50" />
<div className="relative flex flex-col gap-6"> <div className="relative flex flex-col gap-6">
<h3 className="text-3xl md:text-4xl font-semibold text-gray-900 leading-tight"> <h3 className="text-3xl md:text-4xl font-semibold text-gray-900 leading-tight">
{title} {title}

2
frontend/src/marketing/components/FeatureGrid.tsx
View File

@@ -17,7 +17,7 @@ const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
"from-[var(--color-primary)] to-[var(--color-primary-dark)]", // Blue "from-[var(--color-primary)] to-[var(--color-primary-dark)]", // Blue
"from-[var(--color-success)] to-[var(--color-success-dark)]", // Green "from-[var(--color-success)] to-[var(--color-success-dark)]", // Green
"from-[var(--color-warning)] to-[var(--color-warning-dark)]", // Amber "from-[var(--color-warning)] to-[var(--color-warning-dark)]", // Amber
"from-[var(--color-purple)] to-[var(--color-purple-dark)]", // Purple "from-[var(--color-info)] to-[var(--color-info-dark)]", // Purple
]; ];
return ( return (

4
frontend/src/marketing/components/HeroSection.tsx
View File

@@ -59,7 +59,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
return ( return (
<section className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"> <section className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
<div className="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" /> <div className="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)]/10 via-transparent to-[var(--color-info)]/10" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(6,147,227,0.15),transparent_50%)]" /> <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(6,147,227,0.15),transparent_50%)]" />
<div className="relative max-w-6xl mx-auto px-6 py-24 md:py-32 flex flex-col lg:flex-row gap-16 items-center"> <div className="relative max-w-6xl mx-auto px-6 py-24 md:py-32 flex flex-col lg:flex-row gap-16 items-center">
<div className="flex-1 flex flex-col gap-6"> <div className="flex-1 flex flex-col gap-6">
@@ -84,7 +84,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
</div> </div>
<div className="flex-1 w-full"> <div className="flex-1 w-full">
<div className="relative rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-2xl shadow-[var(--color-primary)]/20"> <div className="relative rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-2xl shadow-[var(--color-primary)]/20">
<div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-purple)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10" /> <div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-info)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10" />
<img <img
src={`/marketing/images/${image}`} src={`/marketing/images/${image}`}
alt="Igny8 dashboard preview" alt="Igny8 dashboard preview"

2
frontend/src/marketing/components/WorkflowSteps.tsx
View File

@@ -14,7 +14,7 @@ const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
"from-[var(--color-primary)] to-[var(--color-primary-dark)]", "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
"from-[var(--color-success)] to-[var(--color-success-dark)]", "from-[var(--color-success)] to-[var(--color-success-dark)]",
"from-[var(--color-warning)] to-[var(--color-warning-dark)]", "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
"from-[var(--color-purple)] to-[var(--color-purple-dark)]", "from-[var(--color-info)] to-[var(--color-info-dark)]",
]; ];
return ( return (

2
frontend/src/marketing/pages/CaseStudies.tsx
View File

@@ -72,7 +72,7 @@ const CaseStudies: React.FC = () => {
summary: summary:
"Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into Shopify, WordPress, and custom sites, plus HubSpot.", "Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into Shopify, WordPress, and custom sites, plus HubSpot.",
image: "case-arcadia.png", image: "case-arcadia.png",
iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", iconColor: "from-[var(--color-info)] to-[var(--color-info-dark)]",
}, },
]; ];

18
frontend/src/marketing/pages/Home.tsx
View File

@@ -48,11 +48,11 @@ const Home: React.FC = () => {
// 8-Stage Content Pipeline - matches current implementation // 8-Stage Content Pipeline - matches current implementation
const workflowSteps = [ const workflowSteps = [
{ name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" }, { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" },
{ name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Group related terms" }, { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Group related terms" },
{ name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" }, { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
{ name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" }, { name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
{ name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" }, { name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" },
{ name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Visual generation" }, { name: "Images", icon: PhotoIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Visual generation" },
{ name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" }, { name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" },
{ name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" }, { name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" },
]; ];
@@ -113,7 +113,7 @@ const Home: React.FC = () => {
"Real-time progress monitoring and error handling", "Real-time progress monitoring and error handling",
], ],
icon: BoltIcon, icon: BoltIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
image: "automation-dashboard.png", image: "automation-dashboard.png",
link: "/product#automation", link: "/product#automation",
align: "right", align: "right",
@@ -159,7 +159,7 @@ const Home: React.FC = () => {
<div className="relative z-10"> <div className="relative z-10">
<div className="relative scale-110 lg:scale-125"> <div className="relative scale-110 lg:scale-125">
{/* Soft glow behind screenshot */} {/* Soft glow behind screenshot */}
<div className="absolute -inset-6 bg-gradient-to-br from-white/20 via-[var(--color-primary)]/10 to-[var(--color-purple)]/10 rounded-3xl blur-xl" /> <div className="absolute -inset-6 bg-gradient-to-br from-white/20 via-[var(--color-primary)]/10 to-[var(--color-info)]/10 rounded-3xl blur-xl" />
{/* Device frame effect */} {/* Device frame effect */}
<div className="absolute -inset-3 bg-gradient-to-br from-white/10 to-white/5 rounded-3xl blur-lg" /> <div className="absolute -inset-3 bg-gradient-to-br from-white/10 to-white/5 rounded-3xl blur-lg" />
<div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-lg overflow-hidden"> <div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-lg overflow-hidden">
@@ -210,7 +210,7 @@ const Home: React.FC = () => {
</section> </section>
{/* HOW IGNY8 WORKS (PIPELINE) */} {/* HOW IGNY8 WORKS (PIPELINE) */}
<section className="py-24 bg-gradient-to-b from-white via-[var(--color-primary)]/3 to-[var(--color-purple)]/3"> <section className="py-24 bg-gradient-to-b from-white via-[var(--color-primary)]/3 to-[var(--color-info)]/3">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
@@ -224,7 +224,7 @@ const Home: React.FC = () => {
{/* 8-Stage Horizontal Timeline */} {/* 8-Stage Horizontal Timeline */}
<div className="relative"> <div className="relative">
{/* Enhanced connecting line with shadow */} {/* Enhanced connecting line with shadow */}
<div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" /> <div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-info)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3"> <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
{workflowSteps.map((step, index) => { {workflowSteps.map((step, index) => {
@@ -258,7 +258,7 @@ const Home: React.FC = () => {
"bg-white", "bg-white",
"bg-gradient-to-b from-[var(--color-primary)]/1 to-white", "bg-gradient-to-b from-[var(--color-primary)]/1 to-white",
"bg-gradient-to-b from-[var(--color-success)]/1 to-white", "bg-gradient-to-b from-[var(--color-success)]/1 to-white",
"bg-gradient-to-b from-[var(--color-purple)]/1 to-white", "bg-gradient-to-b from-[var(--color-info)]/1 to-white",
]; ];
return ( return (
@@ -427,12 +427,12 @@ const Home: React.FC = () => {
const gradientColors = [ const gradientColors = [
"from-[var(--color-primary)]/20 to-[var(--color-primary-dark)]/10", "from-[var(--color-primary)]/20 to-[var(--color-primary-dark)]/10",
"from-[var(--color-success)]/20 to-[var(--color-success-dark)]/10", "from-[var(--color-success)]/20 to-[var(--color-success-dark)]/10",
"from-[var(--color-purple)]/20 to-[var(--color-purple-dark)]/10", "from-[var(--color-info)]/20 to-[var(--color-info-dark)]/10",
]; ];
const borderColors = [ const borderColors = [
"border-[var(--color-primary)]/30", "border-[var(--color-primary)]/30",
"border-[var(--color-success)]/30", "border-[var(--color-success)]/30",
"border-[var(--color-purple)]/30", "border-[var(--color-info)]/30",
]; ];
return ( return (

2
frontend/src/marketing/pages/Partners.tsx
View File

@@ -116,7 +116,7 @@ const Partners: React.FC = () => {
<p className="text-sm text-gray-600 font-medium">{tier.description}</p> <p className="text-sm text-gray-600 font-medium">{tier.description}</p>
<ul className="space-y-4 text-sm text-gray-700 flex-1"> <ul className="space-y-4 text-sm text-gray-700 flex-1">
{tier.benefits.map((benefit, benefitIdx) => { {tier.benefits.map((benefit, benefitIdx) => {
const dotColors = ["bg-[var(--color-primary)]", "bg-[var(--color-success)]", "bg-[var(--color-warning)]", "bg-[var(--color-purple)]"]; const dotColors = ["bg-[var(--color-primary)]", "bg-[var(--color-success)]", "bg-[var(--color-warning)]", "bg-[var(--color-info)]"];
return ( return (
<li key={benefit} className="flex gap-3"> <li key={benefit} className="flex gap-3">
<span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} /> <span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} />

6
frontend/src/marketing/pages/Pricing.tsx
View File

@@ -427,7 +427,7 @@ const Pricing: React.FC = () => {
<div className="overflow-hidden rounded-3xl border-2 border-gray-200 bg-white shadow-lg"> <div className="overflow-hidden rounded-3xl border-2 border-gray-200 bg-white shadow-lg">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full text-sm"> <table className="min-w-full text-sm">
<thead className="bg-gradient-to-r from-[var(--color-primary)]/10 via-[var(--color-purple)]/10 to-[var(--color-success)]/10 sticky top-0"> <thead className="bg-gradient-to-r from-[var(--color-primary)]/10 via-[var(--color-info)]/10 to-[var(--color-success)]/10 sticky top-0">
<tr> <tr>
<th className="px-6 py-4 text-left font-semibold text-gray-900">Capability</th> <th className="px-6 py-4 text-left font-semibold text-gray-900">Capability</th>
<th className="px-6 py-4 text-center font-semibold text-gray-900">Starter</th> <th className="px-6 py-4 text-center font-semibold text-gray-900">Starter</th>
@@ -493,7 +493,7 @@ const Pricing: React.FC = () => {
<span className="text-gray-400">—</span> <span className="text-gray-400">—</span>
) : ( ) : (
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[var(--color-purple)]"></span> <span className="size-1.5 rounded-full bg-[var(--color-info)]"></span>
{row.scale} {row.scale}
</span> </span>
)} )}
@@ -551,7 +551,7 @@ const Pricing: React.FC = () => {
Need more? Add packs instantly or set automation rules to pause when thresholds are hit. Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
</p> </p>
</div> </div>
<div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/5 via-white to-[var(--color-purple)]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all"> <div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/5 via-white to-[var(--color-info)]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="size-12 rounded-full bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-full bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
<ShieldCheckIcon className="h-6 w-6" /> <ShieldCheckIcon className="h-6 w-6" />

26
frontend/src/marketing/pages/Product.tsx
View File

@@ -48,11 +48,11 @@ const Product: React.FC = () => {
// 8-Stage Content Pipeline - matches current implementation // 8-Stage Content Pipeline - matches current implementation
const workflowSteps = [ const workflowSteps = [
{ name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" }, { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" },
{ name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Group related terms" }, { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Group related terms" },
{ name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" }, { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
{ name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" }, { name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
{ name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" }, { name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" },
{ name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Visual generation" }, { name: "Images", icon: PhotoIcon, color: "from-[var(--color-info)] to-[var(--color-info-dark)]", description: "Visual generation" },
{ name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" }, { name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" },
{ name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" }, { name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" },
]; ];
@@ -118,7 +118,7 @@ const Product: React.FC = () => {
"Automation dashboard with pipeline visualization and controls", "Automation dashboard with pipeline visualization and controls",
], ],
icon: BoltIcon, icon: BoltIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
image: "automation-dashboard.png", image: "automation-dashboard.png",
link: "#automation", link: "#automation",
}, },
@@ -170,7 +170,7 @@ const Product: React.FC = () => {
{/* 8-Stage Horizontal Timeline */} {/* 8-Stage Horizontal Timeline */}
<div className="relative"> <div className="relative">
{/* Enhanced connecting line with shadow */} {/* Enhanced connecting line with shadow */}
<div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" /> <div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-info)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3"> <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
{workflowSteps.map((step, index) => { {workflowSteps.map((step, index) => {
@@ -204,7 +204,7 @@ const Product: React.FC = () => {
"bg-white", "bg-white",
"bg-gradient-to-b from-[var(--color-primary)]/1 to-white", "bg-gradient-to-b from-[var(--color-primary)]/1 to-white",
"bg-gradient-to-b from-[var(--color-success)]/1 to-white", "bg-gradient-to-b from-[var(--color-success)]/1 to-white",
"bg-gradient-to-b from-[var(--color-purple)]/1 to-white", "bg-gradient-to-b from-[var(--color-info)]/1 to-white",
]; ];
return ( return (
@@ -283,7 +283,7 @@ const Product: React.FC = () => {
{/* Left: Content */} {/* Left: Content */}
<div className="z-10"> <div className="z-10">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-purple)] flex items-center justify-center text-white shadow-lg shadow-[var(--color-primary)]/30"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-info)] flex items-center justify-center text-white shadow-lg shadow-[var(--color-primary)]/30">
<BoltIcon className="h-6 w-6" /> <BoltIcon className="h-6 w-6" />
</div> </div>
<h2 className="text-4xl md:text-5xl font-bold text-white"> <h2 className="text-4xl md:text-5xl font-bold text-white">
@@ -297,12 +297,12 @@ const Product: React.FC = () => {
{/* 7 Automation Handoffs with neon glows */} {/* 7 Automation Handoffs with neon glows */}
<div className="space-y-4"> <div className="space-y-4">
{[ {[
{ from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" }, { from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-info)]", glow: "shadow-[var(--color-primary)]/50" },
{ from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" }, { from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-info)] to-[var(--color-warning)]", glow: "shadow-[var(--color-info)]/50" },
{ from: "Ideas", to: "Tasks", stage: 3, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" }, { from: "Ideas", to: "Tasks", stage: 3, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
{ from: "Tasks", to: "Content", stage: 4, color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" }, { from: "Tasks", to: "Content", stage: 4, color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
{ from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" }, { from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-info)]", glow: "shadow-[var(--color-primary)]/50" },
{ from: "Images", to: "Review", stage: 6, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" }, { from: "Images", to: "Review", stage: 6, color: "from-[var(--color-info)] to-[var(--color-warning)]", glow: "shadow-[var(--color-info)]/50" },
{ from: "Review", to: "Published", stage: 7, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" }, { from: "Review", to: "Published", stage: 7, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
].map((handoff, i) => ( ].map((handoff, i) => (
<div key={i} className="flex items-center gap-3"> <div key={i} className="flex items-center gap-3">
@@ -336,7 +336,7 @@ const Product: React.FC = () => {
/> />
</div> </div>
{/* Glow effect */} {/* Glow effect */}
<div className="absolute -inset-4 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-purple)]/20 rounded-2xl blur-2xl -z-10" /> <div className="absolute -inset-4 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-info)]/20 rounded-2xl blur-2xl -z-10" />
</div> </div>
</div> </div>
@@ -379,12 +379,12 @@ const Product: React.FC = () => {
const gradientColors = [ const gradientColors = [
"from-[var(--color-primary)]/20 to-[var(--color-primary-dark)]/10", "from-[var(--color-primary)]/20 to-[var(--color-primary-dark)]/10",
"from-[var(--color-success)]/20 to-[var(--color-success-dark)]/10", "from-[var(--color-success)]/20 to-[var(--color-success-dark)]/10",
"from-[var(--color-purple)]/20 to-[var(--color-purple-dark)]/10", "from-[var(--color-info)]/20 to-[var(--color-info-dark)]/10",
]; ];
const borderColors = [ const borderColors = [
"border-[var(--color-primary)]/30", "border-[var(--color-primary)]/30",
"border-[var(--color-success)]/30", "border-[var(--color-success)]/30",
"border-[var(--color-purple)]/30", "border-[var(--color-info)]/30",
]; ];
return ( return (

16
frontend/src/marketing/pages/Resources.tsx
View File

@@ -95,7 +95,7 @@ const Resources: React.FC = () => {
type: "Template", type: "Template",
tags: ["Template", "Workflow"], tags: ["Template", "Workflow"],
icon: DocumentTextIcon, icon: DocumentTextIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
}, },
{ {
title: "Cluster Mapping Board", title: "Cluster Mapping Board",
@@ -132,7 +132,7 @@ const Resources: React.FC = () => {
type: "Replay", type: "Replay",
tag: "Replay", tag: "Replay",
icon: PlayIcon, icon: PlayIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
}, },
{ {
title: "Editorial Control and AI Tone Systems", title: "Editorial Control and AI Tone Systems",
@@ -167,7 +167,7 @@ const Resources: React.FC = () => {
type: "SOP Pack", type: "SOP Pack",
tags: ["Execution", "Prompt Pack"], tags: ["Execution", "Prompt Pack"],
icon: ListBulletIcon, icon: ListBulletIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
}, },
{ {
title: "AI Prompt Library for Content Teams", title: "AI Prompt Library for Content Teams",
@@ -276,13 +276,13 @@ const Resources: React.FC = () => {
const colors = [ const colors = [
"from-[var(--color-primary)]/10 to-white", "from-[var(--color-primary)]/10 to-white",
"from-[var(--color-success)]/10 to-white", "from-[var(--color-success)]/10 to-white",
"from-[var(--color-purple)]/10 to-white", "from-[var(--color-info)]/10 to-white",
"from-[var(--color-warning)]/10 to-white", "from-[var(--color-warning)]/10 to-white",
]; ];
const borders = [ const borders = [
"border-[var(--color-primary)]/30", "border-[var(--color-primary)]/30",
"border-[var(--color-success)]/30", "border-[var(--color-success)]/30",
"border-[var(--color-purple)]/30", "border-[var(--color-info)]/30",
"border-[var(--color-warning)]/30", "border-[var(--color-warning)]/30",
]; ];
return ( return (
@@ -353,13 +353,13 @@ const Resources: React.FC = () => {
const colors = [ const colors = [
"from-[var(--color-primary)]/10 to-white", "from-[var(--color-primary)]/10 to-white",
"from-[var(--color-success)]/10 to-white", "from-[var(--color-success)]/10 to-white",
"from-[var(--color-purple)]/10 to-white", "from-[var(--color-info)]/10 to-white",
"from-[var(--color-warning)]/10 to-white", "from-[var(--color-warning)]/10 to-white",
]; ];
const borders = [ const borders = [
"border-[var(--color-primary)]/30", "border-[var(--color-primary)]/30",
"border-[var(--color-success)]/30", "border-[var(--color-success)]/30",
"border-[var(--color-purple)]/30", "border-[var(--color-info)]/30",
"border-[var(--color-warning)]/30", "border-[var(--color-warning)]/30",
]; ];
return ( return (
@@ -375,7 +375,7 @@ const Resources: React.FC = () => {
className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] ${ className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] ${
resource.tag === "Live" resource.tag === "Live"
? "bg-[var(--color-success)]/10 text-[var(--color-success)] border border-[var(--color-success)]/30" ? "bg-[var(--color-success)]/10 text-[var(--color-success)] border border-[var(--color-success)]/30"
: "bg-[var(--color-purple)]/10 text-[var(--color-purple)] border border-[var(--color-purple)]/30" : "bg-[var(--color-info)]/10 text-[var(--color-info)] border border-[var(--color-info)]/30"
}`} }`}
> >
{resource.tag} {resource.tag}

16
frontend/src/marketing/pages/Solutions.tsx
View File

@@ -100,11 +100,11 @@ const Solutions: React.FC = () => {
"Credit-based usage tracking to optimize spend and resource allocation", "Credit-based usage tracking to optimize spend and resource allocation",
"Publisher module for content calendar and scheduled publishing", "Publisher module for content calendar and scheduled publishing",
], ],
color: "from-[var(--color-purple)]/5 to-white", color: "from-[var(--color-info)]/5 to-white",
borderColor: "border-[var(--color-purple)]/20", borderColor: "border-[var(--color-info)]/20",
iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", iconColor: "from-[var(--color-info)] to-[var(--color-info-dark)]",
painColor: "bg-error-500", painColor: "bg-error-500",
outcomeColor: "bg-[var(--color-purple)]", outcomeColor: "bg-[var(--color-info)]",
}, },
]; ];
@@ -131,13 +131,13 @@ const Solutions: React.FC = () => {
title: "Cluster Analysis", title: "Cluster Analysis",
description: "AI-powered semantic clustering to group related keywords and build topical authority maps.", description: "AI-powered semantic clustering to group related keywords and build topical authority maps.",
icon: UserGroupIcon, icon: UserGroupIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
}, },
{ {
title: "Image Generation", title: "Image Generation",
description: "AI-generated featured and in-article images based on your content with brand consistency.", description: "AI-generated featured and in-article images based on your content with brand consistency.",
icon: PhotoIcon, icon: PhotoIcon,
color: "from-[var(--color-primary)] to-[var(--color-purple)]", color: "from-[var(--color-primary)] to-[var(--color-info)]",
}, },
{ {
title: "Workflow Automation", title: "Workflow Automation",
@@ -222,8 +222,8 @@ const Solutions: React.FC = () => {
{/* Right: IGNY8 Outcomes */} {/* Right: IGNY8 Outcomes */}
<div className="bg-white rounded-2xl border-2 border-gray-200 p-8 shadow-sm"> <div className="bg-white rounded-2xl border-2 border-gray-200 p-8 shadow-sm">
<div className="flex items-center gap-2 mb-6"> <div className="flex items-center gap-2 mb-6">
<CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-purple)]'}`} /> <CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-info)]'}`} />
<h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-purple)]'}`}> <h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-info)]'}`}>
IGNY8 Outcomes IGNY8 Outcomes
</h4> </h4>
</div> </div>

6
frontend/src/marketing/pages/Tour.tsx
View File

@@ -61,7 +61,7 @@ const Tour: React.FC = () => {
{ border: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white", dot: "bg-[var(--color-primary)]" }, { border: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white", dot: "bg-[var(--color-primary)]" },
{ border: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white", dot: "bg-[var(--color-success)]" }, { border: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white", dot: "bg-[var(--color-success)]" },
{ border: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white", dot: "bg-[var(--color-warning)]" }, { border: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white", dot: "bg-[var(--color-warning)]" },
{ border: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white", dot: "bg-[var(--color-purple)]" }, { border: "border-[var(--color-info)]/40", gradient: "from-[var(--color-info)]/10 to-white", dot: "bg-[var(--color-info)]" },
]; ];
const colorScheme = colors[index % colors.length]; const colorScheme = colors[index % colors.length];
return ( return (
@@ -99,11 +99,11 @@ const Tour: React.FC = () => {
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-gray-600"> <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-gray-600">
{[ {[
{ name: "Keywords → Clusters", time: "Stage 1", highlight: "Auto-cluster by AI similarity", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" }, { name: "Keywords → Clusters", time: "Stage 1", highlight: "Auto-cluster by AI similarity", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
{ name: "Clusters → Ideas", time: "Stage 2", highlight: "Generate content concepts", color: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white" }, { name: "Clusters → Ideas", time: "Stage 2", highlight: "Generate content concepts", color: "border-[var(--color-info)]/40", gradient: "from-[var(--color-info)]/10 to-white" },
{ name: "Ideas → Tasks", time: "Stage 3", highlight: "Create writing assignments", color: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white" }, { name: "Ideas → Tasks", time: "Stage 3", highlight: "Create writing assignments", color: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white" },
{ name: "Tasks → Content", time: "Stage 4", highlight: "Generate AI articles", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" }, { name: "Tasks → Content", time: "Stage 4", highlight: "Generate AI articles", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
{ name: "Content → Images", time: "Stage 5", highlight: "Create featured & in-article images", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" }, { name: "Content → Images", time: "Stage 5", highlight: "Create featured & in-article images", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
{ name: "Images → Review", time: "Stage 6", highlight: "Queue for editorial approval", color: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white" }, { name: "Images → Review", time: "Stage 6", highlight: "Queue for editorial approval", color: "border-[var(--color-info)]/40", gradient: "from-[var(--color-info)]/10 to-white" },
{ name: "Review → Published", time: "Stage 7", highlight: "Publish to your site", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" }, { name: "Review → Published", time: "Stage 7", highlight: "Publish to your site", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
].map((recipe) => ( ].map((recipe) => (
<div <div

10
frontend/src/marketing/pages/Upcoming.tsx
View File

@@ -81,8 +81,8 @@ const Upcoming: React.FC = () => {
{ {
phase: "Launching Q2 2026", phase: "Launching Q2 2026",
badge: "In Development", badge: "In Development",
badgeColor: "bg-gradient-to-r from-[var(--color-purple)] to-[var(--color-purple-dark)] text-white", badgeColor: "bg-gradient-to-r from-[var(--color-info)] to-[var(--color-info-dark)] text-white",
borderColor: "border-[var(--color-purple)]/30", borderColor: "border-[var(--color-info)]/30",
features: [ features: [
{ {
icon: ShoppingBagIcon, icon: ShoppingBagIcon,
@@ -124,7 +124,7 @@ const Upcoming: React.FC = () => {
"FAQ pages mapped to search intent", "FAQ pages mapped to search intent",
"Press and media pages", "Press and media pages",
], ],
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
}, },
], ],
}, },
@@ -188,7 +188,7 @@ const Upcoming: React.FC = () => {
"Custom white-label reports", "Custom white-label reports",
"API access for data export", "API access for data export",
], ],
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", color: "from-[var(--color-info)] to-[var(--color-info-dark)]",
}, },
], ],
}, },
@@ -246,7 +246,7 @@ const Upcoming: React.FC = () => {
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"> <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
{phase.phase} {phase.phase}
</h2> </h2>
<div className="w-24 h-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-purple)] mx-auto rounded-full" /> <div className="w-24 h-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-info)] mx-auto rounded-full" />
</div> </div>
{/* Features Grid */} {/* Features Grid */}

2
frontend/src/marketing/styles/marketing.css
View File

@@ -136,7 +136,7 @@
--color-theme-pink-500: #ee46bc; --color-theme-pink-500: #ee46bc;
--color-theme-purple-500: #7a5af8; --color-theme-info-500: #7a5af8;
--shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), --shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
0px 2px 4px -2px rgba(16, 24, 40, 0.06); 0px 2px 4px -2px rgba(16, 24, 40, 0.06);

8
frontend/src/pages/Automation/AutomationPage.tsx
View File

@@ -52,11 +52,11 @@ import {
*/ */
const STAGE_CONFIG = [ const STAGE_CONFIG = [
{ icon: ListIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Keywords → Clusters' }, { icon: ListIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Keywords → Clusters' },
{ icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Clusters → Ideas' }, { icon: GroupIcon, color: 'from-info-500 to-info-600', textColor: 'text-info-600 dark:text-info-400', bgColor: 'bg-info-100 dark:bg-info-900/30', hoverColor: 'hover:border-info-500', name: 'Clusters → Ideas' },
{ icon: BoltIcon, color: 'from-warning-500 to-warning-600', textColor: 'text-warning-600 dark:text-warning-400', bgColor: 'bg-warning-100 dark:bg-warning-900/30', hoverColor: 'hover:border-warning-500', name: 'Ideas → Tasks' }, { icon: BoltIcon, color: 'from-warning-500 to-warning-600', textColor: 'text-warning-600 dark:text-warning-400', bgColor: 'bg-warning-100 dark:bg-warning-900/30', hoverColor: 'hover:border-warning-500', name: 'Ideas → Tasks' },
{ icon: CheckCircleIcon, color: 'from-gray-700 to-gray-800', textColor: 'text-gray-700 dark:text-gray-300', bgColor: 'bg-gray-100 dark:bg-gray-800/30', hoverColor: 'hover:border-gray-500', name: 'Tasks → Content' }, { icon: CheckCircleIcon, color: 'from-gray-700 to-gray-800', textColor: 'text-gray-700 dark:text-gray-300', bgColor: 'bg-gray-100 dark:bg-gray-800/30', hoverColor: 'hover:border-gray-500', name: 'Tasks → Content' },
{ icon: PencilIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Content → Image Prompts' }, { icon: PencilIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Content → Image Prompts' },
{ icon: FileIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Image Prompts → Images' }, { icon: FileIcon, color: 'from-info-500 to-info-600', textColor: 'text-info-600 dark:text-info-400', bgColor: 'bg-info-100 dark:bg-info-900/30', hoverColor: 'hover:border-info-500', name: 'Image Prompts → Images' },
{ icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'In Review → Approved' }, { icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'In Review → Approved' },
]; ];
@@ -772,7 +772,7 @@ const AutomationPage: React.FC = () => {
const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0; const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0;
// Determine the left border color based on stage // Determine the left border color based on stage
const stageBorderColors = ['border-l-brand-500', 'border-l-purple-500', 'border-l-warning-500', 'border-l-gray-600']; const stageBorderColors = ['border-l-brand-500', 'border-l-info-500', 'border-l-warning-500', 'border-l-gray-600'];
const stageBorderColor = stageBorderColors[index] || 'border-l-brand-500'; const stageBorderColor = stageBorderColors[index] || 'border-l-brand-500';
// Check if this stage is enabled in config // Check if this stage is enabled in config
@@ -908,7 +908,7 @@ const AutomationPage: React.FC = () => {
const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0; const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0;
// Determine the left border color based on stage (5=brand, 6=purple) // Determine the left border color based on stage (5=brand, 6=purple)
const stageBorderColors56 = ['border-l-brand-500', 'border-l-purple-500']; const stageBorderColors56 = ['border-l-brand-500', 'border-l-info-500'];
const stageBorderColor = stageBorderColors56[index] || 'border-l-brand-500'; const stageBorderColor = stageBorderColors56[index] || 'border-l-brand-500';
// Check if this stage is enabled in config // Check if this stage is enabled in config

42
frontend/src/pages/Help/Help.tsx
View File

@@ -25,11 +25,11 @@ interface TableOfContentsItem {
function WorkflowPipeline() { function WorkflowPipeline() {
const stages = [ const stages = [
{ name: "Keywords", color: "bg-brand-500", description: "Import & organize search terms" }, { name: "Keywords", color: "bg-brand-500", description: "Import & organize search terms" },
{ name: "Clusters", color: "bg-purple-500", description: "Group related keywords" }, { name: "Clusters", color: "bg-info-500", description: "Group related keywords" },
{ name: "Ideas", color: "bg-warning-500", description: "Generate content concepts" }, { name: "Ideas", color: "bg-warning-500", description: "Generate content concepts" },
{ name: "Tasks", color: "bg-success-500", description: "Create writing assignments" }, { name: "Tasks", color: "bg-success-500", description: "Create writing assignments" },
{ name: "Content", color: "bg-brand-500", description: "AI-generate articles" }, { name: "Content", color: "bg-brand-500", description: "AI-generate articles" },
{ name: "Images", color: "bg-purple-500", description: "Create visuals" }, { name: "Images", color: "bg-info-500", description: "Create visuals" },
{ name: "Review", color: "bg-warning-500", description: "Edit & approve" }, { name: "Review", color: "bg-warning-500", description: "Edit & approve" },
{ name: "Published", color: "bg-success-500", description: "Live on your site" }, { name: "Published", color: "bg-success-500", description: "Live on your site" },
]; ];
@@ -81,11 +81,11 @@ function WorkflowPipeline() {
function AutomationPipelineVisual() { function AutomationPipelineVisual() {
const automationStages = [ const automationStages = [
{ from: "Keywords", to: "Clusters", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" }, { from: "Keywords", to: "Clusters", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" },
{ from: "Clusters", to: "Ideas", color: "border-purple-500", bg: "bg-purple-50 dark:bg-purple-900/20" }, { from: "Clusters", to: "Ideas", color: "border-info-500", bg: "bg-info-50 dark:bg-info-900/20" },
{ from: "Ideas", to: "Tasks", color: "border-warning-500", bg: "bg-warning-50 dark:bg-warning-900/20" }, { from: "Ideas", to: "Tasks", color: "border-warning-500", bg: "bg-warning-50 dark:bg-warning-900/20" },
{ from: "Tasks", to: "Content", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" }, { from: "Tasks", to: "Content", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" },
{ from: "Content", to: "Images", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" }, { from: "Content", to: "Images", color: "border-brand-500", bg: "bg-brand-50 dark:bg-brand-900/20" },
{ from: "Images", to: "Review", color: "border-purple-500", bg: "bg-purple-50 dark:bg-purple-900/20" }, { from: "Images", to: "Review", color: "border-info-500", bg: "bg-info-50 dark:bg-info-900/20" },
{ from: "Review", to: "Published", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" }, { from: "Review", to: "Published", color: "border-success-500", bg: "bg-success-50 dark:bg-success-900/20" },
]; ];
@@ -110,7 +110,7 @@ function CreditSystemVisual() {
const operations = [ const operations = [
{ name: "Content Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" }, { name: "Content Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
{ name: "Image Generation (Basic)", credits: "1 credit", color: "bg-success-100 dark:bg-success-900/30 border-success-300" }, { name: "Image Generation (Basic)", credits: "1 credit", color: "bg-success-100 dark:bg-success-900/30 border-success-300" },
{ name: "Image Generation (Quality)", credits: "5 credits", color: "bg-purple-100 dark:bg-purple-900/30 border-purple-300" }, { name: "Image Generation (Quality)", credits: "5 credits", color: "bg-info-100 dark:bg-info-900/30 border-info-300" },
{ name: "Image Generation (Premium)", credits: "15 credits", color: "bg-warning-100 dark:bg-warning-900/30 border-warning-300" }, { name: "Image Generation (Premium)", credits: "15 credits", color: "bg-warning-100 dark:bg-warning-900/30 border-warning-300" },
{ name: "Keyword Clustering", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" }, { name: "Keyword Clustering", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
{ name: "Idea Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" }, { name: "Idea Generation", credits: "Token-based", color: "bg-brand-100 dark:bg-brand-900/30 border-brand-300" },
@@ -310,7 +310,7 @@ export default function Help() {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Table of Contents */} {/* Table of Contents */}
<Card className="p-6 mb-8 bg-gradient-to-r from-brand-50 to-purple-50 dark:from-brand-900/10 dark:to-purple-900/10 border-brand-200 dark:border-brand-800"> <Card className="p-6 mb-8 bg-gradient-to-r from-brand-50 to-info-50 dark:from-brand-900/10 dark:to-info-900/10 border-brand-200 dark:border-brand-800">
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2"> <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<ListIcon className="size-5 text-brand-600 dark:text-brand-400" /> <ListIcon className="size-5 text-brand-600 dark:text-brand-400" />
What Do You Want to Learn? What Do You Want to Learn?
@@ -372,7 +372,7 @@ export default function Help() {
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold"> <div className="flex-shrink-0 w-8 h-8 rounded-full bg-info-500 text-white flex items-center justify-center font-bold">
3 3
</div> </div>
<div className="flex-1"> <div className="flex-1">
@@ -408,7 +408,7 @@ export default function Help() {
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold"> <div className="flex-shrink-0 w-8 h-8 rounded-full bg-info-500 text-white flex items-center justify-center font-bold">
6 6
</div> </div>
<div className="flex-1"> <div className="flex-1">
@@ -494,7 +494,7 @@ export default function Help() {
</p> </p>
</div> </div>
<div className="border-l-4 border-purple-500 pl-4"> <div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Key Metrics</h4> <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Key Metrics</h4>
<ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1"> <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li>Total keywords in workflow</li> <li>Total keywords in workflow</li>
@@ -624,7 +624,7 @@ export default function Help() {
</ul> </ul>
</div> </div>
<div className="border-l-4 border-purple-500 pl-4"> <div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Settings Tab</h4> <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Settings Tab</h4>
<ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1"> <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li><strong>Image Quality:</strong> Basic, Quality, or Premium (powered by IGNY8 AI)</li> <li><strong>Image Quality:</strong> Basic, Quality, or Premium (powered by IGNY8 AI)</li>
@@ -862,7 +862,7 @@ export default function Help() {
</div> </div>
</div> </div>
<div className="border-l-4 border-purple-500 pl-4 mt-4"> <div className="border-l-4 border-info-500 pl-4 mt-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Statuses</h4> <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Content Statuses</h4>
<ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1"> <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li><strong>Draft:</strong> Initial AI-generated content</li> <li><strong>Draft:</strong> Initial AI-generated content</li>
@@ -890,7 +890,7 @@ export default function Help() {
</p> </p>
</div> </div>
<div className="border-l-4 border-purple-500 pl-4"> <div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">In-Article Images</h4> <h4 className="font-semibold text-gray-900 dark:text-white mb-2">In-Article Images</h4>
<p className="text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600 dark:text-gray-400">
Additional images placed throughout the content. Enhances reader engagement and SEO. Additional images placed throughout the content. Enhances reader engagement and SEO.
@@ -976,7 +976,7 @@ export default function Help() {
</ul> </ul>
</div> </div>
<div className="border-l-4 border-purple-500 pl-4"> <div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Batch Configuration</h4> <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Batch Configuration</h4>
<ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1"> <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li>Set items per batch (5, 10, 25, 50)</li> <li>Set items per batch (5, 10, 25, 50)</li>
@@ -998,7 +998,7 @@ export default function Help() {
{/* Publisher Section */} {/* Publisher Section */}
<div ref={(el) => (sectionRefs.current["publisher"] = el)} className="mb-12 scroll-mt-24"> <div ref={(el) => (sectionRefs.current["publisher"] = el)} className="mb-12 scroll-mt-24">
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3"> <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
<FileIcon className="size-8 text-purple-600 dark:text-purple-400" /> <FileIcon className="size-8 text-info-600 dark:text-info-400" />
Publisher & Calendar Publisher & Calendar
</h2> </h2>
@@ -1025,7 +1025,7 @@ export default function Help() {
</ul> </ul>
</div> </div>
<div className="border-l-4 border-purple-500 pl-4"> <div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Publishing History</h4> <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Publishing History</h4>
<p className="text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600 dark:text-gray-400">
Track all published content with timestamps, post IDs, and sync status. Track all published content with timestamps, post IDs, and sync status.
@@ -1101,7 +1101,7 @@ export default function Help() {
</ul> </ul>
</div> </div>
<div className="border-l-4 border-purple-500 pl-4"> <div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Generation</h4> <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Image Generation</h4>
<ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1"> <ul className="list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li><strong>Basic (1 credit):</strong> Fast, cost-effective images</li> <li><strong>Basic (1 credit):</strong> Fast, cost-effective images</li>
@@ -1118,7 +1118,7 @@ export default function Help() {
{/* Account & Billing Section */} {/* Account & Billing Section */}
<div ref={(el) => (sectionRefs.current["account"] = el)} className="mb-12 scroll-mt-24"> <div ref={(el) => (sectionRefs.current["account"] = el)} className="mb-12 scroll-mt-24">
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3"> <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
<GroupIcon className="size-8 text-purple-600 dark:text-purple-400" /> <GroupIcon className="size-8 text-info-600 dark:text-info-400" />
Account & Billing Account & Billing
</h2> </h2>
@@ -1141,7 +1141,7 @@ export default function Help() {
</p> </p>
</div> </div>
<div className="border-l-4 border-purple-500 pl-4"> <div className="border-l-4 border-info-500 pl-4">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Fixed-Cost Operations</h4> <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Fixed-Cost Operations</h4>
<p className="text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600 dark:text-gray-400">
Image generation uses fixed credits: 1 for Basic, 5 for Quality, and 15 for Premium. Image generation uses fixed credits: 1 for Basic, 5 for Quality, and 15 for Premium.
@@ -1207,7 +1207,7 @@ export default function Help() {
</p> </p>
</div> </div>
<div className="bg-purple-50 dark:bg-purple-900/30 p-4 rounded-lg"> <div className="bg-info-50 dark:bg-info-900/30 p-4 rounded-lg">
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">Team Members</h4> <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Team Members</h4>
<p className="text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600 dark:text-gray-400">
Maximum users per account. Hard limit based on plan. Maximum users per account. Hard limit based on plan.
@@ -1262,7 +1262,7 @@ export default function Help() {
{/* FAQ Section */} {/* FAQ Section */}
<div ref={(el) => (sectionRefs.current["faq"] = el)} className="mb-12 scroll-mt-24"> <div ref={(el) => (sectionRefs.current["faq"] = el)} className="mb-12 scroll-mt-24">
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3"> <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
<HelpCircleIcon className="size-8 text-purple-600 dark:text-purple-400" /> <HelpCircleIcon className="size-8 text-info-600 dark:text-info-400" />
Frequently Asked Questions Frequently Asked Questions
</h2> </h2>
@@ -1278,7 +1278,7 @@ export default function Help() {
</div> </div>
{/* Support Section */} {/* Support Section */}
<Card className="p-8 bg-gradient-to-r from-brand-500 to-purple-600 text-white"> <Card className="p-8 bg-gradient-to-r from-brand-500 to-info-600 text-white">
<div className="text-center"> <div className="text-center">
<h3 className="text-2xl font-bold mb-4">Still Need Help?</h3> <h3 className="text-2xl font-bold mb-4">Still Need Help?</h3>
<p className="text-white/90 mb-6"> <p className="text-white/90 mb-6">

8
frontend/src/pages/Optimizer/AnalysisPreview.tsx
View File

@@ -250,12 +250,12 @@ export default function AnalysisPreview() {
</div> </div>
)} )}
{!scores.has_taxonomy_mapping && ( {!scores.has_taxonomy_mapping && (
<div className="p-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg"> <div className="p-3 bg-info-50 dark:bg-info-900/20 border border-info-200 dark:border-info-800 rounded-lg">
<div className="flex items-start gap-2"> <div className="flex items-start gap-2">
<span className="text-purple-600 dark:text-purple-400 font-bold">2.</span> <span className="text-info-600 dark:text-info-400 font-bold">2.</span>
<div className="flex-1"> <div className="flex-1">
<div className="font-medium text-purple-900 dark:text-purple-300">Add Taxonomy Mapping</div> <div className="font-medium text-info-900 dark:text-info-300">Add Taxonomy Mapping</div>
<div className="text-sm text-purple-700 dark:text-purple-400 mt-1"> <div className="text-sm text-info-700 dark:text-info-400 mt-1">
Categorize this content with a taxonomy for better organization and navigation. Categorize this content with a taxonomy for better organization and navigation.
</div> </div>
</div> </div>

8
frontend/src/pages/Publisher/ContentCalendar.tsx
View File

@@ -490,20 +490,20 @@ export default function ContentCalendar() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
{/* Review */} {/* Review */}
<Card <Card
className="p-4 cursor-pointer hover:border-purple-500 transition-colors group" className="p-4 cursor-pointer hover:border-info-500 transition-colors group"
onClick={() => navigate('/writer/review')} onClick={() => navigate('/writer/review')}
> >
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<div className="size-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center"> <div className="size-8 rounded-lg bg-info-100 dark:bg-info-900/30 flex items-center justify-center">
<PencilIcon className="w-4 h-4 text-purple-600" /> <PencilIcon className="w-4 h-4 text-info-600" />
</div> </div>
<h3 className="text-base font-semibold text-gray-900 dark:text-white">Review</h3> <h3 className="text-base font-semibold text-gray-900 dark:text-white">Review</h3>
</div> </div>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Content awaiting review before approval</p> <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Content awaiting review before approval</p>
</div> </div>
<p className="text-3xl font-bold text-purple-600 dark:text-purple-400">{stats.review}</p> <p className="text-3xl font-bold text-info-600 dark:text-info-400">{stats.review}</p>
</div> </div>
</Card> </Card>

6
frontend/src/pages/Publisher/PublishSettings.tsx
View File

@@ -225,10 +225,10 @@ export default function PublishSettings() {
</Card> </Card>
{/* Card 3: Schedule (Days + Time Slots) */} {/* Card 3: Schedule (Days + Time Slots) */}
<Card className="p-6 border-l-4 border-l-purple-500"> <Card className="p-6 border-l-4 border-l-info-500">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<CalendarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <CalendarIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Schedule</h2> <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Schedule</h2>
</div> </div>

2
frontend/src/pages/Settings/Integration.tsx
View File

@@ -712,7 +712,7 @@ export default function Integration() {
</Label> </Label>
{/* Featured Image (full width) - Selectable */} {/* Featured Image (full width) - Selectable */}
<div className="p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-500 to-brand-500 text-white"> <div className="p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-info-500 to-brand-500 text-white">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<div className="font-medium">Featured Image</div> <div className="font-medium">Featured Image</div>
<div className="text-xs bg-white/20 px-2 py-1 rounded"> <div className="text-xs bg-white/20 px-2 py-1 rounded">

2
frontend/src/pages/Settings/WordPressIntegrationDebug.tsx
View File

@@ -478,7 +478,7 @@ export default function WordPressIntegrationDebug() {
<button <button
onClick={() => validatePostSync()} onClick={() => validatePostSync()}
disabled={loading} disabled={loading}
className="inline-flex items-center px-3 py-1 text-xs bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-md disabled:opacity-50" className="inline-flex items-center px-3 py-1 text-xs bg-info-100 hover:bg-info-200 text-info-700 rounded-md disabled:opacity-50"
> >
<SettingsIcon className="h-3 w-3 mr-1" /> <SettingsIcon className="h-3 w-3 mr-1" />
Validate Content Validate Content

8
frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
View File

@@ -1480,16 +1480,16 @@ export default function IndustriesSectorsKeywords() {
{/* Ahrefs Coming Soon Banner */} {/* Ahrefs Coming Soon Banner */}
{showAhrefsBanner && ( {showAhrefsBanner && (
<div className="mx-6 mt-6 mb-6"> <div className="mx-6 mt-6 mb-6">
<Card className="p-4 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800"> <Card className="p-4 bg-info-50 dark:bg-info-900/20 border-info-200 dark:border-info-800">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<ShootingStarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5" /> <ShootingStarIcon className="w-5 h-5 text-info-600 dark:text-info-400 mt-0.5" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h3 className="text-sm font-medium text-purple-900 dark:text-purple-200 mb-1"> <h3 className="text-sm font-medium text-info-900 dark:text-info-200 mb-1">
Ahrefs Keyword Research - Coming March/April 2026 Ahrefs Keyword Research - Coming March/April 2026
</h3> </h3>
<p className="text-sm text-purple-700 dark:text-purple-300"> <p className="text-sm text-info-700 dark:text-info-300">
Soon you'll be able to research keywords directly with Ahrefs API, pulling fresh data with volume, difficulty, and competition metrics. For now, browse our curated keyword library above. Soon you'll be able to research keywords directly with Ahrefs API, pulling fresh data with volume, difficulty, and competition metrics. For now, browse our curated keyword library above.
</p> </p>
</div> </div>

32
frontend/src/pages/Sites/AIAutomationSettings.tsx
View File

@@ -485,10 +485,10 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
</Card> </Card>
{/* Card 3: Image Generation (Style & Count only) */} {/* Card 3: Image Generation (Style & Count only) */}
<Card className="p-5 border-l-4 border-l-purple-500"> <Card className="p-5 border-l-4 border-l-info-500">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<ImageIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <ImageIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900 dark:text-white">Images</h3> <h3 className="font-semibold text-gray-900 dark:text-white">Images</h3>
@@ -546,8 +546,8 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
<Card className="p-5 lg:col-span-2"> <Card className="p-5 lg:col-span-2">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<BoltIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <BoltIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900 dark:text-white">Automation Stages Settings</h3> <h3 className="font-semibold text-gray-900 dark:text-white">Automation Stages Settings</h3>
@@ -705,10 +705,10 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
{/* Right: Schedule + Capacity stacked */} {/* Right: Schedule + Capacity stacked */}
<div className="space-y-6"> <div className="space-y-6">
{/* Schedule Card */} {/* Schedule Card */}
<Card className="p-5 border-l-4 border-l-purple-500"> <Card className="p-5 border-l-4 border-l-info-500">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<CalendarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <CalendarIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900 dark:text-white">Schedule</h3> <h3 className="font-semibold text-gray-900 dark:text-white">Schedule</h3>
@@ -861,12 +861,12 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
</Card> </Card>
{/* Stage Configuration Explanation */} {/* Stage Configuration Explanation */}
<Card className="p-4 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800"> <Card className="p-4 bg-info-50 dark:bg-info-900/20 border-info-200 dark:border-info-800">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<BoltIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 flex-shrink-0" /> <BoltIcon className="w-5 h-5 text-info-600 dark:text-info-400 mt-0.5 flex-shrink-0" />
<div className="text-sm text-purple-800 dark:text-purple-200"> <div className="text-sm text-info-800 dark:text-info-200">
<p className="font-medium mb-2">Stage Configuration</p> <p className="font-medium mb-2">Stage Configuration</p>
<ul className="list-disc list-inside space-y-1 text-purple-700 dark:text-purple-300"> <ul className="list-disc list-inside space-y-1 text-info-700 dark:text-info-300">
<li><strong>Batch:</strong> Items processed together</li> <li><strong>Batch:</strong> Items processed together</li>
<li><strong>Limit:</strong> Max items per automation run</li> <li><strong>Limit:</strong> Max items per automation run</li>
<li><strong>Model:</strong> Live (production) or Test mode</li> <li><strong>Model:</strong> Live (production) or Test mode</li>
@@ -877,12 +877,12 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
</Card> </Card>
{/* Schedule & Capacity Explanation */} {/* Schedule & Capacity Explanation */}
<Card className="p-4 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800"> <Card className="p-4 bg-info-50 dark:bg-info-900/20 border-info-200 dark:border-info-800">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<CalendarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 flex-shrink-0" /> <CalendarIcon className="w-5 h-5 text-info-600 dark:text-info-400 mt-0.5 flex-shrink-0" />
<div className="text-sm text-purple-800 dark:text-purple-200"> <div className="text-sm text-info-800 dark:text-info-200">
<p className="font-medium mb-2">Schedule & Capacity</p> <p className="font-medium mb-2">Schedule & Capacity</p>
<ul className="list-disc list-inside space-y-1 text-purple-700 dark:text-purple-300"> <ul className="list-disc list-inside space-y-1 text-info-700 dark:text-info-300">
<li>Select days content can be published</li> <li>Select days content can be published</li>
<li>Add time slots for publishing</li> <li>Add time slots for publishing</li>
<li>Capacity = Days × Time Slots</li> <li>Capacity = Days × Time Slots</li>

6
frontend/src/pages/Sites/Dashboard.tsx
View File

@@ -301,10 +301,10 @@ export default function SiteDashboard() {
{/* Integrations */} {/* Integrations */}
<button <button
onClick={() => navigate(`/sites/${siteId}/settings?tab=integrations`)} onClick={() => navigate(`/sites/${siteId}/settings?tab=integrations`)}
className="flex items-center gap-3 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-purple-300 hover:bg-purple-50 dark:hover:bg-purple-900/10 transition-all group" className="flex items-center gap-3 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-info-300 hover:bg-info-50 dark:hover:bg-info-900/10 transition-all group"
> >
<div className="size-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0"> <div className="size-8 rounded-lg bg-info-100 dark:bg-info-900/30 flex items-center justify-center flex-shrink-0">
<PlugInIcon className="h-4 w-4 text-purple-600 dark:text-purple-400" /> <PlugInIcon className="h-4 w-4 text-info-600 dark:text-info-400" />
</div> </div>
<span className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Integrations</span> <span className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Integrations</span>
</button> </button>

8
frontend/src/pages/Sites/Settings.tsx
View File

@@ -586,10 +586,10 @@ export default function SiteSettings() {
}} }}
className={`px-4 py-2 font-medium border-b-2 rounded-none transition-colors whitespace-nowrap ${ className={`px-4 py-2 font-medium border-b-2 rounded-none transition-colors whitespace-nowrap ${
activeTab === 'automation' activeTab === 'automation'
? 'border-purple-500 text-purple-600 dark:text-purple-400' ? 'border-info-500 text-info-600 dark:text-info-400'
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
}`} }`}
startIcon={<CalendarIcon className={`w-4 h-4 ${activeTab === 'automation' ? 'text-purple-500' : ''}`} />} startIcon={<CalendarIcon className={`w-4 h-4 ${activeTab === 'automation' ? 'text-info-500' : ''}`} />}
> >
Automation Automation
</Button> </Button>
@@ -855,9 +855,9 @@ export default function SiteSettings() {
</Card> </Card>
{/* Open Graph */} {/* Open Graph */}
<Card className="p-6 border-l-4 border-l-purple-500"> <Card className="p-6 border-l-4 border-l-info-500">
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2"> <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
<PaperPlaneIcon className="w-5 h-5 text-purple-500" /> <PaperPlaneIcon className="w-5 h-5 text-info-500" />
Open Graph Open Graph
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">

6
frontend/src/pages/account/AccountSettingsPage.tsx
View File

@@ -354,7 +354,7 @@ export default function AccountSettingsPage() {
</Card> </Card>
{/* Billing Address Card */} {/* Billing Address Card */}
<Card className="p-6 border-l-4 border-l-purple-500"> <Card className="p-6 border-l-4 border-l-info-500">
<h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Billing Address</h3> <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Billing Address</h3>
<div className="space-y-4"> <div className="space-y-4">
<InputField <InputField
@@ -528,7 +528,7 @@ export default function AccountSettingsPage() {
</Card> </Card>
{/* Preferences Card */} {/* Preferences Card */}
<Card className="p-6 border-l-4 border-l-purple-500"> <Card className="p-6 border-l-4 border-l-info-500">
<h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Preferences</h3> <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Preferences</h3>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
@@ -729,7 +729,7 @@ export default function AccountSettingsPage() {
<li>✗ Cannot manage billing</li> <li>✗ Cannot manage billing</li>
</ul> </ul>
</div> </div>
<div className="p-4 border-l-4 border-purple-500 bg-purple-50/50 dark:bg-purple-900/10 rounded-r-lg"> <div className="p-4 border-l-4 border-info-500 bg-info-50/50 dark:bg-info-900/10 rounded-r-lg">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<h4 className="font-semibold text-gray-900 dark:text-white">Member</h4> <h4 className="font-semibold text-gray-900 dark:text-white">Member</h4>
<Badge variant="light" color="info">Standard Access</Badge> <Badge variant="light" color="info">Standard Access</Badge>

8
frontend/src/pages/account/ContentSettingsPage.tsx
View File

@@ -527,10 +527,10 @@ export default function ContentSettingsPage() {
{/* Image Settings Tab */} {/* Image Settings Tab */}
{activeTab === 'images' && ( {activeTab === 'images' && (
<div className="space-y-6 max-w-4xl"> <div className="space-y-6 max-w-4xl">
<Card className="p-6 border-l-4 border-l-purple-500"> <Card className="p-6 border-l-4 border-l-info-500">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<ImageIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <ImageIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Image Generation</h2> <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Image Generation</h2>
@@ -579,7 +579,7 @@ export default function ContentSettingsPage() {
{/* Row 2: Featured Image Size */} {/* Row 2: Featured Image Size */}
<div> <div>
<Label className="mb-2">Featured Image</Label> <Label className="mb-2">Featured Image</Label>
<div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-500 to-brand-500 text-white"> <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-info-500 to-brand-500 text-white">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<div className="font-medium">Featured Image Size</div> <div className="font-medium">Featured Image Size</div>
<div className="text-xs bg-white/20 px-2 py-1 rounded">Always Enabled</div> <div className="text-xs bg-white/20 px-2 py-1 rounded">Always Enabled</div>

22
frontend/src/pages/account/PlansAndBillingPage.tsx
View File

@@ -813,7 +813,7 @@ export default function PlansAndBillingPage() {
const stageConfig = { const stageConfig = {
verifying: { color: 'bg-brand-600', label: 'Verifying Payment' }, verifying: { color: 'bg-brand-600', label: 'Verifying Payment' },
processing: { color: 'bg-warning-600', label: 'Processing Payment' }, processing: { color: 'bg-warning-600', label: 'Processing Payment' },
finalizing: { color: 'bg-purple-600', label: 'Finalizing' }, finalizing: { color: 'bg-info-600', label: 'Finalizing' },
activating: { color: 'bg-success-600', label: 'Activating Subscription' }, activating: { color: 'bg-success-600', label: 'Activating Subscription' },
}; };
const config = stageConfig[paymentProcessing.stage]; const config = stageConfig[paymentProcessing.stage];
@@ -1024,14 +1024,14 @@ export default function PlansAndBillingPage() {
<div className="text-xs text-success-600 dark:text-success-400 mt-1">Never expire</div> <div className="text-xs text-success-600 dark:text-success-400 mt-1">Never expire</div>
</div> </div>
<div className="p-4 bg-white/80 dark:bg-gray-800/60 rounded-xl shadow-sm"> <div className="p-4 bg-white/80 dark:bg-gray-800/60 rounded-xl shadow-sm">
<div className="flex items-center gap-2 text-sm text-purple-700 dark:text-purple-300 mb-1"> <div className="flex items-center gap-2 text-sm text-info-700 dark:text-info-300 mb-1">
<TrendingUpIcon className="w-4 h-4 text-purple-600" /> <TrendingUpIcon className="w-4 h-4 text-info-600" />
Used Used
</div> </div>
<div className="text-2xl font-bold text-purple-900 dark:text-white"> <div className="text-2xl font-bold text-info-900 dark:text-white">
{creditBalance?.credits_used_this_month?.toLocaleString() || 0} {creditBalance?.credits_used_this_month?.toLocaleString() || 0}
</div> </div>
<div className="text-xs text-purple-600 dark:text-purple-400 mt-1">This month ({creditUsage}%)</div> <div className="text-xs text-info-600 dark:text-info-400 mt-1">This month ({creditUsage}%)</div>
</div> </div>
<div className="p-4 bg-white/80 dark:bg-gray-800/60 rounded-xl shadow-sm"> <div className="p-4 bg-white/80 dark:bg-gray-800/60 rounded-xl shadow-sm">
<div className="flex items-center gap-2 text-sm text-success-700 dark:text-success-300 mb-1"> <div className="flex items-center gap-2 text-sm text-success-700 dark:text-success-300 mb-1">
@@ -1089,7 +1089,7 @@ export default function PlansAndBillingPage() {
<div className="h-3 bg-white/50 dark:bg-gray-800/50 rounded-full overflow-hidden"> <div className="h-3 bg-white/50 dark:bg-gray-800/50 rounded-full overflow-hidden">
<div <div
className={`h-full rounded-full transition-all duration-500 ${ className={`h-full rounded-full transition-all duration-500 ${
creditUsage >= 90 ? 'bg-error-500' : creditUsage >= 70 ? 'bg-warning-500' : 'bg-gradient-to-r from-brand-500 to-purple-500' creditUsage >= 90 ? 'bg-error-500' : creditUsage >= 70 ? 'bg-warning-500' : 'bg-gradient-to-r from-brand-500 to-info-500'
}`} }`}
style={{ width: `${Math.min(creditUsage, 100)}%` }} style={{ width: `${Math.min(creditUsage, 100)}%` }}
/> />
@@ -1119,8 +1119,8 @@ export default function PlansAndBillingPage() {
</div> </div>
<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg"> <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<UsersIcon className="w-4 h-4 text-purple-600 dark:text-purple-400" /> <UsersIcon className="w-4 h-4 text-info-600 dark:text-info-400" />
</div> </div>
<span className="text-sm text-gray-700 dark:text-gray-300">Team Members</span> <span className="text-sm text-gray-700 dark:text-gray-300">Team Members</span>
</div> </div>
@@ -1281,8 +1281,8 @@ export default function PlansAndBillingPage() {
<Card className="p-6"> <Card className="p-6">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<ShootingStarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <ShootingStarIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900 dark:text-white"> <h3 className="font-semibold text-gray-900 dark:text-white">
@@ -1318,7 +1318,7 @@ export default function PlansAndBillingPage() {
className={`p-4 border rounded-xl flex items-center justify-between transition-colors ${ className={`p-4 border rounded-xl flex items-center justify-between transition-colors ${
isCurrentPlan isCurrentPlan
? 'border-brand-500 bg-brand-50/50 dark:bg-brand-900/20' ? 'border-brand-500 bg-brand-50/50 dark:bg-brand-900/20'
: 'border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-700' : 'border-gray-200 dark:border-gray-700 hover:border-info-300 dark:hover:border-info-700'
}`} }`}
> >
<div> <div>

14
frontend/src/pages/account/UsageAnalyticsPage.tsx
View File

@@ -99,14 +99,14 @@ export default function UsageAnalyticsPage() {
</div> </div>
</Card> </Card>
<Card className="p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 border-l-4 border-l-purple-500"> <Card className="p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 border-l-4 border-l-info-500">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<TrendingUpIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <TrendingUpIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<div className="text-xs text-gray-600 dark:text-gray-400">Credits Used This Month</div> <div className="text-xs text-gray-600 dark:text-gray-400">Credits Used This Month</div>
<div className="text-2xl font-bold text-purple-600 dark:text-purple-400"> <div className="text-2xl font-bold text-info-600 dark:text-info-400">
{creditBalance.credits_used_this_month.toLocaleString()} {creditBalance.credits_used_this_month.toLocaleString()}
</div> </div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">spent so far</div> <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">spent so far</div>
@@ -214,12 +214,12 @@ export default function UsageAnalyticsPage() {
<Card className="p-6"> <Card className="p-6">
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-3 mb-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<BarChart3Icon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <BarChart3Icon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<div className="text-sm font-medium text-gray-600 dark:text-gray-400">Avg Operations/Day</div> <div className="text-sm font-medium text-gray-600 dark:text-gray-400">Avg Operations/Day</div>
</div> </div>
<div className="text-3xl font-bold text-purple-600 dark:text-purple-400"> <div className="text-3xl font-bold text-info-600 dark:text-info-400">
{Math.round((analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0) || 0) / period)} {Math.round((analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0) || 0) / period)}
</div> </div>
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">daily average</div> <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">daily average</div>

18
frontend/src/pages/account/UsageDashboardPage.tsx
View File

@@ -484,10 +484,10 @@ export default function UsageDashboardPage() {
<div className="text-xs text-gray-500 dark:text-gray-400">Never expire</div> <div className="text-xs text-gray-500 dark:text-gray-400">Never expire</div>
</div> </div>
<div> <div>
<div className="text-3xl font-bold text-purple-700 dark:text-purple-400 mb-1"> <div className="text-3xl font-bold text-info-700 dark:text-info-400 mb-1">
{creditBalance?.credits_used_this_month.toLocaleString() || 0} {creditBalance?.credits_used_this_month.toLocaleString() || 0}
</div> </div>
<div className="text-sm text-purple-600 dark:text-purple-300">Used This Month</div> <div className="text-sm text-info-600 dark:text-info-300">Used This Month</div>
</div> </div>
<div> <div>
<div className="text-3xl font-bold text-indigo-800 dark:text-white mb-1"> <div className="text-3xl font-bold text-indigo-800 dark:text-white mb-1">
@@ -520,7 +520,7 @@ export default function UsageDashboardPage() {
</div> </div>
<div className="h-3 bg-white/50 dark:bg-gray-800/50 rounded-full overflow-hidden"> <div className="h-3 bg-white/50 dark:bg-gray-800/50 rounded-full overflow-hidden">
<div <div
className="h-full rounded-full transition-all duration-500 bg-gradient-to-r from-brand-500 to-purple-500" className="h-full rounded-full transition-all duration-500 bg-gradient-to-r from-brand-500 to-info-500"
style={{ width: `${Math.min(creditPercentage, 100)}%` }} style={{ width: `${Math.min(creditPercentage, 100)}%` }}
/> />
</div> </div>
@@ -590,7 +590,7 @@ export default function UsageDashboardPage() {
icon={<UsersIcon className="w-4 h-4" />} icon={<UsersIcon className="w-4 h-4" />}
usage={usageSummary?.hard_limits?.users} usage={usageSummary?.hard_limits?.users}
type="hard" type="hard"
color="var(--color-purple-500)" color="var(--color-info-500)"
/> />
<LimitCard <LimitCard
title="Keywords" title="Keywords"
@@ -644,8 +644,8 @@ export default function UsageDashboardPage() {
<Card className="p-6"> <Card className="p-6">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<PieChartIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <PieChartIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900 dark:text-white">Credit Consumption</h3> <h3 className="font-semibold text-gray-900 dark:text-white">Credit Consumption</h3>
@@ -727,8 +727,8 @@ export default function UsageDashboardPage() {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg"> <div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<FileTextIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" /> <FileTextIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
</div> </div>
<div> <div>
<h3 className="font-semibold text-gray-900 dark:text-white">Usage Logs</h3> <h3 className="font-semibold text-gray-900 dark:text-white">Usage Logs</h3>
@@ -910,7 +910,7 @@ export default function UsageDashboardPage() {
</div> </div>
<div className="p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg"> <div className="p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<ImageIcon className="w-4 h-4 text-purple-500" /> <ImageIcon className="w-4 h-4 text-info-500" />
<span className="font-medium text-gray-900 dark:text-white">Image Creation</span> <span className="font-medium text-gray-900 dark:text-white">Image Creation</span>
</div> </div>
<p className="text-sm text-gray-600 dark:text-gray-400">1-15 credits per image (by quality)</p> <p className="text-sm text-gray-600 dark:text-gray-400">1-15 credits per image (by quality)</p>

2
frontend/src/styles/README.md
View File

@@ -26,7 +26,7 @@ import "./styles/design-system.css";
--color-success /* Success green (#00B894) */ --color-success /* Success green (#00B894) */
--color-warning /* Warning amber (#F59E0B) */ --color-warning /* Warning amber (#F59E0B) */
--color-danger /* Error red (#DC2626) */ --color-danger /* Error red (#DC2626) */
--color-purple /* Premium purple (#7C3AED) */ --color-info /* Info/accent color (#18b2c4) */
``` ```
### Usage ### Usage

16
frontend/src/styles/cms/presets.ts
View File

@@ -35,7 +35,7 @@ export const STYLE_PRESETS: StylePreset[] = [
description: 'Clean, contemporary design with vibrant colors', description: 'Clean, contemporary design with vibrant colors',
colors: { colors: {
primary: 'var(--color-primary, #2C7AA1)', primary: 'var(--color-primary, #2C7AA1)',
secondary: 'var(--color-purple, #2C40A1)', secondary: 'var(--color-info, #2C40A1)',
accent: 'var(--color-success, #2CA18E)', accent: 'var(--color-success, #2CA18E)',
background: 'var(--color-white, #ffffff)', background: 'var(--color-white, #ffffff)',
text: 'var(--color-gray-800, #1f2937)', text: 'var(--color-gray-800, #1f2937)',
@@ -126,12 +126,12 @@ export const STYLE_PRESETS: StylePreset[] = [
name: 'Elegant', name: 'Elegant',
description: 'Sophisticated, refined design', description: 'Sophisticated, refined design',
colors: { colors: {
primary: 'var(--color-purple, #2C40A1)', primary: 'var(--color-info, #2C40A1)',
secondary: 'var(--color-purple-400, #5f73d1)', secondary: 'var(--color-info-400, #5f73d1)',
accent: 'var(--color-purple-300, #8895e0)', accent: 'var(--color-info-300, #8895e0)',
background: 'var(--color-purple-50, #f0f2fc)', background: 'var(--color-info-50, #f0f2fc)',
text: 'var(--color-purple-900, #1a2660)', text: 'var(--color-info-900, #1a2660)',
border: 'var(--color-purple-200, #b1baeb)', border: 'var(--color-info-200, #b1baeb)',
}, },
typography: { typography: {
fontFamily: 'Playfair Display, serif', fontFamily: 'Playfair Display, serif',
@@ -151,7 +151,7 @@ export const STYLE_PRESETS: StylePreset[] = [
colors: { colors: {
primary: 'var(--color-brand-400, #4899bd)', primary: 'var(--color-brand-400, #4899bd)',
secondary: 'var(--color-primary, #2C7AA1)', secondary: 'var(--color-primary, #2C7AA1)',
accent: 'var(--color-purple, #2C40A1)', accent: 'var(--color-info, #2C40A1)',
background: 'var(--color-gray-900, #0f172a)', background: 'var(--color-gray-900, #0f172a)',
text: 'var(--color-gray-100, #f1f5f9)', text: 'var(--color-gray-100, #f1f5f9)',
border: 'var(--color-gray-800, #1e293b)', border: 'var(--color-gray-800, #1e293b)',

54
frontend/src/styles/design-system.css
View File

@@ -11,7 +11,7 @@
⚠️ ONLY 6 HEX VALUES IN ENTIRE SYSTEM - Everything else derived! ⚠️ ONLY 6 HEX VALUES IN ENTIRE SYSTEM - Everything else derived!
⚠️ TAILWIND DEFAULT COLORS ARE DISABLED - THEY WON'T WORK! ⚠️ TAILWIND DEFAULT COLORS ARE DISABLED - THEY WON'T WORK!
⚠️ AI AGENTS: DO NOT USE blue-500, red-500, green-500, etc. ⚠️ AI AGENTS: DO NOT USE blue-500, red-500, green-500, etc.
⚠️ USE ONLY: brand-*, success-*, warning-*, error-*, purple-*, gray-* ⚠️ USE ONLY: brand-*, success-*, warning-*, error-*, info-*, gray-*
Last Updated: 2026-01-01 Last Updated: 2026-01-01
=================================================================== */ =================================================================== */
@@ -36,7 +36,7 @@
--color-success: #2CA18E; --color-success: #2CA18E;
--color-warning: #D9A12C; --color-warning: #D9A12C;
--color-danger: #A12C40; --color-danger: #A12C40;
--color-purple: #2C40A1; --color-info: #2C40A1;
--color-gray-base: #667085; --color-gray-base: #667085;
*/ */
@@ -46,7 +46,7 @@
--color-success: #10B981; --color-success: #10B981;
--color-warning: #F59E0B; --color-warning: #F59E0B;
--color-danger: #EF4444; --color-danger: #EF4444;
--color-purple: #7C3AED; --color-info: #7C3AED;
--color-gray-base: #64748B; --color-gray-base: #64748B;
*/ */
@@ -56,7 +56,7 @@
--color-success: #22C55E; --color-success: #22C55E;
--color-warning: #FBBF24; --color-warning: #FBBF24;
--color-danger: #F43F5E; --color-danger: #F43F5E;
--color-purple: #8B5CF6; --color-info: #8B5CF6;
--color-gray-base: #6B7280; --color-gray-base: #6B7280;
*/ */
@@ -66,21 +66,21 @@
--color-success: #059669; --color-success: #059669;
--color-warning: #F97316; --color-warning: #F97316;
--color-danger: #DC2626; --color-danger: #DC2626;
--color-purple: #6366F1; --color-info: #6366F1;
--color-gray-base: #475569; --color-gray-base: #475569;
*/ */
--color-primary: #1c86d1; --color-primary: #1c86d1;
--color-success: #3fcd9f; --color-success: #3fcd9f;
--color-warning: #f87f4c; --color-warning: #f87f4c;
--color-danger: #ff656f; --color-danger: #ff656f;
--color-purple: #18b2c4; --color-info: #18b2c4;
--color-gray-base: #243249; --color-gray-base: #243249;
/* /*
--color-primary: #3B82F6; --color-primary: #3B82F6;
--color-success: #10B981; --color-success: #10B981;
--color-warning: #F59E0B; --color-warning: #F59E0B;
--color-danger: #DC2626; --color-danger: #DC2626;
--color-purple: #F63B82; --color-info: #F63B82;
--color-gray-base: #30425d; --color-gray-base: #30425d;
*/ */
@@ -108,10 +108,10 @@
--color-danger-light: color-mix(in srgb, var(--color-danger) 60%, white); --color-danger-light: color-mix(in srgb, var(--color-danger) 60%, white);
--color-danger-subtle: color-mix(in srgb, var(--color-danger) 10%, white); --color-danger-subtle: color-mix(in srgb, var(--color-danger) 10%, white);
/* Purple Variants (derived from --color-purple) */ /* Info Variants (derived from --color-info) */
--color-purple-dark: color-mix(in srgb, var(--color-purple) 75%, black); --color-info-dark: color-mix(in srgb, var(--color-info) 75%, black);
--color-purple-light: color-mix(in srgb, var(--color-purple) 60%, white); --color-info-light: color-mix(in srgb, var(--color-info) 60%, white);
--color-purple-subtle: color-mix(in srgb, var(--color-purple) 10%, white); --color-info-subtle: color-mix(in srgb, var(--color-info) 10%, white);
/* =================================================================== /* ===================================================================
BACKGROUND COLORS (derived from primaries) BACKGROUND COLORS (derived from primaries)
@@ -149,7 +149,7 @@
--gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%); --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
--gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%); --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
--gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%); --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
--gradient-purple: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%); --gradient-info: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
--gradient-panel: linear-gradient(180deg, var(--color-panel) 0%, var(--color-panel-alt) 100%); --gradient-panel: linear-gradient(180deg, var(--color-panel) 0%, var(--color-panel-alt) 100%);
/* =================================================================== /* ===================================================================
@@ -274,7 +274,7 @@
- success-* (green) - success-* (green)
- error-* (red) - error-* (red)
- warning-* (amber) - warning-* (amber)
- purple-* (premium) - info-* (info/accent)
❌ These will NOT work: blue-*, red-*, green-*, emerald-*, ❌ These will NOT work: blue-*, red-*, green-*, emerald-*,
amber-*, indigo-*, pink-*, rose-*, sky-*, teal-*, etc. amber-*, indigo-*, pink-*, rose-*, sky-*, teal-*, etc.
@@ -448,20 +448,20 @@
--color-warning-950: color-mix(in srgb, var(--color-warning) 25%, black); --color-warning-950: color-mix(in srgb, var(--color-warning) 25%, black);
/* ----------------------------------------------------------------- /* -----------------------------------------------------------------
PURPLE SCALE (ALL derived from --color-purple) INFO SCALE (ALL derived from --color-info)
----------------------------------------------------------------- */ ----------------------------------------------------------------- */
--color-purple-25: color-mix(in srgb, var(--color-purple) 2%, white); --color-info-25: color-mix(in srgb, var(--color-info) 2%, white);
--color-purple-50: color-mix(in srgb, var(--color-purple) 8%, white); --color-info-50: color-mix(in srgb, var(--color-info) 8%, white);
--color-purple-100: color-mix(in srgb, var(--color-purple) 15%, white); --color-info-100: color-mix(in srgb, var(--color-info) 15%, white);
--color-purple-200: color-mix(in srgb, var(--color-purple) 25%, white); --color-info-200: color-mix(in srgb, var(--color-info) 25%, white);
--color-purple-300: color-mix(in srgb, var(--color-purple) 40%, white); --color-info-300: color-mix(in srgb, var(--color-info) 40%, white);
--color-purple-400: color-mix(in srgb, var(--color-purple) 60%, white); --color-info-400: color-mix(in srgb, var(--color-info) 60%, white);
--color-purple-500: var(--color-purple); --color-info-500: var(--color-info);
--color-purple-600: color-mix(in srgb, var(--color-purple) 85%, black); --color-info-600: color-mix(in srgb, var(--color-info) 85%, black);
--color-purple-700: color-mix(in srgb, var(--color-purple) 70%, black); --color-info-700: color-mix(in srgb, var(--color-info) 70%, black);
--color-purple-800: color-mix(in srgb, var(--color-purple) 55%, black); --color-info-800: color-mix(in srgb, var(--color-info) 55%, black);
--color-purple-900: color-mix(in srgb, var(--color-purple) 40%, black); --color-info-900: color-mix(in srgb, var(--color-info) 40%, black);
--color-purple-950: color-mix(in srgb, var(--color-purple) 25%, black); --color-info-950: color-mix(in srgb, var(--color-info) 25%, black);
/* ----------------------------------------------------------------- /* -----------------------------------------------------------------
INFO/BLUE-LIGHT SCALE (derived from --color-primary for consistency) INFO/BLUE-LIGHT SCALE (derived from --color-primary for consistency)
@@ -883,7 +883,7 @@ select:focus {
.igny8-header-metric-accent.blue { background: var(--color-primary); } .igny8-header-metric-accent.blue { background: var(--color-primary); }
.igny8-header-metric-accent.green { background: var(--color-success); } .igny8-header-metric-accent.green { background: var(--color-success); }
.igny8-header-metric-accent.amber { background: var(--color-warning); } .igny8-header-metric-accent.amber { background: var(--color-warning); }
.igny8-header-metric-accent.purple { background: var(--color-purple); } .igny8-header-metric-accent.purple { background: var(--color-info); }
/* =================================================================== /* ===================================================================

6
frontend/src/templates/ContentViewTemplate.tsx
View File

@@ -42,7 +42,7 @@ interface ParsedArticle {
} }
const imageStatusClassMap: Record<string, string> = { const imageStatusClassMap: Record<string, string> = {
generated: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-200', generated: 'bg-info-100 text-info-700 dark:bg-info-500/20 dark:text-info-200',
pending: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-200', pending: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-200',
queued: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-200', queued: 'bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-200',
failed: 'bg-error-100 text-error-700 dark:bg-error-500/20 dark:text-error-200', failed: 'bg-error-100 text-error-700 dark:bg-error-500/20 dark:text-error-200',
@@ -890,7 +890,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
return 'bg-brand-100 text-brand-800 dark:bg-brand-900/30 dark:text-brand-400'; return 'bg-brand-100 text-brand-800 dark:bg-brand-900/30 dark:text-brand-400';
} }
if (statusLower === 'review') { if (statusLower === 'review') {
return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400'; return 'bg-info-100 text-info-800 dark:bg-info-900/30 dark:text-info-400';
} }
if (statusLower === 'pending' || statusLower === 'draft') { if (statusLower === 'pending' || statusLower === 'draft') {
return 'bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-400'; return 'bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-400';
@@ -1034,7 +1034,7 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
.map((category) => ( .map((category) => (
<span <span
key={category.id} key={category.id}
className="px-3 py-1 bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300 rounded-full text-xs font-medium" className="px-3 py-1 bg-info-50 dark:bg-info-900/20 text-info-700 dark:text-info-300 rounded-full text-xs font-medium"
> >
{category.name} {category.name}
</span> </span>

2
frontend/src/templates/TablePageTemplate.tsx
View File

@@ -710,7 +710,7 @@ export default function TablePageTemplate({
metric.accentColor === 'blue' ? 'bg-brand-500' : metric.accentColor === 'blue' ? 'bg-brand-500' :
metric.accentColor === 'green' ? 'bg-success-500' : metric.accentColor === 'green' ? 'bg-success-500' :
metric.accentColor === 'amber' ? 'bg-warning-500' : metric.accentColor === 'amber' ? 'bg-warning-500' :
metric.accentColor === 'purple' ? 'bg-purple-500' : 'bg-gray-500' metric.accentColor === 'purple' ? 'bg-info-500' : 'bg-gray-500'
}`}></div> }`}></div>
<span className="text-[13px] font-medium text-gray-500 dark:text-gray-400 flex items-center gap-1"> <span className="text-[13px] font-medium text-gray-500 dark:text-gray-400 flex items-center gap-1">
{metric.label} {metric.label}