feat: update UI components to use CSS variables for dark mode compatibility

This commit is contained in:
hamed
2026-06-15 14:50:45 +03:30
parent df7a784701
commit e95c5c12d1
8 changed files with 260 additions and 73 deletions
+16 -16
View File
@@ -293,30 +293,30 @@ function SmsWalletPageInner() {
<div style={{
display: 'flex', alignItems: 'center', gap: 10,
padding: '10px 14px', borderRadius: 8,
background: '#fef9c3', border: '1px solid #fbbf24', fontSize: 13,
background: 'var(--warning-bg)', border: '1px solid var(--warning)', fontSize: 13,
}}>
<ClockIcon style={{ width: 16, color: '#b45309', flexShrink: 0 }} />
<span style={{ color: '#92400e' }}>در انتظار تأیید ادمین</span>
<ClockIcon style={{ width: 16, color: 'var(--warning)', flexShrink: 0 }} />
<span style={{ color: 'var(--warning)' }}>در انتظار تأیید ادمین</span>
</div>
)}
{currentSettings.post_visit_text_status === 'approved' && (
<div style={{
display: 'flex', alignItems: 'center', gap: 10,
padding: '10px 14px', borderRadius: 8,
background: '#dcfce7', border: '1px solid #86efac', fontSize: 13,
background: 'var(--success-bg)', border: '1px solid var(--success)', fontSize: 13,
}}>
<CheckCircleIcon style={{ width: 16, color: '#16a34a', flexShrink: 0 }} />
<span style={{ color: '#15803d' }}>تأیید شده و فعال است</span>
<CheckCircleIcon style={{ width: 16, color: 'var(--success)', flexShrink: 0 }} />
<span style={{ color: 'var(--success)' }}>تأیید شده و فعال است</span>
</div>
)}
{currentSettings.post_visit_text_status === 'rejected' && (
<div style={{
display: 'flex', alignItems: 'flex-start', gap: 10,
padding: '10px 14px', borderRadius: 8,
background: '#fee2e2', border: '1px solid #fca5a5', fontSize: 13,
background: 'var(--danger-bg)', border: '1px solid var(--danger)', fontSize: 13,
}}>
<XCircleIcon style={{ width: 16, color: '#dc2626', flexShrink: 0, marginTop: 1 }} />
<div style={{ color: '#dc2626' }}>
<XCircleIcon style={{ width: 16, color: 'var(--danger)', flexShrink: 0, marginTop: 1 }} />
<div style={{ color: 'var(--danger)' }}>
<div>متن پیامک رد شد</div>
{currentSettings.post_visit_text_reject_reason && (
<div style={{ marginTop: 3, fontSize: 12, opacity: 0.85 }}>دلیل: {currentSettings.post_visit_text_reject_reason}</div>
@@ -422,16 +422,16 @@ function SmsWalletPageInner() {
{/* انتخاب درگاه */}
{isTestMode ? (
<div style={{
background: '#fef9c3',
border: '1px solid #fbbf24',
background: 'var(--warning-bg)',
border: '1px solid var(--warning)',
borderRadius: 10,
padding: '12px 16px',
display: 'flex', alignItems: 'center', gap: 10,
}}>
<span style={{ fontSize: 20 }}></span>
<div>
<div style={{ fontWeight: 700, fontSize: 13.5, color: '#92400e' }}>درگاه آزمایشی فعال است</div>
<div style={{ fontSize: 12, color: '#b45309', marginTop: 2 }}>پول واقعی کسر نخواهد شد این تراکنش آزمایشی است</div>
<div style={{ fontWeight: 700, fontSize: 13.5, color: 'var(--warning)' }}>درگاه آزمایشی فعال است</div>
<div style={{ fontSize: 12, color: 'var(--warning)', marginTop: 2, opacity: 0.8 }}>پول واقعی کسر نخواهد شد این تراکنش آزمایشی است</div>
</div>
</div>
) : (
@@ -476,10 +476,10 @@ function SmsWalletPageInner() {
{watchAmount && Number(watchAmount) >= 10000 && (
<div style={{
background: isTestMode ? '#fef9c3' : 'var(--primary-subtle)',
border: `1px solid ${isTestMode ? '#fbbf24' : 'oklch(0.85 0.06 256)'}`,
background: isTestMode ? 'var(--warning-bg)' : 'var(--primary-soft)',
border: `1px solid ${isTestMode ? 'var(--warning)' : 'color-mix(in oklch, var(--primary) 40%, transparent)'}`,
borderRadius: 8, padding: '10px 14px',
fontSize: 13, color: isTestMode ? '#92400e' : 'var(--primary)', fontWeight: 500,
fontSize: 13, color: isTestMode ? 'var(--warning)' : 'var(--primary)', fontWeight: 500,
}}>
{isTestMode
? `پرداخت آزمایشی ${formatRial(Number(watchAmount))}`