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

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

@@ -62,7 +62,7 @@ export default function EnhancedMetricCard({
subtitle,
trend,
icon,
accentColor,
accentColor = "blue", // Default to blue if not provided
href,
onClick,
tooltip,
@@ -70,7 +70,7 @@ export default function EnhancedMetricCard({
className = "",
}: MetricCardProps) {
const [isHovered, setIsHovered] = useState(false);
const colors = accentColors[accentColor];
const colors = accentColors[accentColor] || accentColors.blue; // Fallback to blue if invalid
const formatValue = (val: string | number): string => {
if (typeof val === "number") {

8
frontend/src/components/linker/LinkResults.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { Link2, CheckCircle, XCircle } from 'lucide-react';
import { PlugInIcon, CheckCircleIcon, XCircleIcon } from '../../icons';
interface Link {
anchor_text: string;
@@ -25,7 +25,7 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">Linking Results</h3>
<div className="flex items-center gap-2">
<Link2 className="w-5 h-5 text-blue-500" />
<PlugInIcon className="w-5 h-5 text-blue-500" />
<span className="text-sm text-gray-600 dark:text-gray-400">Version {linkerVersion}</span>
</div>
</div>
@@ -33,7 +33,7 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
{linksAdded > 0 ? (
<div className="space-y-4">
<div className="flex items-center gap-2 text-green-600 dark:text-green-400">
<CheckCircle className="w-5 h-5" />
<CheckCircleIcon className="w-5 h-5" />
<span className="font-medium">{linksAdded} link{linksAdded !== 1 ? 's' : ''} added</span>
</div>
@@ -54,7 +54,7 @@ export const LinkResults: React.FC<LinkResultsProps> = ({
</div>
) : (
<div className="flex items-center gap-2 text-gray-500 dark:text-gray-400">
<XCircle className="w-5 h-5" />
<XCircleIcon className="w-5 h-5" />
<span>No links were added to this content.</span>
</div>
)}

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

@@ -1,5 +1,5 @@
import React from 'react';
import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
import { ArrowUpIcon, ArrowDownIcon } from '../../icons';
interface ScoreData {
seo_score: number;
@@ -39,9 +39,9 @@ export const OptimizationScores: React.FC<OptimizationScoresProps> = ({
const getChangeIcon = (current: number, previous?: number) => {
if (!previous) return null;
const diff = current - previous;
if (diff > 0) return <TrendingUp className="w-4 h-4 text-green-600" />;
if (diff < 0) return <TrendingDown className="w-4 h-4 text-red-600" />;
return <Minus className="w-4 h-4 text-gray-400" />;
if (diff > 0) return <ArrowUpIcon className="w-4 h-4 text-green-600" />;
if (diff < 0) return <ArrowDownIcon className="w-4 h-4 text-red-600" />;
return <span className="w-4 h-4 text-gray-400">—</span>;
};
const getChangeText = (current: number, previous?: number) => {