fix: customer form auth fields layout + sticky header opacity
- Auth fields: use grid-cols-2 with dir=ltr for proper username/password layout, better spacing and visual hierarchy with key icon - Header: increase opacity to 0.95 with subtle shadow to prevent content showing through when scrolling Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
+16
-11
@@ -199,20 +199,25 @@ function CustomerForm({ onDone, onCancel, customer }) {
|
||||
className={inputClass} dir="ltr" />
|
||||
<input placeholder="EspoCRM URL" value={form.espocrm_url} onChange={e => setForm({ ...form, espocrm_url: e.target.value })}
|
||||
className={inputClass} dir="ltr" />
|
||||
<div className="bg-slate-50 rounded-xl p-3 space-y-2">
|
||||
<p className="text-xs font-bold text-slate-500 text-right">פרטי התחברות ל-EspoCRM</p>
|
||||
<div className="flex gap-2">
|
||||
<input placeholder="סיסמה" value={authPass}
|
||||
onChange={e => updateAuthFromCredentials(authUser, e.target.value)}
|
||||
className="flex-1 bg-white border border-slate-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500" dir="ltr" type="password" />
|
||||
<input placeholder="שם משתמש" value={authUser}
|
||||
<div className="bg-slate-100/60 rounded-xl p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
<p className="text-xs font-bold text-slate-500">פרטי התחברות ל-EspoCRM</p>
|
||||
<Icon name="key" className="text-sm text-slate-400" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3" dir="ltr">
|
||||
<input placeholder="Username" value={authUser}
|
||||
onChange={e => updateAuthFromCredentials(e.target.value, authPass)}
|
||||
className="flex-1 bg-white border border-slate-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500" dir="ltr" />
|
||||
className="bg-white border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
|
||||
<input placeholder="Password" value={authPass} type="password"
|
||||
onChange={e => updateAuthFromCredentials(authUser, e.target.value)}
|
||||
className="bg-white border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
|
||||
</div>
|
||||
{form.espocrm_api_key && (
|
||||
<p className="text-[10px] text-slate-400 font-mono truncate" dir="ltr">
|
||||
Espo-Authorization: {form.espocrm_api_key}
|
||||
</p>
|
||||
<div className="bg-white rounded-lg px-3 py-2 border border-slate-200/60">
|
||||
<p className="text-[10px] text-slate-400 font-mono truncate" dir="ltr">
|
||||
Espo-Authorization: {form.espocrm_api_key}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{isEdit && !form.espocrm_api_key && (
|
||||
<p className="text-[10px] text-slate-400 text-right">השאר ריק כדי לא לשנות</p>
|
||||
|
||||
@@ -11,10 +11,11 @@ body {
|
||||
}
|
||||
|
||||
.glass-header {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.deep-action-gradient {
|
||||
|
||||
Reference in New Issue
Block a user