fix: SMS city profiles — контраст цветов для светлой и тёмной темы

- Внешние карточки: --color-surface (полупрозрачный, виден на фоне)
- Внутренние блоки: --color-surface-strong (непрозрачный, контраст)
- Inputs/select: --color-base (отличается от карточек)
- Option элементы: явный bg + color для тёмной темы
- Светлая: карточки голубовато-зелёные, внутри — белые блоки
- Тёмная: карточки чуть светлее фона, внутри — ещё светлее
This commit is contained in:
root 2026-07-22 08:41:48 +00:00
parent 1a60fe07e0
commit 69c261cc8f
1 changed files with 6 additions and 6 deletions

View File

@ -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} />