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

18
frontend/src/pages/Automation/Rules.tsx
View File

@@ -5,7 +5,7 @@ import PageHeader from '../../components/common/PageHeader';
import ComponentCard from '../../components/common/ComponentCard';
import { automationApi, AutomationRule } from '../../api/automation.api';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { BoltIcon, PlusIcon, PlayIcon, PauseIcon, TrashIcon, EditIcon } from '../../icons';
import { BoltIcon, PlusIcon, TrashBinIcon, PencilIcon, PaperPlaneIcon, CloseIcon } from '../../icons';
import { useSiteStore } from '../../store/siteStore';
import { useSectorStore } from '../../store/sectorStore';
@@ -191,33 +191,33 @@ export default function AutomationRules() {
<div className="flex items-center gap-2 pt-2 border-t border-gray-200 dark:border-gray-700">
<button
onClick={() => handleToggleActive(rule)}
className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center justify-center"
title={rule.is_active ? 'Deactivate' : 'Activate'}
>
{rule.is_active ? <PauseIcon /> : <PlayIcon />}
{rule.is_active ? <CloseIcon className="w-4 h-4" /> : <PaperPlaneIcon className="w-4 h-4" />}
</button>
{rule.trigger === 'manual' && (
<button
onClick={() => handleExecute(rule.id)}
className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center justify-center"
title="Execute Now"
>
<PlayIcon />
<PaperPlaneIcon className="w-4 h-4" />
</button>
)}
<button
onClick={() => handleEdit(rule)}
className="px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
className="px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center justify-center"
title="Edit"
>
<EditIcon />
<PencilIcon className="w-4 h-4" />
</button>
<button
onClick={() => handleDelete(rule.id)}
className="px-3 py-1.5 text-sm rounded-lg border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
className="px-3 py-1.5 text-sm rounded-lg border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors flex items-center justify-center"
title="Delete"
>
<TrashIcon />
<TrashBinIcon className="w-4 h-4" />
</button>
</div>
</div>

4
frontend/src/pages/Automation/Tasks.tsx
View File

@@ -4,7 +4,7 @@ import PageHeader from '../../components/common/PageHeader';
import ComponentCard from '../../components/common/ComponentCard';
import { automationApi, ScheduledTask } from '../../api/automation.api';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { ClockIcon, CheckCircleIcon, XCircleIcon, RefreshCwIcon } from '../../icons';
import { ClockIcon, CheckCircleIcon, XCircleIcon, ArrowRightIcon } from '../../icons';
import { useSiteStore } from '../../store/siteStore';
import { useSectorStore } from '../../store/sectorStore';
@@ -233,7 +233,7 @@ export default function AutomationTasks() {
onClick={() => handleRetry(task.id)}
className="flex items-center gap-2 px-4 py-2 text-sm bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
>
<RefreshCwIcon />
<ArrowRightIcon className="w-4 h-4" />
Retry Task
</button>
</div>