revert(site-finder): rollback dark entry-landing skin to light
The ПТИЦА dark "operator terminal" skin was applied to the main
/site-finder map page in b3fd053 ("dark Site Finder"), but the
2026-06-21 rollback (#1865) only reverted the analysis route — the
entry-landing stayed dark.
Точечно откатывает 8 файлов entry-landing (page.tsx + 7 entry-компонентов)
до состояния b3fd053~1 и удаляет осиротевший site-finder.module.css.
НЕ трогает: PticaMapInner / ptica.module.css (используются и старым ptica,
и Site Finder v2 cockpit) — карта аналитики остаётся glyph-pin как была.
This commit is contained in:
parent
e16bad3ed6
commit
7cb008c551
8 changed files with 126 additions and 291 deletions
|
|
@ -19,7 +19,6 @@ import type {
|
|||
ParcelBboxItem,
|
||||
BboxCoords,
|
||||
} from "@/lib/site-finder-api";
|
||||
import styles from "./site-finder.module.css";
|
||||
|
||||
// EntryMap uses Leaflet — must load without SSR
|
||||
const EntryMap = dynamic(
|
||||
|
|
@ -32,13 +31,13 @@ const EntryMap = dynamic(
|
|||
style={{
|
||||
flex: 1,
|
||||
minHeight: 480,
|
||||
background: "rgba(9, 22, 31, 0.62)",
|
||||
border: "1px dashed rgba(150, 192, 214, 0.4)",
|
||||
background: "var(--bg-card-alt)",
|
||||
border: "1px dashed var(--border-strong)",
|
||||
borderRadius: 12,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-tertiary)",
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
|
|
@ -130,10 +129,9 @@ export default function SiteFinderPage() {
|
|||
|
||||
return (
|
||||
<main
|
||||
className={styles.sfRoot}
|
||||
data-theme="dark"
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
background: "var(--bg-app)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
|
|
@ -141,8 +139,8 @@ export default function SiteFinderPage() {
|
|||
{/* Header */}
|
||||
<header
|
||||
style={{
|
||||
background: "rgba(12, 30, 42, 0.94)",
|
||||
borderBottom: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card)",
|
||||
borderBottom: "1px solid var(--border-card)",
|
||||
padding: "12px 24px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
|
|
@ -154,20 +152,19 @@ export default function SiteFinderPage() {
|
|||
href="/"
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
← Главная
|
||||
</Link>
|
||||
<span style={{ color: "rgba(150, 192, 214, 0.4)" }}>·</span>
|
||||
<span style={{ color: "var(--border-soft)" }}>·</span>
|
||||
<h1
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: 16,
|
||||
fontWeight: 600,
|
||||
color: "#f2fafe",
|
||||
letterSpacing: "0.01em",
|
||||
color: "var(--fg-primary)",
|
||||
}}
|
||||
>
|
||||
SiteFinder · карта участков
|
||||
|
|
@ -177,7 +174,7 @@ export default function SiteFinderPage() {
|
|||
style={{
|
||||
marginLeft: "auto",
|
||||
fontSize: 13,
|
||||
color: "#7fd0ee",
|
||||
color: "var(--accent)",
|
||||
textDecoration: "none",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,132 +0,0 @@
|
|||
/*
|
||||
* SiteFinder entry page — ПТИЦА dark "operator terminal" skin (Track B).
|
||||
*
|
||||
* Every design token is scoped under `.sfRoot[data-theme="dark"]` (the page
|
||||
* wrapper carries BOTH the class and the attribute) so these dark vars NEVER
|
||||
* leak onto the global light theme of other pages (analytics etc.). This
|
||||
* mirrors how the ПТИЦА cockpit scopes its dark tokens under
|
||||
* `.pticaRoot[data-theme="dark"]`. The dark palette is the SAME cockpit palette
|
||||
* (#060f16 / #08131c surfaces, #dcebf2 text, #7fd0ee accent-cyan, token borders).
|
||||
*/
|
||||
|
||||
/* ===================== SCOPED TOKENS (dark) ===================== */
|
||||
.sfRoot[data-theme="dark"] {
|
||||
--sf-font-mono: "IBM Plex Mono", "Roboto Mono", ui-monospace, monospace;
|
||||
|
||||
/* accents */
|
||||
--sf-accent-cyan: #7fd0ee;
|
||||
--sf-accent-cyan-strong: #8ed3ff;
|
||||
--sf-accent-green: #38c172;
|
||||
--sf-accent-yellow: #e0a93b;
|
||||
--sf-accent-red: #d2655b;
|
||||
|
||||
/* dark surface palette */
|
||||
--sf-bg: #060f16;
|
||||
--sf-bg-2: #08131c;
|
||||
--sf-grid-line: rgba(120, 165, 190, 0.06);
|
||||
--sf-surface: rgba(11, 26, 36, 0.72);
|
||||
--sf-surface-2: rgba(9, 22, 31, 0.62);
|
||||
--sf-surface-strong: rgba(12, 30, 42, 0.94);
|
||||
--sf-surface-muted: rgba(26, 52, 67, 0.55);
|
||||
--sf-surface-inset: rgba(4, 12, 18, 0.6);
|
||||
|
||||
--sf-text: #dcebf2;
|
||||
--sf-text-strong: #f2fafe;
|
||||
--sf-text-muted: #8ba6b3;
|
||||
--sf-text-soft: #5f7886;
|
||||
|
||||
--sf-border: rgba(150, 192, 214, 0.18);
|
||||
--sf-border-strong: rgba(150, 192, 214, 0.4);
|
||||
--sf-border-faint: rgba(150, 192, 214, 0.1);
|
||||
|
||||
--sf-map-filter: saturate(0.7) contrast(1.12) brightness(0.7);
|
||||
--sf-glow: rgba(110, 200, 240, 0.28);
|
||||
--sf-glow-strong: rgba(110, 200, 240, 0.55);
|
||||
--sf-shadow: 0 18px 70px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* root paint — subtle grid + corner glow, same recipe as the cockpit */
|
||||
color: var(--sf-text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 31px, var(--sf-grid-line) 32px),
|
||||
linear-gradient(0deg, transparent 31px, var(--sf-grid-line) 32px),
|
||||
radial-gradient(circle at 82% -8%, var(--sf-glow), transparent 42%),
|
||||
var(--sf-bg);
|
||||
background-size:
|
||||
32px 32px,
|
||||
32px 32px,
|
||||
100% 100%,
|
||||
100% 100%;
|
||||
}
|
||||
|
||||
/* ===================== LEAFLET (dark map chrome) ===================== */
|
||||
.sfRoot :global(.leaflet-container) {
|
||||
background: var(--sf-bg-2);
|
||||
font-family: inherit;
|
||||
}
|
||||
/* dark base tiles → muted / contrast-bumped so markers stay readable */
|
||||
.sfRoot :global(.leaflet-tile-pane) {
|
||||
filter: var(--sf-map-filter);
|
||||
}
|
||||
/* glassy dark popups (match the cockpit chrome) */
|
||||
.sfRoot :global(.leaflet-popup-content-wrapper) {
|
||||
background: var(--sf-surface-strong);
|
||||
color: var(--sf-text);
|
||||
border: 1px solid var(--sf-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--sf-shadow);
|
||||
}
|
||||
.sfRoot :global(.leaflet-popup-tip) {
|
||||
background: var(--sf-surface-strong);
|
||||
}
|
||||
.sfRoot :global(.leaflet-popup-content) {
|
||||
margin: 10px 12px;
|
||||
}
|
||||
.sfRoot :global(.leaflet-container a.leaflet-popup-close-button) {
|
||||
color: var(--sf-text-muted);
|
||||
}
|
||||
/* dark tooltips */
|
||||
.sfRoot :global(.leaflet-tooltip) {
|
||||
background: var(--sf-surface-strong);
|
||||
color: var(--sf-text);
|
||||
border: 1px solid var(--sf-border);
|
||||
box-shadow: var(--sf-shadow);
|
||||
}
|
||||
.sfRoot :global(.leaflet-tooltip-top::before) {
|
||||
border-top-color: var(--sf-border);
|
||||
}
|
||||
.sfRoot :global(.leaflet-control-attribution) {
|
||||
background: rgba(8, 19, 28, 0.55);
|
||||
color: var(--sf-text-soft);
|
||||
font-size: 9px;
|
||||
padding: 1px 6px;
|
||||
opacity: 0.65;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.sfRoot :global(.leaflet-control-attribution a) {
|
||||
color: var(--sf-text-muted);
|
||||
}
|
||||
/* dark-styled zoom +/- control (prototype map controls) */
|
||||
.sfRoot :global(.leaflet-control-zoom) {
|
||||
border: 1px solid var(--sf-border-strong);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 12px var(--sf-glow);
|
||||
}
|
||||
.sfRoot :global(.leaflet-control-zoom a) {
|
||||
background: var(--sf-surface-strong);
|
||||
color: var(--sf-text);
|
||||
border-bottom: 1px solid var(--sf-border);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.sfRoot :global(.leaflet-control-zoom a:hover) {
|
||||
background: var(--sf-surface-muted);
|
||||
color: var(--sf-accent-cyan);
|
||||
}
|
||||
.sfRoot :global(.leaflet-control-zoom a.leaflet-disabled) {
|
||||
background: var(--sf-surface-strong);
|
||||
color: var(--sf-text-soft);
|
||||
}
|
||||
|
|
@ -30,15 +30,7 @@ export function CadInput({ onSubmit, loading }: Props) {
|
|||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
style={{
|
||||
background: "rgba(11, 26, 36, 0.72)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
borderRadius: 12,
|
||||
padding: "14px 16px",
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label
|
||||
htmlFor="cad-input"
|
||||
style={{
|
||||
|
|
@ -46,7 +38,6 @@ export function CadInput({ onSubmit, loading }: Props) {
|
|||
fontWeight: 600,
|
||||
marginBottom: 6,
|
||||
fontSize: 14,
|
||||
color: "#f2fafe",
|
||||
}}
|
||||
>
|
||||
Кадастровый номер
|
||||
|
|
@ -63,17 +54,14 @@ export function CadInput({ onSubmit, loading }: Props) {
|
|||
placeholder="66:41:0204016:10"
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
padding: "8px 12px",
|
||||
fontSize: 14,
|
||||
background: "rgba(4, 12, 18, 0.6)",
|
||||
color: "#dcebf2",
|
||||
border: error
|
||||
? "1px solid #d2655b"
|
||||
: "1px solid rgba(150, 192, 214, 0.4)",
|
||||
? "1px solid var(--danger, #B3261E)"
|
||||
: "1px solid var(--border-strong, #D1D5DB)",
|
||||
borderRadius: 8,
|
||||
outline: "none",
|
||||
fontFamily: "'IBM Plex Mono', 'Roboto Mono', ui-monospace, monospace",
|
||||
fontFamily: "monospace",
|
||||
}}
|
||||
disabled={loading}
|
||||
/>
|
||||
|
|
@ -85,12 +73,10 @@ export function CadInput({ onSubmit, loading }: Props) {
|
|||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
background: loading
|
||||
? "rgba(26, 52, 67, 0.55)"
|
||||
: "rgba(127, 208, 238, 0.16)",
|
||||
color: loading ? "#5f7886" : "#8ed3ff",
|
||||
border: loading
|
||||
? "1px solid rgba(150, 192, 214, 0.18)"
|
||||
: "1px solid rgba(127, 208, 238, 0.55)",
|
||||
? "var(--fg-tertiary, #73767E)"
|
||||
: "var(--accent, #1D4ED8)",
|
||||
color: "var(--fg-on-dark, #E2E8F0)",
|
||||
border: "none",
|
||||
borderRadius: 8,
|
||||
cursor: loading ? "default" : "pointer",
|
||||
whiteSpace: "nowrap",
|
||||
|
|
@ -104,7 +90,7 @@ export function CadInput({ onSubmit, loading }: Props) {
|
|||
style={{
|
||||
marginTop: 8,
|
||||
fontSize: 12,
|
||||
color: "#d2655b",
|
||||
color: "var(--danger, #B3261E)",
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
|
|
@ -114,7 +100,7 @@ export function CadInput({ onSubmit, loading }: Props) {
|
|||
style={{
|
||||
marginTop: 4,
|
||||
fontSize: 11,
|
||||
color: "#5f7886",
|
||||
color: "var(--fg-tertiary, #73767E)",
|
||||
}}
|
||||
>
|
||||
Примеры: <code>66:41:0204016:10</code> (участок) ·{" "}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import {
|
|||
CircleMarker,
|
||||
Tooltip,
|
||||
Popup,
|
||||
AttributionControl,
|
||||
useMapEvents,
|
||||
} from "react-leaflet";
|
||||
import type { Map as LeafletMap } from "leaflet";
|
||||
|
|
@ -85,7 +84,7 @@ function ParcelMarkers({
|
|||
return (
|
||||
<>
|
||||
{parcels.map((parcel) => {
|
||||
const color = STATUS_COLORS[parcel.status] ?? "#8ba6b3";
|
||||
const color = STATUS_COLORS[parcel.status] ?? "#73767E";
|
||||
const statusLabel = STATUS_LABELS[parcel.status] ?? parcel.status;
|
||||
const isSelected = parcel.cad_num === selectedCad;
|
||||
return (
|
||||
|
|
@ -94,26 +93,22 @@ function ParcelMarkers({
|
|||
center={[parcel.lat, parcel.lon]}
|
||||
radius={isSelected ? 10 : 7}
|
||||
pathOptions={{
|
||||
// Selected → bright cyan ring so it pops on the dark base; others
|
||||
// get a soft dark halo for separation from the tiles.
|
||||
color: isSelected ? "#8ed3ff" : "rgba(6, 15, 22, 0.85)",
|
||||
color: isSelected ? "#0F172A" : color,
|
||||
fillColor: color,
|
||||
fillOpacity: 0.9,
|
||||
weight: isSelected ? 3 : 1.5,
|
||||
fillOpacity: 0.85,
|
||||
weight: isSelected ? 2.5 : 1.5,
|
||||
}}
|
||||
// Leaflet renders interactive vector markers with a pointer cursor
|
||||
// and keeps them keyboard-focusable; click opens the Popup below.
|
||||
>
|
||||
{/* Hover hint — quick identity without committing to the analyze POST */}
|
||||
<Tooltip direction="top" offset={[0, -8]} opacity={1}>
|
||||
<div style={{ fontSize: 12, color: "#dcebf2" }}>
|
||||
<div style={{ fontWeight: 600, color: "#f2fafe" }}>
|
||||
{parcel.cad_num}
|
||||
</div>
|
||||
<div style={{ color: "#8ba6b3" }}>
|
||||
<Tooltip direction="top" offset={[0, -8]} opacity={0.95}>
|
||||
<div style={{ fontSize: 12 }}>
|
||||
<div style={{ fontWeight: 600 }}>{parcel.cad_num}</div>
|
||||
<div style={{ color: "var(--fg-secondary)" }}>
|
||||
{parcel.area_ha != null ? parcel.area_ha.toFixed(2) : "—"} га · {statusLabel}
|
||||
</div>
|
||||
<div style={{ color: "#5f7886", marginTop: 2 }}>
|
||||
<div style={{ color: "var(--fg-tertiary)", marginTop: 2 }}>
|
||||
Нажмите, чтобы открыть анализ
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -125,13 +120,15 @@ function ParcelMarkers({
|
|||
<div
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
color: "#f2fafe",
|
||||
color: "var(--fg-primary)",
|
||||
fontVariantNumeric: "tabular-nums",
|
||||
}}
|
||||
>
|
||||
{parcel.cad_num}
|
||||
</div>
|
||||
<div style={{ color: "#8ba6b3", marginBottom: 8 }}>
|
||||
<div
|
||||
style={{ color: "var(--fg-secondary)", marginBottom: 8 }}
|
||||
>
|
||||
{parcel.area_ha != null ? parcel.area_ha.toFixed(2) : "—"} га · {statusLabel}
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -144,9 +141,9 @@ function ParcelMarkers({
|
|||
justifyContent: "center",
|
||||
gap: 6,
|
||||
width: "100%",
|
||||
background: "rgba(127, 208, 238, 0.16)",
|
||||
color: "#8ed3ff",
|
||||
border: "1px solid rgba(127, 208, 238, 0.55)",
|
||||
background: "var(--accent)",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: 6,
|
||||
padding: "6px 12px",
|
||||
fontSize: 13,
|
||||
|
|
@ -165,7 +162,7 @@ function ParcelMarkers({
|
|||
width: "100%",
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
padding: "6px 12px 0",
|
||||
fontSize: 12,
|
||||
cursor: "pointer",
|
||||
|
|
@ -229,19 +226,13 @@ export function EntryMap({
|
|||
zoom={DEFAULT_ZOOM}
|
||||
style={{ width: "100%", height: "100%", borderRadius: 12 }}
|
||||
ref={mapRef}
|
||||
// Drop Leaflet's built-in attribution control (it carries the "Leaflet"
|
||||
// flag prefix). We add our own below with prefix={false} so only the data
|
||||
// credit shows — no Leaflet branding.
|
||||
attributionControl={false}
|
||||
// Click on map backdrop deselects parcel
|
||||
// handled via eventHandlers on markers + backdrop div
|
||||
>
|
||||
<TileLayer
|
||||
attribution="© OpenStreetMap · © CARTO"
|
||||
url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
|
||||
subdomains="abcd"
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<AttributionControl prefix={false} position="bottomright" />
|
||||
<BboxListener onBboxChange={handleBboxChange} />
|
||||
{parcels && parcels.length > 0 && (
|
||||
<ParcelMarkers
|
||||
|
|
@ -276,13 +267,12 @@ export function EntryMap({
|
|||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
zIndex: 1000,
|
||||
background: "rgba(12, 30, 42, 0.94)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 20,
|
||||
padding: "4px 14px",
|
||||
fontSize: 12,
|
||||
color: "#8ba6b3",
|
||||
boxShadow: "0 0 12px rgba(110, 200, 240, 0.28)",
|
||||
color: "var(--fg-secondary)",
|
||||
}}
|
||||
>
|
||||
Загрузка участков...
|
||||
|
|
@ -298,14 +288,13 @@ export function EntryMap({
|
|||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
zIndex: 1000,
|
||||
background: "rgba(12, 30, 42, 0.94)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 12,
|
||||
padding: "16px 24px",
|
||||
fontSize: 13,
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
textAlign: "center",
|
||||
boxShadow: "0 18px 70px rgba(0, 0, 0, 0.5)",
|
||||
}}
|
||||
>
|
||||
Нет участков в текущем виде. Измените фильтры или область карты.
|
||||
|
|
|
|||
|
|
@ -32,16 +32,14 @@ function Chip({ label, selected, onClick, disabled, title }: ChipProps) {
|
|||
padding: "4px 12px",
|
||||
borderRadius: 999,
|
||||
border: selected
|
||||
? "1px solid rgba(127, 208, 238, 0.55)"
|
||||
: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: selected
|
||||
? "rgba(127, 208, 238, 0.16)"
|
||||
: "rgba(9, 22, 31, 0.62)",
|
||||
color: selected ? "#8ed3ff" : "#8ba6b3",
|
||||
? "1px solid var(--accent)"
|
||||
: "1px solid var(--border-card)",
|
||||
background: selected ? "var(--accent-soft)" : "var(--bg-card)",
|
||||
color: selected ? "var(--accent)" : "var(--fg-secondary)",
|
||||
fontSize: 12,
|
||||
fontWeight: selected ? 500 : 400,
|
||||
cursor: disabled ? "not-allowed" : "pointer",
|
||||
opacity: disabled ? 0.4 : 1,
|
||||
opacity: disabled ? 0.45 : 1,
|
||||
whiteSpace: "nowrap",
|
||||
transition: "background 0.12s, color 0.12s, border-color 0.12s",
|
||||
}}
|
||||
|
|
@ -132,8 +130,8 @@ export function MapFilterBar({
|
|||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(12, 30, 42, 0.94)",
|
||||
borderBottom: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card)",
|
||||
borderBottom: "1px solid var(--border-card)",
|
||||
padding: "8px 16px",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
|
|
@ -145,7 +143,7 @@ export function MapFilterBar({
|
|||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
marginRight: 4,
|
||||
flexShrink: 0,
|
||||
fontVariantNumeric: "tabular-nums",
|
||||
|
|
@ -177,7 +175,7 @@ export function MapFilterBar({
|
|||
style={{
|
||||
width: 1,
|
||||
height: 20,
|
||||
background: "rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--border-soft)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
|
|
@ -199,7 +197,7 @@ export function MapFilterBar({
|
|||
style={{
|
||||
width: 1,
|
||||
height: 20,
|
||||
background: "rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--border-soft)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
|
|
@ -225,7 +223,7 @@ export function MapFilterBar({
|
|||
style={{
|
||||
width: 1,
|
||||
height: 20,
|
||||
background: "rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--border-soft)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
|
|
@ -248,18 +246,18 @@ export function MapFilterBar({
|
|||
borderRadius: 999,
|
||||
border:
|
||||
DISTRICT_VRI_FILTERS_AVAILABLE && filters.district
|
||||
? "1px solid rgba(127, 208, 238, 0.55)"
|
||||
: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
? "1px solid var(--accent)"
|
||||
: "1px solid var(--border-card)",
|
||||
background:
|
||||
DISTRICT_VRI_FILTERS_AVAILABLE && filters.district
|
||||
? "rgba(127, 208, 238, 0.16)"
|
||||
: "rgba(9, 22, 31, 0.62)",
|
||||
? "var(--accent-soft)"
|
||||
: "var(--bg-card)",
|
||||
color:
|
||||
DISTRICT_VRI_FILTERS_AVAILABLE && filters.district
|
||||
? "#8ed3ff"
|
||||
: "#8ba6b3",
|
||||
? "var(--accent)"
|
||||
: "var(--fg-secondary)",
|
||||
cursor: DISTRICT_VRI_FILTERS_AVAILABLE ? "pointer" : "not-allowed",
|
||||
opacity: DISTRICT_VRI_FILTERS_AVAILABLE ? 1 : 0.4,
|
||||
opacity: DISTRICT_VRI_FILTERS_AVAILABLE ? 1 : 0.45,
|
||||
}}
|
||||
>
|
||||
<option value="">Все районы</option>
|
||||
|
|
@ -276,7 +274,7 @@ export function MapFilterBar({
|
|||
onClick={clearAll}
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "#d2655b",
|
||||
color: "var(--danger)",
|
||||
background: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const VRI_LABELS: Record<string, string> = {
|
|||
export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
||||
if (!parcel) return null;
|
||||
|
||||
const statusColor = STATUS_COLORS[parcel.status] ?? "#8ba6b3";
|
||||
const statusColor = STATUS_COLORS[parcel.status] ?? "#73767E";
|
||||
const statusLabel = STATUS_LABELS[parcel.status] ?? parcel.status;
|
||||
|
||||
return (
|
||||
|
|
@ -37,13 +37,13 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
bottom: 16,
|
||||
width: 360,
|
||||
zIndex: 20,
|
||||
background: "rgba(12, 30, 42, 0.94)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card)",
|
||||
borderLeft: "1px solid var(--border-card)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 12,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
boxShadow: "0 18px 70px rgba(0, 0, 0, 0.5)",
|
||||
backdropFilter: "blur(6px)",
|
||||
boxShadow: "-4px 0 24px rgba(0,0,0,0.10)",
|
||||
}}
|
||||
role="dialog"
|
||||
aria-label="Карточка участка"
|
||||
|
|
@ -52,7 +52,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
<div
|
||||
style={{
|
||||
padding: "16px 20px 12px",
|
||||
borderBottom: "1px solid rgba(150, 192, 214, 0.1)",
|
||||
borderBottom: "1px solid var(--border-soft)",
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
gap: 8,
|
||||
|
|
@ -62,7 +62,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
size={16}
|
||||
strokeWidth={1.5}
|
||||
style={{
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
marginTop: 2,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
|
|
@ -74,7 +74,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
fontWeight: 500,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.04em",
|
||||
color: "#5f7886",
|
||||
color: "var(--fg-tertiary)",
|
||||
fontVariantNumeric: "tabular-nums",
|
||||
}}
|
||||
>
|
||||
|
|
@ -83,7 +83,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
<div
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
marginTop: 2,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
|
|
@ -101,7 +101,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
border: "none",
|
||||
cursor: "pointer",
|
||||
padding: 4,
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-tertiary)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
|
|
@ -121,8 +121,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
{/* Status */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(4, 12, 18, 0.6)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card-alt)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 8,
|
||||
padding: "10px 12px",
|
||||
}}
|
||||
|
|
@ -133,7 +133,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
fontWeight: 500,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.04em",
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
marginBottom: 4,
|
||||
}}
|
||||
>
|
||||
|
|
@ -159,7 +159,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
style={{
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
color: "#dcebf2",
|
||||
color: "var(--fg-primary)",
|
||||
}}
|
||||
>
|
||||
{statusLabel}
|
||||
|
|
@ -170,8 +170,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
{/* Area */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(4, 12, 18, 0.6)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card-alt)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 8,
|
||||
padding: "10px 12px",
|
||||
}}
|
||||
|
|
@ -182,7 +182,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
fontWeight: 500,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.04em",
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
marginBottom: 4,
|
||||
}}
|
||||
>
|
||||
|
|
@ -192,7 +192,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
style={{
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
color: "#dcebf2",
|
||||
color: "var(--fg-primary)",
|
||||
fontVariantNumeric: "tabular-nums",
|
||||
}}
|
||||
>
|
||||
|
|
@ -201,7 +201,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
style={{
|
||||
fontSize: 13,
|
||||
fontWeight: 400,
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
}}
|
||||
>
|
||||
га
|
||||
|
|
@ -212,8 +212,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
{/* District */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(4, 12, 18, 0.6)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card-alt)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 8,
|
||||
padding: "10px 12px",
|
||||
}}
|
||||
|
|
@ -224,7 +224,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
fontWeight: 500,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.04em",
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
marginBottom: 4,
|
||||
}}
|
||||
>
|
||||
|
|
@ -234,7 +234,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
style={{
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
color: "#dcebf2",
|
||||
color: "var(--fg-primary)",
|
||||
}}
|
||||
>
|
||||
{parcel.district}
|
||||
|
|
@ -244,8 +244,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
{/* VRI */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(4, 12, 18, 0.6)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card-alt)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 8,
|
||||
padding: "10px 12px",
|
||||
}}
|
||||
|
|
@ -256,7 +256,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
fontWeight: 500,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.04em",
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
marginBottom: 4,
|
||||
}}
|
||||
>
|
||||
|
|
@ -266,7 +266,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
style={{
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
color: "#dcebf2",
|
||||
color: "var(--fg-primary)",
|
||||
}}
|
||||
>
|
||||
{VRI_LABELS[parcel.vri] ?? parcel.vri}
|
||||
|
|
@ -276,8 +276,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
{/* Coords */}
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(4, 12, 18, 0.6)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card-alt)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 8,
|
||||
padding: "10px 12px",
|
||||
gridColumn: "1 / -1",
|
||||
|
|
@ -289,7 +289,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
fontWeight: 500,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.04em",
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
marginBottom: 4,
|
||||
}}
|
||||
>
|
||||
|
|
@ -298,7 +298,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
fontVariantNumeric: "tabular-nums",
|
||||
}}
|
||||
>
|
||||
|
|
@ -314,7 +314,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
<div
|
||||
style={{
|
||||
padding: "16px 20px",
|
||||
borderTop: "1px solid rgba(150, 192, 214, 0.1)",
|
||||
borderTop: "1px solid var(--border-soft)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 8,
|
||||
|
|
@ -337,9 +337,8 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
background: "rgba(127, 208, 238, 0.16)",
|
||||
color: "#8ed3ff",
|
||||
border: "1px solid rgba(127, 208, 238, 0.55)",
|
||||
background: "var(--accent)",
|
||||
color: "#fff",
|
||||
borderRadius: 8,
|
||||
padding: "10px 20px",
|
||||
fontSize: 14,
|
||||
|
|
@ -360,7 +359,7 @@ export function ParcelDrawer({ parcel, onClose }: ParcelDrawerProps) {
|
|||
justifyContent: "center",
|
||||
gap: 8,
|
||||
background: "none",
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
borderRadius: 8,
|
||||
padding: "8px 20px",
|
||||
fontSize: 13,
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
"use client";
|
||||
|
||||
// Status color constants — kept in sync with EntryMap marker colours.
|
||||
// ПТИЦА cockpit palette (dark map): green = свободный, amber = в работе,
|
||||
// cyan = избранный — semantics preserved, tuned to read on the dark base.
|
||||
// Status color constants — kept in sync with EntryMap marker colours
|
||||
export const STATUS_COLORS: Record<string, string> = {
|
||||
free: "#38c172",
|
||||
in_progress: "#e0a93b",
|
||||
favorite: "#7fd0ee",
|
||||
free: "#0A7A3A",
|
||||
in_progress: "#9A6700",
|
||||
favorite: "#1D4ED8",
|
||||
};
|
||||
|
||||
export const STATUS_LABELS: Record<string, string> = {
|
||||
|
|
@ -23,8 +21,8 @@ export function ParcelLegend() {
|
|||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(11, 26, 36, 0.72)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 8,
|
||||
padding: "8px 12px",
|
||||
display: "flex",
|
||||
|
|
@ -39,7 +37,7 @@ export function ParcelLegend() {
|
|||
fontWeight: 500,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.04em",
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
}}
|
||||
>
|
||||
Статус участка
|
||||
|
|
@ -59,7 +57,7 @@ export function ParcelLegend() {
|
|||
display: "inline-block",
|
||||
}}
|
||||
/>
|
||||
<span style={{ fontSize: 12, color: "#dcebf2" }}>
|
||||
<span style={{ fontSize: 12, color: "var(--fg-primary)" }}>
|
||||
{STATUS_LABELS[status]}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ export function RecentParcels() {
|
|||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(11, 26, 36, 0.72)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 12,
|
||||
padding: "12px 16px",
|
||||
}}
|
||||
|
|
@ -34,7 +34,7 @@ export function RecentParcels() {
|
|||
<div
|
||||
style={{
|
||||
height: 14,
|
||||
background: "rgba(26, 52, 67, 0.55)",
|
||||
background: "var(--bg-card-alt)",
|
||||
borderRadius: 4,
|
||||
marginBottom: 12,
|
||||
width: 120,
|
||||
|
|
@ -45,7 +45,7 @@ export function RecentParcels() {
|
|||
key={i}
|
||||
style={{
|
||||
height: 40,
|
||||
background: "rgba(26, 52, 67, 0.55)",
|
||||
background: "var(--bg-card-alt)",
|
||||
borderRadius: 6,
|
||||
marginBottom: 6,
|
||||
}}
|
||||
|
|
@ -61,8 +61,8 @@ export function RecentParcels() {
|
|||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(11, 26, 36, 0.72)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 12,
|
||||
padding: "12px 16px",
|
||||
}}
|
||||
|
|
@ -78,7 +78,7 @@ export function RecentParcels() {
|
|||
<Clock
|
||||
size={14}
|
||||
strokeWidth={1.5}
|
||||
style={{ color: "#8ba6b3" }}
|
||||
style={{ color: "var(--fg-secondary)" }}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
|
|
@ -86,7 +86,7 @@ export function RecentParcels() {
|
|||
fontWeight: 500,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.04em",
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
}}
|
||||
>
|
||||
Недавние участки
|
||||
|
|
@ -95,7 +95,7 @@ export function RecentParcels() {
|
|||
<p
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "#5f7886",
|
||||
color: "var(--fg-tertiary)",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
|
|
@ -108,8 +108,8 @@ export function RecentParcels() {
|
|||
return (
|
||||
<div
|
||||
style={{
|
||||
background: "rgba(11, 26, 36, 0.72)",
|
||||
border: "1px solid rgba(150, 192, 214, 0.18)",
|
||||
background: "var(--bg-card)",
|
||||
border: "1px solid var(--border-card)",
|
||||
borderRadius: 12,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
|
|
@ -118,7 +118,7 @@ export function RecentParcels() {
|
|||
<div
|
||||
style={{
|
||||
padding: "10px 14px 8px",
|
||||
borderBottom: "1px solid rgba(150, 192, 214, 0.1)",
|
||||
borderBottom: "1px solid var(--border-soft)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
|
|
@ -127,7 +127,7 @@ export function RecentParcels() {
|
|||
<Clock
|
||||
size={14}
|
||||
strokeWidth={1.5}
|
||||
style={{ color: "#8ba6b3" }}
|
||||
style={{ color: "var(--fg-secondary)" }}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
|
|
@ -135,7 +135,7 @@ export function RecentParcels() {
|
|||
fontWeight: 500,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.04em",
|
||||
color: "#8ba6b3",
|
||||
color: "var(--fg-secondary)",
|
||||
}}
|
||||
>
|
||||
Недавние участки
|
||||
|
|
@ -156,13 +156,13 @@ export function RecentParcels() {
|
|||
textDecoration: "none",
|
||||
borderBottom:
|
||||
idx < shown.length - 1
|
||||
? "1px solid rgba(150, 192, 214, 0.1)"
|
||||
? "1px solid var(--border-soft)"
|
||||
: "none",
|
||||
transition: "background 0.1s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.background =
|
||||
"rgba(26, 52, 67, 0.55)";
|
||||
"var(--bg-card-alt)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.background = "transparent";
|
||||
|
|
@ -172,7 +172,7 @@ export function RecentParcels() {
|
|||
size={14}
|
||||
strokeWidth={1.5}
|
||||
style={{
|
||||
color: "#5f7886",
|
||||
color: "var(--fg-tertiary)",
|
||||
marginTop: 2,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
|
|
@ -182,7 +182,7 @@ export function RecentParcels() {
|
|||
style={{
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
color: "#dcebf2",
|
||||
color: "var(--fg-primary)",
|
||||
fontVariantNumeric: "tabular-nums",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
|
|
@ -194,7 +194,7 @@ export function RecentParcels() {
|
|||
<div
|
||||
style={{
|
||||
fontSize: 11,
|
||||
color: "#5f7886",
|
||||
color: "var(--fg-tertiary)",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue