fix: correct deposit section layout on appointment create page
Move switch to its own row; render amount field (wrapped in .field for a proper bordered box) and wallet-charge button on a following aligned row. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -330,29 +330,29 @@ export default function AppointmentCreatePage() {
|
|||||||
|
|
||||||
{/* بیعانه */}
|
{/* بیعانه */}
|
||||||
<div style={sectionTitle}>بیعانه</div>
|
<div style={sectionTitle}>بیعانه</div>
|
||||||
<div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 20, marginBottom: 12 }}>
|
<label style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 14, cursor: 'pointer' }}>
|
||||||
<label style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 14, cursor: 'pointer' }}>
|
<span style={{
|
||||||
|
position: 'relative', width: 42, height: 22, borderRadius: 999, flexShrink: 0,
|
||||||
|
background: depositRequired ? 'var(--primary)' : '#c4c4c4', transition: 'background .2s',
|
||||||
|
}}>
|
||||||
|
<input type="checkbox" checked={depositRequired} onChange={e => setDepositRequired(e.target.checked)}
|
||||||
|
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', margin: 0, opacity: 0, cursor: 'pointer' }} />
|
||||||
<span style={{
|
<span style={{
|
||||||
position: 'relative', width: 42, height: 22, borderRadius: 999, flexShrink: 0,
|
position: 'absolute', top: 2, insetInlineStart: depositRequired ? 22 : 2, width: 18, height: 18,
|
||||||
background: depositRequired ? 'var(--primary)' : '#c4c4c4', transition: 'background .2s',
|
borderRadius: 999, background: '#fff', transition: 'inset-inline-start .2s', boxShadow: '0 1px 2px rgba(0,0,0,.2)',
|
||||||
}}>
|
}} />
|
||||||
<input type="checkbox" checked={depositRequired} onChange={e => setDepositRequired(e.target.checked)}
|
</span>
|
||||||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', margin: 0, opacity: 0, cursor: 'pointer' }} />
|
بیعانه مورد نیاز است.
|
||||||
<span style={{
|
</label>
|
||||||
position: 'absolute', top: 2, insetInlineStart: depositRequired ? 22 : 2, width: 18, height: 18,
|
{depositRequired && (
|
||||||
borderRadius: 999, background: '#fff', transition: 'inset-inline-start .2s', boxShadow: '0 1px 2px rgba(0,0,0,.2)',
|
<div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', gap: 12, margin: '12px 0' }}>
|
||||||
}} />
|
|
||||||
</span>
|
|
||||||
بیعانه مورد نیاز است.
|
|
||||||
</label>
|
|
||||||
{depositRequired && (
|
|
||||||
<div style={{ width: 300, maxWidth: '100%' }}>
|
<div style={{ width: 300, maxWidth: '100%' }}>
|
||||||
<label style={label}>مبلغ بیعانه (تومان)</label>
|
<label style={label}>مبلغ بیعانه (تومان)</label>
|
||||||
<div style={{ marginTop: 6 }}><PriceInput value={depositRials} onChange={setDepositRials} /></div>
|
<div className="field" style={{ marginTop: 6, height: 44 }}><PriceInput value={depositRials} onChange={setDepositRials} /></div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<WalletChargeLink mobile={effectiveMobile} />
|
||||||
{depositRequired && <WalletChargeLink mobile={effectiveMobile} />}
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
<div style={{ maxWidth: 500 }}>
|
<div style={{ maxWidth: 500 }}>
|
||||||
<label style={label}>انتخاب وضعیت</label>
|
<label style={label}>انتخاب وضعیت</label>
|
||||||
|
|||||||
Reference in New Issue
Block a user