fix: SMS city profiles — контраст цветов для светлой и тёмной темы
- Внешние карточки: --color-surface (полупрозрачный, виден на фоне) - Внутренние блоки: --color-surface-strong (непрозрачный, контраст) - Inputs/select: --color-base (отличается от карточек) - Option элементы: явный bg + color для тёмной темы - Светлая: карточки голубовато-зелёные, внутри — белые блоки - Тёмная: карточки чуть светлее фона, внутри — ещё светлее
This commit is contained in:
parent
1a60fe07e0
commit
69c261cc8f
|
|
@ -165,8 +165,8 @@ export const SmsCityProfilesPanel = () => {
|
|||
</div>
|
||||
);
|
||||
|
||||
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";
|
||||
const inputCls = "w-full rounded-lg border border-[var(--color-border)] bg-[var(--color-base)] 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-base)] p-4 space-y-3";
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
|
|
@ -213,7 +213,7 @@ export const SmsCityProfilesPanel = () => {
|
|||
className={`${inputCls} disabled:opacity-50`}
|
||||
>
|
||||
{CRIMEAN_CITIES.map((c) => (
|
||||
<option key={c} value={c}>{c}</option>
|
||||
<option key={c} value={c} style={{ backgroundColor: "var(--color-dropdown-surface)", color: "var(--color-text)" }}>{c}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -341,7 +341,7 @@ export const SmsCityProfilesPanel = () => {
|
|||
) : (
|
||||
<div className="space-y-3">
|
||||
{profiles.map((p) => (
|
||||
<div key={p.id} className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-strong)] p-4 space-y-3">
|
||||
<div key={p.id} className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-4 space-y-3">
|
||||
{/* Header row */}
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
|
|
@ -374,7 +374,7 @@ export const SmsCityProfilesPanel = () => {
|
|||
{/* Config grid */}
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{/* Delivery */}
|
||||
<div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-3 space-y-1.5">
|
||||
<div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-strong)] 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} />
|
||||
|
|
@ -384,7 +384,7 @@ export const SmsCityProfilesPanel = () => {
|
|||
)}
|
||||
</div>
|
||||
{/* Pickup */}
|
||||
<div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-3 space-y-1.5">
|
||||
<div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-strong)] 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} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue