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

Refactor frontend components to use new icon imports and improve default values

Browse Source 
- Updated `EnhancedMetricCard` to set a default accent color to blue.
- Replaced `lucide-react` icons with custom icons in `LinkResults`, `OptimizationScores`, and various pages in the Automation and Optimizer sections.
- Enhanced button layouts in `AutomationRules`, `Tasks`, and `ContentSelector` for better alignment and user experience.
- Improved loading indicators across components for a more consistent UI experience.
This commit is contained in:
IGNY8 VPS (Salman)
2025-11-17 21:38:08 +00:00
parent 0818dfe385
commit ee56f9bbac
11 changed files with 153 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/src/pages/Optimizer/ContentSelector.tsx
View File

@@ -9,7 +9,7 @@ import { SourceBadge, ContentSource } from '../../components/content/SourceBadge
import { SyncStatusBadge, SyncStatus } from '../../components/content/SyncStatusBadge';
import { ContentFilter, FilterState } from '../../components/content/ContentFilter';
import { OptimizationScores } from '../../components/optimizer/OptimizationScores';
import { Zap, Loader2, CheckCircle2 } from 'lucide-react';
import { BoltIcon, CheckCircleIcon } from '../../icons';
import { useSectorStore } from '../../store/sectorStore';
import { usePageSizeStore } from '../../store/pageSizeStore';
@@ -146,42 +146,49 @@ export default function OptimizerContentSelector() {
<PageMeta title="Optimize Content" description="Select and optimize content for SEO and engagement" />
<div className="space-y-6">
<PageHeader
title="Optimize Content"
description="Select content to optimize for SEO, readability, and engagement"
actions={
<div className="flex items-center gap-4">
<select
value={entryPoint}
onChange={(e) => setEntryPoint(e.target.value as EntryPoint)}
className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
>
<option value="auto">Auto-detect</option>
<option value="writer">From Writer</option>
<option value="wordpress">From WordPress</option>
<option value="external">From External</option>
<option value="manual">Manual</option>
</select>
<button
onClick={handleBatchOptimize}
disabled={selectedIds.length === 0 || processing.length > 0}
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{processing.length > 0 ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
Optimizing...
</>
) : (
<>
<Zap className="w-4 h-4" />
Optimize Selected ({selectedIds.length})
</>
)}
</button>
</div>
}
/>
<div className="flex items-center justify-between mb-6">
<PageHeader
title="Optimize Content"
lastUpdated={new Date()}
badge={{
icon: <BoltIcon />,
color: 'orange',
}}
/>
<div className="flex items-center gap-4">
<select
value={entryPoint}
onChange={(e) => setEntryPoint(e.target.value as EntryPoint)}
className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
>
<option value="auto">Auto-detect</option>
<option value="writer">From Writer</option>
<option value="wordpress">From WordPress</option>
<option value="external">From External</option>
<option value="manual">Manual</option>
</select>
<button
onClick={handleBatchOptimize}
disabled={selectedIds.length === 0 || processing.length > 0}
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{processing.length > 0 ? (
<>
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
Optimizing...
</>
) : (
<>
<BoltIcon className="w-4 h-4" />
Optimize Selected ({selectedIds.length})
</>
)}
</button>
</div>
</div>
<p className="text-gray-600 dark:text-gray-400 mb-6">
Select content to optimize for SEO, readability, and engagement
</p>
{/* Filters */}
<ContentFilter onFilterChange={setFilters} />
@@ -275,12 +282,12 @@ export default function OptimizerContentSelector() {
>
{isProcessing ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
Optimizing...
</>
) : (
<>
<Zap className="w-4 h-4" />
<BoltIcon className="w-4 h-4" />
Optimize
</>
)}