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

4
frontend/src/components/onboarding/OnboardingWizard.tsx
View File

@@ -230,7 +230,7 @@ export default function OnboardingWizard({ onComplete, onSkip }: OnboardingWizar
<div
className={`size-8 rounded-full flex items-center justify-center text-sm font-medium transition-colors ${
step.id < currentStep
? 'bg-green-500 text-white'
? 'bg-success-500 text-white'
: step.id === currentStep
? 'bg-brand-500 text-white'
: 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
@@ -246,7 +246,7 @@ export default function OnboardingWizard({ onComplete, onSkip }: OnboardingWizar
<div
className={`h-1 flex-1 mx-2 rounded transition-colors ${
step.id < currentStep
? 'bg-green-500'
? 'bg-success-500'
: 'bg-gray-200 dark:bg-gray-700'
}`}
/>

12
frontend/src/components/onboarding/steps/Step2AddSite.tsx
View File

@@ -234,7 +234,7 @@ export default function Step2AddSite({
tone={isSelected ? 'success' : 'neutral'}
variant="soft"
className={`cursor-pointer transition-all ${
isSelected ? 'ring-2 ring-green-500' : 'hover:bg-gray-200 dark:hover:bg-gray-700'
isSelected ? 'ring-2 ring-success-500' : 'hover:bg-gray-200 dark:hover:bg-gray-700'
}`}
>
<span onClick={() => handleSectorToggle(sector.slug)} className="flex items-center">
@@ -254,20 +254,20 @@ export default function Step2AddSite({
)}
{/* Defaults Info */}
<Card className="p-4 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 mb-6">
<Card className="p-4 bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800 mb-6">
<div className="flex items-start gap-3">
<GridIcon className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5" />
<GridIcon className="w-5 h-5 text-brand-600 dark:text-brand-400 mt-0.5" />
<div>
<h4 className="font-medium text-blue-900 dark:text-blue-100 text-sm mb-1">
<h4 className="font-medium text-brand-900 dark:text-brand-100 text-sm mb-1">
Optimized Defaults Applied
</h4>
<ul className="text-xs text-blue-700 dark:text-blue-300 space-y-0.5">
<ul className="text-xs text-brand-700 dark:text-brand-300 space-y-0.5">
<li>• Auto-approval enabled</li>
<li>• Auto-publish to site enabled</li>
<li>• 3 articles/day limit</li>
<li>• Publishing Mon-Fri at 9am, 2pm, 6pm</li>
</ul>
<p className="text-xs text-blue-600 dark:text-blue-400 mt-2">
<p className="text-xs text-brand-600 dark:text-brand-400 mt-2">
You can customize these in Site Settings anytime.
</p>
</div>

4
frontend/src/components/onboarding/steps/Step3ConnectIntegration.tsx
View File

@@ -216,9 +216,9 @@ export default function Step3ConnectIntegration({
<div className="flex items-center gap-3">
<div className={`size-10 rounded-lg flex items-center justify-center ${
testResult === 'success'
? 'bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400'
? 'bg-success-100 dark:bg-success-900/50 text-success-600 dark:text-success-400'
: testResult === 'failed'
? 'bg-red-100 dark:bg-red-900/50 text-red-600 dark:text-red-400'
? 'bg-error-100 dark:bg-error-900/50 text-error-600 dark:text-error-400'
: 'bg-gray-100 dark:bg-gray-800 text-gray-500'
}`}>
{testResult === 'success' ? (

10
frontend/src/components/onboarding/steps/Step4AddKeywords.tsx
View File

@@ -216,7 +216,7 @@ export default function Step4AddKeywords({
{keywords.length > 0 && (
<button
onClick={() => setKeywords([])}
className="text-red-500 hover:text-red-600"
className="text-error-500 hover:text-error-600"
>
Clear all
</button>
@@ -224,15 +224,15 @@ export default function Step4AddKeywords({
</div>
{/* Keyword Suggestions */}
<Card className="p-4 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 mb-6">
<h4 className="font-medium text-blue-900 dark:text-blue-100 text-sm mb-2">
💡 Keyword Ideas
<Card className="p-4 bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800 mb-6">
<h4 className="font-medium text-brand-900 dark:text-brand-100 text-sm mb-2">
Keyword Ideas
</h4>
<div className="flex flex-wrap gap-2">
{SUGGESTIONS.map((suggestion, index) => (
<span
key={index}
className="text-xs text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800/50 px-2 py-1 rounded"
className="text-xs text-brand-700 dark:text-brand-300 bg-brand-100 dark:bg-brand-800/50 px-2 py-1 rounded"
>
{suggestion}
</span>

12
frontend/src/components/onboarding/steps/Step5Complete.tsx
View File

@@ -57,7 +57,7 @@ export default function Step5Complete({
<div className="text-center">
{/* Success Animation */}
<div className="mb-6">
<div className="inline-flex items-center justify-center size-20 rounded-full bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400 mb-4">
<div className="inline-flex items-center justify-center size-20 rounded-full bg-success-100 dark:bg-success-900/50 text-success-600 dark:text-success-400 mb-4">
<CheckCircleIcon className="h-10 w-10" />
</div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
@@ -75,14 +75,14 @@ export default function Step5Complete({
</h3>
<ul className="space-y-2">
<li className="flex items-center gap-2 text-sm">
<CheckCircleIcon className="w-4 h-4 text-green-500" />
<CheckCircleIcon className="w-4 h-4 text-success-500" />
<span className="text-gray-700 dark:text-gray-300">
Site: <span className="font-medium">{data.siteName || 'Your Site'}</span>
</span>
</li>
{data.integrationTested && (
<li className="flex items-center gap-2 text-sm">
<CheckCircleIcon className="w-4 h-4 text-green-500" />
<CheckCircleIcon className="w-4 h-4 text-success-500" />
<span className="text-gray-700 dark:text-gray-300">
WordPress integration connected
</span>
@@ -90,20 +90,20 @@ export default function Step5Complete({
)}
{data.keywordsAdded && (
<li className="flex items-center gap-2 text-sm">
<CheckCircleIcon className="w-4 h-4 text-green-500" />
<CheckCircleIcon className="w-4 h-4 text-success-500" />
<span className="text-gray-700 dark:text-gray-300">
{data.keywordsCount} keyword{data.keywordsCount !== 1 ? 's' : ''} added to pipeline
</span>
</li>
)}
<li className="flex items-center gap-2 text-sm">
<CheckCircleIcon className="w-4 h-4 text-green-500" />
<CheckCircleIcon className="w-4 h-4 text-success-500" />
<span className="text-gray-700 dark:text-gray-300">
Auto-approval & auto-publish enabled
</span>
</li>
<li className="flex items-center gap-2 text-sm">
<CheckCircleIcon className="w-4 h-4 text-green-500" />
<CheckCircleIcon className="w-4 h-4 text-success-500" />
<span className="text-gray-700 dark:text-gray-300">
Daily automation scheduled
</span>