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

GLobal Styling part 1

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 14:54:27 +00:00
parent 0e57c50e56
commit e96069775c
60 changed files with 812 additions and 1712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/sites/LayoutPreview.tsx
View File

@@ -4,7 +4,7 @@
* Component for previewing layouts with sample content
*/
import React, { useState } from 'react';
import { EyeIcon, XIcon, Maximize2Icon } from 'lucide-react';
import { EyeIcon, XIcon, Maximize2Icon } from '../../icons';
import { Card } from '../../ui/card';
import Button from '../../ui/button/Button';

2
frontend/src/components/sites/LayoutSelector.tsx
View File

@@ -4,7 +4,7 @@
* Component for selecting page layouts
*/
import React, { useState } from 'react';
import { CheckIcon } from 'lucide-react';
import { CheckIcon } from '../../icons';
import { Card } from '../../ui/card';
export interface LayoutOption {

2
frontend/src/components/sites/SiteProgressWidget.tsx
View File

@@ -7,7 +7,7 @@ import { useNavigate } from 'react-router-dom';
import { Card } from '../ui/card';
import Badge from '../ui/badge/Badge';
// import { fetchSiteProgress, SiteProgress } from '../../services/api';
import { CheckCircleIcon, XCircleIcon, AlertCircleIcon, ArrowRightIcon } from 'lucide-react';
import { CheckCircleIcon, XCircleIcon, AlertCircleIcon, ArrowRightIcon } from '../../icons';
interface SiteProgressWidgetProps {
blueprintId: number;

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

@@ -3,7 +3,7 @@
* Displays site type indicator (Site Builder or WordPress)
*/
import React from 'react';
import { Wand2, Globe } from 'lucide-react';
import { Wand2Icon, GlobeIcon } from '../../icons';
import Badge from '../ui/badge/Badge';
interface SiteTypeBadgeProps {
@@ -18,13 +18,13 @@ export default function SiteTypeBadge({ hostingType, className = '' }: SiteTypeB
return {
label: 'Site Builder',
color: 'primary' as const,
icon: <Wand2 className="w-3 h-3" />,
icon: <Wand2Icon className="w-3 h-3" />,
};
case 'wordpress':
return {
label: 'WordPress',
color: 'info' as const,
icon: <Globe className="w-3 h-3" />,
icon: <GlobeIcon className="w-3 h-3" />,
};
default:
return null;

2
frontend/src/components/sites/StyleEditor.tsx
View File

@@ -4,7 +4,7 @@
* Component for editing CSS styles and theme customization
*/
import React, { useState } from 'react';
import { CodeIcon, PaletteIcon, TypeIcon, SaveIcon, RefreshCwIcon } from 'lucide-react';
import { CodeIcon, PaletteIcon, TypeIcon, SaveIcon, RefreshCwIcon } from '../../icons';
import { Card } from '../../ui/card';
import Button from '../../ui/button/Button';
import Label from '../../form/Label';

2
frontend/src/components/sites/TemplateCustomizer.tsx
View File

@@ -4,7 +4,7 @@
* Component for customizing template settings and styles
*/
import React, { useState } from 'react';
import { SettingsIcon, PaletteIcon, TypeIcon, LayoutIcon } from 'lucide-react';
import { SettingsIcon, PaletteIcon, TypeIcon, LayoutIcon } from '../../icons';
import { Card } from '../../ui/card';
import Label from '../../form/Label';
import SelectDropdown from '../../form/SelectDropdown';

2
frontend/src/components/sites/TemplateLibrary.tsx
View File

@@ -4,7 +4,7 @@
* Component for browsing and selecting page templates
*/
import React, { useState } from 'react';
import { SearchIcon, FilterIcon, CheckIcon } from 'lucide-react';
import { SearchIcon, FilterIcon, CheckIcon } from '../../icons';
import { Card } from '../../ui/card';
import Button from '../../ui/button/Button';

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

@@ -5,7 +5,7 @@
*/
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Globe, CheckCircle, XCircle, Settings, RefreshCw, AlertCircle, ExternalLink } from 'lucide-react';
import { GlobeIcon, CheckCircleIcon, XCircleIcon, SettingsIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon } from '../../icons';
import { Card } from '../ui/card';
import Button from '../ui/button/Button';
import Badge from '../ui/badge/Badge';
@@ -49,7 +49,7 @@ export default function WordPressIntegrationCard({
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<Globe className="w-6 h-6 text-purple-600 dark:text-purple-400" />
<GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
</div>
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -74,7 +74,7 @@ export default function WordPressIntegrationCard({
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<Globe className="w-6 h-6 text-purple-600 dark:text-purple-400" />
<GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
</div>
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
@@ -101,13 +101,13 @@ export default function WordPressIntegrationCard({
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Sync Status</p>
<div className="flex items-center gap-2">
{integration.sync_status === 'success' || integration.sync_status === 'healthy' ? (
<CheckCircle className="w-4 h-4 text-success-500" />
<CheckCircleIcon className="w-4 h-4 text-success-500" />
) : integration.sync_status === 'failed' || integration.sync_status === 'error' ? (
<XCircle className="w-4 h-4 text-error-500" />
<XCircleIcon className="w-4 h-4 text-error-500" />
) : integration.sync_status === 'warning' ? (
<AlertCircle className="w-4 h-4 text-warning-500" />
<AlertCircleIcon className="w-4 h-4 text-warning-500" />
) : (
<RefreshCw className="w-4 h-4 text-warning-500 animate-spin" />
<RefreshCwIcon className="w-4 h-4 text-warning-500 animate-spin" />
)}
<span className="text-sm font-medium text-gray-900 dark:text-white capitalize">
{integration.sync_status === 'healthy' ? 'Healthy' :
@@ -132,7 +132,7 @@ export default function WordPressIntegrationCard({
<div className="pt-2 border-t border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<AlertCircle className="w-4 h-4 text-warning-500" />
<AlertCircleIcon className="w-4 h-4 text-warning-500" />
<span className="text-sm text-gray-600 dark:text-gray-400">
{integration.mismatch_count} sync mismatch{integration.mismatch_count !== 1 ? 'es' : ''} detected
</span>
@@ -144,7 +144,7 @@ export default function WordPressIntegrationCard({
onClick={() => navigate(`/sites/${siteId}/sync`)}
>
View Details
<ExternalLink className="w-3 h-3 ml-1" />
<ExternalLinkIcon className="w-3 h-3 ml-1" />
</Button>
)}
</div>
@@ -155,7 +155,7 @@ export default function WordPressIntegrationCard({
<div className="pt-2 border-t border-gray-200 dark:border-gray-700">
<div className="p-2 bg-error-50 dark:bg-error-900/20 border border-error-200 dark:border-error-800 rounded-lg">
<div className="flex items-start gap-2">
<XCircle className="w-4 h-4 text-error-500 mt-0.5 flex-shrink-0" />
<XCircleIcon className="w-4 h-4 text-error-500 mt-0.5 flex-shrink-0" />
<div className="flex-1">
<p className="text-xs font-medium text-error-800 dark:text-error-300 mb-1">
Sync Error
@@ -176,7 +176,7 @@ export default function WordPressIntegrationCard({
size="sm"
className="flex-1"
>
<Settings className="w-4 h-4 mr-2" />
<SettingsIcon className="w-4 h-4 mr-2" />
Manage
</Button>
{siteId && (
@@ -186,7 +186,7 @@ export default function WordPressIntegrationCard({
size="sm"
title="View Sync Dashboard"
>
<ExternalLink className="w-4 h-4" />
<ExternalLinkIcon className="w-4 h-4" />
</Button>
)}
{onSync && (
@@ -196,7 +196,7 @@ export default function WordPressIntegrationCard({
size="sm"
disabled={loading}
>
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
<RefreshCwIcon className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
</Button>
)}
</div>

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

@@ -17,9 +17,11 @@ import {
DownloadIcon,
PlusIcon,
CopyIcon,
TrashBinIcon
TrashBinIcon,
GlobeIcon,
KeyIcon,
RefreshCwIcon
} from '../../icons';
import { Globe, Key, RefreshCw } from 'lucide-react';
interface WordPressIntegrationFormProps {
siteId: number;
@@ -202,7 +204,7 @@ export default function WordPressIntegrationForm({
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3">
<div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<Globe className="w-6 h-6 text-purple-600 dark:text-purple-400" />
<GlobeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
</div>
<div>
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
@@ -257,7 +259,7 @@ export default function WordPressIntegrationForm({
>
{generatingKey ? (
<>
<RefreshCw className="w-4 h-4 mr-2 animate-spin" />
<RefreshCwIcon className="w-4 h-4 mr-2 animate-spin" />
Generating...
</>
) : (
@@ -313,7 +315,7 @@ export default function WordPressIntegrationForm({
className="inline-flex h-11 w-11 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50"
title="Regenerate"
>
<RefreshCw className={`w-5 h-5 ${generatingKey ? 'animate-spin' : ''}`} />
<RefreshCwIcon className={`w-5 h-5 ${generatingKey ? 'animate-spin' : ''}`} />
</button>
<div className="invisible absolute bottom-full left-1/2 z-50 mb-2.5 -translate-x-1/2 opacity-0 transition-opacity duration-300 group-hover:visible group-hover:opacity-100">
<div className="relative">
@@ -358,7 +360,7 @@ export default function WordPressIntegrationForm({
className="text-gray-500 hover:text-brand-500 dark:text-gray-400 dark:hover:text-brand-400 disabled:opacity-50 transition-colors"
title="Regenerate API key"
>
<RefreshCw className={`w-5 h-5 ${generatingKey ? 'animate-spin' : ''}`} />
<RefreshCwIcon className={`w-5 h-5 ${generatingKey ? 'animate-spin' : ''}`} />
</button>
<button
onClick={handleRevokeApiKey}

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

@@ -3,7 +3,7 @@
* Form for connecting/managing WordPress integration
*/
import React, { useState } from 'react';
import { X, Globe, AlertCircle } from 'lucide-react';
import { XIcon, GlobeIcon, AlertCircleIcon } from '../../icons';
import { Modal } from '../ui/modal';
import Button from '../ui/button/Button';
import Label from '../form/Label';
@@ -70,7 +70,7 @@ export default function WordPressIntegrationModal({
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-3">
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<Globe className="w-5 h-5 text-purple-600 dark:text-purple-400" />
<GlobeIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
</div>
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
{initialData ? 'Edit WordPress Integration' : 'Connect WordPress Site'}
@@ -80,14 +80,14 @@ export default function WordPressIntegrationModal({
onClick={onClose}
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
>
<X className="w-5 h-5" />
<XIcon className="w-5 h-5" />
</button>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 rounded-lg p-4 mb-4">
<div className="flex items-start gap-3">
<AlertCircle className="w-5 h-5 text-brand-600 dark:text-brand-400 mt-0.5 flex-shrink-0" />
<AlertCircleIcon className="w-5 h-5 text-brand-600 dark:text-brand-400 mt-0.5 flex-shrink-0" />
<div className="text-sm text-brand-800 dark:text-brand-300">
<p className="font-medium mb-1">WordPress Application Password Required</p>
<p>