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

styling fixes

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-19 23:34:41 +00:00
parent 375863b157
commit 9d4aa32f9e
21 changed files with 174 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/pages/Settings/Integration.tsx
View File

@@ -739,8 +739,8 @@ export default function Integration() {
</div>
{/* Row 2: Image Size Info */}
<div className="p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
<div className="text-sm text-blue-700 dark:text-blue-300">
<div className="p-3 rounded-lg bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800">
<div className="text-sm text-brand-700 dark:text-brand-300">
<strong>Image Sizes (auto-determined):</strong>
<ul className="mt-1 list-disc list-inside text-xs space-y-1">
<li>Featured image: Landscape ({getImageSizes(service, service === 'openai' ? (integrations[selectedIntegration]?.model || 'dall-e-3') : (integrations[selectedIntegration]?.runwareModel || 'runware:97@1'))[0]?.label.split(' - ')[0] || 'model-specific'})</li>

20
frontend/src/pages/Sites/AIAutomationSettings.tsx
View File

@@ -560,10 +560,10 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
</div>
{/* Info Banner */}
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3 mb-4">
<div className="bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 rounded-lg p-3 mb-4">
<div className="flex items-start gap-2">
<InfoIcon className="w-4 h-4 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
<p className="text-sm text-blue-800 dark:text-blue-200">
<InfoIcon className="w-4 h-4 text-brand-600 dark:text-brand-400 mt-0.5 flex-shrink-0" />
<p className="text-sm text-brand-800 dark:text-brand-200">
<span className="font-medium">Limit:</span> max items per run (0=all).
<span className="font-medium ml-2">Budget:</span> credit allocation across AI stages.
</p>
@@ -705,10 +705,10 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
{/* Right: Schedule + Capacity stacked */}
<div className="space-y-6">
{/* Schedule Card */}
<Card className="p-5 border-l-4 border-l-pink-500">
<Card className="p-5 border-l-4 border-l-purple-500">
<div className="flex items-center gap-3 mb-4">
<div className="p-2 bg-pink-100 dark:bg-pink-900/30 rounded-lg">
<CalendarIcon className="w-5 h-5 text-pink-600 dark:text-pink-400" />
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
<CalendarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Schedule</h3>
@@ -877,12 +877,12 @@ export default function AIAutomationSettings({ siteId }: AIAutomationSettingsPro
</Card>
{/* Schedule & Capacity Explanation */}
<Card className="p-4 bg-pink-50 dark:bg-pink-900/20 border-pink-200 dark:border-pink-800">
<Card className="p-4 bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800">
<div className="flex items-start gap-3">
<CalendarIcon className="w-5 h-5 text-pink-600 dark:text-pink-400 mt-0.5 flex-shrink-0" />
<div className="text-sm text-pink-800 dark:text-pink-200">
<CalendarIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 mt-0.5 flex-shrink-0" />
<div className="text-sm text-purple-800 dark:text-purple-200">
<p className="font-medium mb-2">Schedule & Capacity</p>
<ul className="list-disc list-inside space-y-1 text-pink-700 dark:text-pink-300">
<ul className="list-disc list-inside space-y-1 text-purple-700 dark:text-purple-300">
<li>Select days content can be published</li>
<li>Add time slots for publishing</li>
<li>Capacity = Days × Time Slots</li>

6
frontend/src/pages/Sites/Dashboard.tsx
View File

@@ -323,10 +323,10 @@ export default function SiteDashboard() {
{/* Deploy Site */}
<button
onClick={() => navigate(`/sites/${siteId}/deploy`)}
className="flex items-center gap-3 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-info-300 hover:bg-info-50 dark:hover:bg-info-900/10 transition-all group"
className="flex items-center gap-3 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-brand-300 hover:bg-brand-50 dark:hover:bg-brand-900/10 transition-all group"
>
<div className="size-8 rounded-lg bg-info-100 dark:bg-info-900/30 flex items-center justify-center flex-shrink-0">
<ArrowUpIcon className="h-4 w-4 text-info-600 dark:text-info-400" />
<div className="size-8 rounded-lg bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center flex-shrink-0">
<ArrowUpIcon className="h-4 w-4 text-brand-600 dark:text-brand-400" />
</div>
<span className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Deploy Site</span>
</button>

4
frontend/src/pages/Sites/Settings.tsx
View File

@@ -696,9 +696,9 @@ export default function SiteSettings() {
</Card>
{/* Card 2: Industry & Sectors Configuration */}
<Card className="p-6 border-l-4 border-l-info-500">
<Card className="p-6 border-l-4 border-l-brand-500">
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
<LayersIcon className="w-5 h-5 text-info-500" />
<LayersIcon className="w-5 h-5 text-brand-500" />
Industry & Sectors
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">

2
frontend/src/pages/account/AccountSettingsPage.tsx
View File

@@ -729,7 +729,7 @@ export default function AccountSettingsPage() {
<li>✗ Cannot manage billing</li>
</ul>
</div>
<div className="p-4 border-l-4 border-info-500 bg-info-50/50 dark:bg-info-900/10 rounded-r-lg">
<div className="p-4 border-l-4 border-purple-500 bg-purple-50/50 dark:bg-purple-900/10 rounded-r-lg">
<div className="flex items-center justify-between mb-2">
<h4 className="font-semibold text-gray-900 dark:text-white">Member</h4>
<Badge variant="light" color="info">Standard Access</Badge>

24
frontend/src/pages/account/PlansAndBillingPage.tsx
View File

@@ -683,10 +683,10 @@ export default function PlansAndBillingPage() {
// PAYMENT PROCESSING OVERLAY - Beautiful full-page loading with breathing badge
if (paymentProcessing?.active) {
const stageConfig = {
verifying: { color: 'bg-blue-600', label: 'Verifying Payment' },
processing: { color: 'bg-amber-600', label: 'Processing Payment' },
verifying: { color: 'bg-brand-600', label: 'Verifying Payment' },
processing: { color: 'bg-warning-600', label: 'Processing Payment' },
finalizing: { color: 'bg-purple-600', label: 'Finalizing' },
activating: { color: 'bg-green-600', label: 'Activating Subscription' },
activating: { color: 'bg-success-600', label: 'Activating Subscription' },
};
const config = stageConfig[paymentProcessing.stage];
@@ -815,11 +815,11 @@ export default function PlansAndBillingPage() {
</div>
)}
{hasPendingPayment && (
<div className="mb-6 p-4 rounded-xl border border-info-200 bg-info-50 dark:border-info-800 dark:bg-info-900/20 flex items-start gap-3">
<Loader2Icon className="w-5 h-5 text-info-600 dark:text-info-400 mt-0.5 shrink-0 animate-spin" />
<div className="mb-6 p-4 rounded-xl border border-brand-200 bg-brand-50 dark:border-brand-800 dark:bg-brand-900/20 flex items-start gap-3">
<Loader2Icon className="w-5 h-5 text-brand-600 dark:text-brand-400 mt-0.5 shrink-0 animate-spin" />
<div>
<p className="font-medium text-info-800 dark:text-info-200">Payment Pending Review</p>
<p className="text-sm text-info-700 dark:text-info-300 mt-1">Your payment is being processed. Credits will be added once approved.</p>
<p className="font-medium text-brand-800 dark:text-brand-200">Payment Pending Review</p>
<p className="text-sm text-brand-700 dark:text-brand-300 mt-1">Your payment is being processed. Credits will be added once approved.</p>
</div>
</div>
)}
@@ -1065,11 +1065,11 @@ export default function PlansAndBillingPage() {
onClick={() => setSelectedGateway('paypal')}
className={`flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-lg border-2 transition-all ${
selectedGateway === 'paypal'
? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
}`}
>
<WalletIcon className={`w-5 h-5 ${selectedGateway === 'paypal' ? 'text-blue-600' : 'text-gray-500'}`} />
<WalletIcon className={`w-5 h-5 ${selectedGateway === 'paypal' ? 'text-brand-600' : 'text-gray-500'}`} />
<span className="text-sm font-medium">PayPal</span>
</button>
)}
@@ -1269,8 +1269,8 @@ export default function PlansAndBillingPage() {
<Card className="p-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="p-2 bg-info-100 dark:bg-info-900/30 rounded-lg">
<CreditCardIcon className="w-5 h-5 text-info-600 dark:text-info-400" />
<div className="p-2 bg-brand-100 dark:bg-brand-900/30 rounded-lg">
<CreditCardIcon className="w-5 h-5 text-brand-600 dark:text-brand-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Payment Methods</h3>
@@ -1301,7 +1301,7 @@ export default function PlansAndBillingPage() {
{method.type === 'bank_transfer' || method.type === 'local_wallet' ? (
<Building2Icon className="w-6 h-6 text-gray-500" />
) : method.type === 'paypal' ? (
<WalletIcon className="w-6 h-6 text-blue-500" />
<WalletIcon className="w-6 h-6 text-brand-500" />
) : (
<CreditCardIcon className="w-6 h-6 text-brand-500" />
)}