fix: SMS city profiles UI — контраст цветов, выравнивание
- bg-[var(--color-surface-strong)] вместо --color-bg внутри карточек - Карточки профилей: --color-surface-strong, вложенные блоки: --color-surface - Текст всегда var(--color-text) — виден в светлой и тёмной теме - Toggle: компактнее (h-5 w-10) - Выравнивание: flex-wrap, gap, border-t для разделения секций - SMS ON/OFF badge вместо toggle в строке заголовка
This commit is contained in:
root
parent
484f9efcba
commit
6c9e13d19a
|
|
@ -147,9 +147,9 @@ export const SmsCityProfilesPanel = () => {
|
|||
// ── UI helpers ──────────────────────────────────────────────────────────
|
||||
const ModeBadge = ({ mode }) => {
|
||||
if (mode === "notification") {
|
||||
return <span className="rounded-lg px-2 py-0.5 text-[10px] font-semibold uppercase" style={{ backgroundColor: "rgba(59,130,246,0.12)", color: "#3b82f6" }}>Уведомление</span>;
|
||||
return <span className="rounded-md px-2 py-0.5 text-[10px] font-semibold" style={{ backgroundColor: "rgba(59,130,246,0.15)", color: "#3b82f6" }}>Уведомление</span>;
|
||||
}
|
||||
return <span className="rounded-lg px-2 py-0.5 text-[10px] font-semibold uppercase" style={{ backgroundColor: "rgba(34,197,94,0.12)", color: "#22c55e" }}>Ссылка</span>;
|
||||
return <span className="rounded-md px-2 py-0.5 text-[10px] font-semibold" style={{ backgroundColor: "rgba(34,197,94,0.15)", color: "#22c55e" }}>Ссылка</span>;
|
||||
};
|
||||
|
||||
const Toggle = ({ checked, onChange, label }) => (
|
||||
|
|
@ -157,15 +157,16 @@ export const SmsCityProfilesPanel = () => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={onChange}
|
||||
className={`relative h-6 w-11 rounded-full transition shrink-0 ${checked ? "bg-[#22c55e]" : "bg-[var(--color-border)]"}`}
|
||||
className={`relative h-5 w-10 rounded-full transition shrink-0 ${checked ? "bg-[#22c55e]" : "bg-[var(--color-border)]"}`}
|
||||
>
|
||||
<span className={`absolute top-0.5 h-5 w-5 rounded-full bg-white transition-all ${checked ? "left-[22px]" : "left-0.5"}`} />
|
||||
<span className={`absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all ${checked ? "left-[20px]" : "left-0.5"}`} />
|
||||
</button>
|
||||
<span className="text-xs text-[var(--color-text-muted)]">{label}</span>
|
||||
{label && <span className="text-xs text-[var(--color-text)]">{label}</span>}
|
||||
</div>
|
||||
);
|
||||
|
||||
const modeLabel = (mode) => mode === "notification" ? "Уведомление без ссылки" : "Согласование по ссылке";
|
||||
const inputCls = "w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-strong)] px-3 py-2 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)]";
|
||||
const cardCls = "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4 space-y-3";
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
|
|
@ -191,58 +192,58 @@ export const SmsCityProfilesPanel = () => {
|
|||
{showForm ? "Отмена" : "+ Профиль"}
|
||||
</button>
|
||||
</div>
|
||||
{message && <span className="text-sm text-[var(--color-text-muted)]">{message}</span>}
|
||||
{message && <span className="text-sm text-[var(--color-text)]">{message}</span>}
|
||||
</Panel>
|
||||
|
||||
{/* Add/Edit form */}
|
||||
{showForm && (
|
||||
<Panel className="p-5 space-y-5">
|
||||
<Panel className="p-5 space-y-4">
|
||||
<h3 className="text-sm font-semibold text-[var(--color-text)]">
|
||||
{editingId ? "Редактировать профиль" : "Новый профиль города"}
|
||||
</h3>
|
||||
|
||||
{/* City */}
|
||||
{/* City + master toggle */}
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-medium text-[var(--color-text-muted)]">Город</label>
|
||||
<select
|
||||
value={formCity}
|
||||
onChange={(e) => setFormCity(e.target.value)}
|
||||
disabled={!!editingId}
|
||||
className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)] disabled:opacity-50"
|
||||
className={`${inputCls} disabled:opacity-50`}
|
||||
>
|
||||
{CRIMEAN_CITIES.map((c) => (
|
||||
<option key={c} value={c}>{c}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* SMS enabled master toggle */}
|
||||
<div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-3">
|
||||
<Toggle checked={formSmsEnabled} onChange={() => setFormSmsEnabled(!formSmsEnabled)} label="SMS включены для этого города" />
|
||||
<div className={cardCls}>
|
||||
<Toggle checked={formSmsEnabled} onChange={() => setFormSmsEnabled(!formSmsEnabled)} label="SMS включены для города" />
|
||||
{!formSmsEnabled && (
|
||||
<p className="text-xs text-[var(--color-danger)] mt-2">⚠ Все SMS в этот город отключены</p>
|
||||
<p className="text-xs text-[var(--color-danger)]">⚠ Все SMS в этот город отключены</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delivery */}
|
||||
<div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
|
||||
<div className={cardCls}>
|
||||
<div className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">📦 Доставка</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormDeliveryMode("link")}
|
||||
className={["flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition",
|
||||
formDeliveryMode === "link" ? "border-[#22c55e] bg-[rgba(34,197,94,0.12)] text-[#22c55e]" : "border-[var(--color-border)] text-[var(--color-text-muted)]"].join(" ")}
|
||||
className={["flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition",
|
||||
formDeliveryMode === "link" ? "border-[#22c55e] bg-[rgba(34,197,94,0.1)] text-[#22c55e]" : "border-[var(--color-border)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface)]"].join(" ")}
|
||||
>
|
||||
🔗 Ссылка на согласование
|
||||
🔗 Ссылка
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormDeliveryMode("notification")}
|
||||
className={["flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition",
|
||||
formDeliveryMode === "notification" ? "border-[#3b82f6] bg-[rgba(59,130,246,0.12)] text-[#3b82f6]" : "border-[var(--color-border)] text-[var(--color-text-muted)]"].join(" ")}
|
||||
className={["flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition",
|
||||
formDeliveryMode === "notification" ? "border-[#3b82f6] bg-[rgba(59,130,246,0.1)] text-[#3b82f6]" : "border-[var(--color-border)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface)]"].join(" ")}
|
||||
>
|
||||
📢 Уведомление без ссылки
|
||||
📢 Уведомление
|
||||
</button>
|
||||
</div>
|
||||
{formDeliveryMode === "notification" && (
|
||||
|
|
@ -251,33 +252,33 @@ export const SmsCityProfilesPanel = () => {
|
|||
onChange={(e) => setFormDeliveryText(e.target.value)}
|
||||
placeholder="Ваш заказ готов. Доставим по графику."
|
||||
rows={2}
|
||||
className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] resize-none"
|
||||
className={`${inputCls} resize-none`}
|
||||
/>
|
||||
)}
|
||||
<p className="text-xs text-[var(--color-text-muted)]">
|
||||
{formDeliveryMode === "link" ? "Клиент получит ссылку для выбора даты доставки" : "Клиент получит уведомление — без согласования, без 2-й SMS"}
|
||||
{formDeliveryMode === "link" ? "Клиент получит ссылку для выбора даты доставки" : "Уведомление без ссылки, без 2-й SMS"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Pickup */}
|
||||
<div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
|
||||
<div className={cardCls}>
|
||||
<div className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">🏪 Самовывоз</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormPickupMode("link")}
|
||||
className={["flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition",
|
||||
formPickupMode === "link" ? "border-[#22c55e] bg-[rgba(34,197,94,0.12)] text-[#22c55e]" : "border-[var(--color-border)] text-[var(--color-text-muted)]"].join(" ")}
|
||||
className={["flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition",
|
||||
formPickupMode === "link" ? "border-[#22c55e] bg-[rgba(34,197,94,0.1)] text-[#22c55e]" : "border-[var(--color-border)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface)]"].join(" ")}
|
||||
>
|
||||
🔗 Ссылка на согласование
|
||||
🔗 Ссылка
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormPickupMode("notification")}
|
||||
className={["flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition",
|
||||
formPickupMode === "notification" ? "border-[#3b82f6] bg-[rgba(59,130,246,0.12)] text-[#3b82f6]" : "border-[var(--color-border)] text-[var(--color-text-muted)]"].join(" ")}
|
||||
className={["flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition",
|
||||
formPickupMode === "notification" ? "border-[#3b82f6] bg-[rgba(59,130,246,0.1)] text-[#3b82f6]" : "border-[var(--color-border)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface)]"].join(" ")}
|
||||
>
|
||||
📢 Уведомление без ссылки
|
||||
📢 Уведомление
|
||||
</button>
|
||||
</div>
|
||||
{formPickupMode === "notification" && (
|
||||
|
|
@ -286,18 +287,18 @@ export const SmsCityProfilesPanel = () => {
|
|||
onChange={(e) => setFormPickupText(e.target.value)}
|
||||
placeholder="Ваш заказ готов. Заберите со склада."
|
||||
rows={2}
|
||||
className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] resize-none"
|
||||
className={`${inputCls} resize-none`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Toggles row */}
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-3">
|
||||
<Toggle checked={formSecondSms} onChange={() => setFormSecondSms(!formSecondSms)} label="2-я SMS (повторная отправка)" />
|
||||
<div className={cardCls}>
|
||||
<Toggle checked={formSecondSms} onChange={() => setFormSecondSms(!formSecondSms)} label="2-я SMS (повтор)" />
|
||||
</div>
|
||||
<div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-3">
|
||||
<Toggle checked={formPaidStorage} onChange={() => setFormPaidStorage(!formPaidStorage)} label="SMS о платном хранении" />
|
||||
<div className={cardCls}>
|
||||
<Toggle checked={formPaidStorage} onChange={() => setFormPaidStorage(!formPaidStorage)} label="SMS: платное хранение" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -309,7 +310,7 @@ export const SmsCityProfilesPanel = () => {
|
|||
value={formNote}
|
||||
onChange={(e) => setFormNote(e.target.value)}
|
||||
placeholder="Например: Ялта — доставка без согласования"
|
||||
className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)]"
|
||||
className={inputCls}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -340,28 +341,29 @@ export const SmsCityProfilesPanel = () => {
|
|||
) : (
|
||||
<div className="space-y-3">
|
||||
{profiles.map((p) => (
|
||||
<div key={p.id} className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
|
||||
{/* Header */}
|
||||
<div key={p.id} className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4 space-y-3">
|
||||
{/* Header row */}
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-base font-semibold text-[var(--color-text)]">{p.city}</span>
|
||||
<Toggle checked={p.sms_enabled} onChange={() => handleQuickToggle(p, "sms_enabled")} label="" />
|
||||
{!p.sms_enabled && (
|
||||
<span className="rounded-lg px-2 py-0.5 text-[10px] font-semibold uppercase" style={{ backgroundColor: "rgba(239,68,68,0.12)", color: "#ef4444" }}>SMS отключены</span>
|
||||
{!p.sms_enabled ? (
|
||||
<span className="rounded-md px-2 py-0.5 text-[10px] font-semibold" style={{ backgroundColor: "rgba(239,68,68,0.15)", color: "#ef4444" }}>SMS OFF</span>
|
||||
) : (
|
||||
<span className="rounded-md px-2 py-0.5 text-[10px] font-semibold" style={{ backgroundColor: "rgba(34,197,94,0.15)", color: "#22c55e" }}>SMS ON</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleEdit(p)}
|
||||
className="rounded-lg border border-[var(--color-border)] px-2 py-1 text-xs font-medium text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)]"
|
||||
className="rounded-lg border border-[var(--color-border)] px-2.5 py-1 text-xs font-medium text-[var(--color-text)] hover:bg-[var(--color-surface)]"
|
||||
>
|
||||
✏️ Изменить
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(p.id)}
|
||||
className="rounded-lg p-1.5 text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)] hover:text-[var(--color-danger)]"
|
||||
className="rounded-lg p-1.5 text-[var(--color-text-muted)] hover:bg-[var(--color-surface)] hover:text-[var(--color-danger)]"
|
||||
title="Удалить"
|
||||
>
|
||||
✕
|
||||
|
|
@ -370,41 +372,41 @@ export const SmsCityProfilesPanel = () => {
|
|||
</div>
|
||||
|
||||
{/* Config grid */}
|
||||
<div className="grid gap-2 sm:grid-cols-2 text-xs">
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{/* Delivery */}
|
||||
<div className="rounded-lg bg-[var(--color-bg)] p-3 space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-[var(--color-text)]">📦 Доставка:</span>
|
||||
<div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-3 space-y-1.5">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs font-medium text-[var(--color-text)]">📦 Доставка</span>
|
||||
<ModeBadge mode={p.delivery_mode} />
|
||||
</div>
|
||||
{p.delivery_text && (
|
||||
<p className="text-[var(--color-text-muted)] italic">"{p.delivery_text}"</p>
|
||||
<p className="text-xs text-[var(--color-text-muted)] italic leading-snug">"{p.delivery_text}"</p>
|
||||
)}
|
||||
</div>
|
||||
{/* Pickup */}
|
||||
<div className="rounded-lg bg-[var(--color-bg)] p-3 space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-[var(--color-text)]">🏪 Самовывоз:</span>
|
||||
<div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-3 space-y-1.5">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs font-medium text-[var(--color-text)]">🏪 Самовывоз</span>
|
||||
<ModeBadge mode={p.pickup_mode} />
|
||||
</div>
|
||||
{p.pickup_text && (
|
||||
<p className="text-[var(--color-text-muted)] italic">"{p.pickup_text}"</p>
|
||||
<p className="text-xs text-[var(--color-text-muted)] italic leading-snug">"{p.pickup_text}"</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toggles */}
|
||||
<div className="flex items-center gap-4 text-xs">
|
||||
<span className={`font-medium ${p.second_sms_enabled ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)] line-through"}`}>
|
||||
{/* Toggles row */}
|
||||
<div className="flex flex-wrap items-center gap-4 pt-1 border-t border-[var(--color-border)]">
|
||||
<span className={`text-xs font-medium ${p.second_sms_enabled ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)]"}`}>
|
||||
2-я SMS: {p.second_sms_enabled ? "✅" : "❌"}
|
||||
</span>
|
||||
<span className={`font-medium ${p.paid_storage_enabled ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)] line-through"}`}>
|
||||
<span className={`text-xs font-medium ${p.paid_storage_enabled ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)]"}`}>
|
||||
Платное хранение: {p.paid_storage_enabled ? "✅" : "❌"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{p.note && (
|
||||
<p className="text-xs text-[var(--color-text-muted)]">💬 {p.note}</p>
|
||||
<p className="text-xs text-[var(--color-text-muted)] pt-1">💬 {p.note}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Reference in New Issue