From 6cee3cfa8c4d98fbc77f1aca231d7aa1e09684d5 Mon Sep 17 00:00:00 2001
From: Matthew Kalinin <matthew44@mappable.world>
Date: Mon, 3 Jun 2024 14:09:12 +0300
Subject: [PATCH] dark theme

---
 .../MMapWaypointInput/index.css               | 35 ++++++++++-
 .../MMapWaypointInput/index.ts                | 63 +++++++++++--------
 .../icons/indicators/empty-indicator.svg      |  2 +-
 ...ocus-indicator.svg => focus-indicator.svg} |  2 +-
 .../indicators/from-setted-indicator.svg      |  1 -
 .../icons/indicators/setted-indicator.svg     |  1 +
 .../icons/indicators/to-focus-indicator.svg   |  1 -
 .../icons/indicators/to-setted-indicator.svg  |  1 -
 .../icons/loading-spinner.svg                 |  2 +-
 .../MMapRouteControl/icons/reset-button.svg   |  2 +-
 src/controls/MMapRouteControl/index.css       | 48 ++++++++++++++
 src/controls/MMapRouteControl/index.ts        |  8 +++
 12 files changed, 132 insertions(+), 34 deletions(-)
 rename src/controls/MMapRouteControl/icons/indicators/{from-focus-indicator.svg => focus-indicator.svg} (65%)
 delete mode 100644 src/controls/MMapRouteControl/icons/indicators/from-setted-indicator.svg
 create mode 100644 src/controls/MMapRouteControl/icons/indicators/setted-indicator.svg
 delete mode 100644 src/controls/MMapRouteControl/icons/indicators/to-focus-indicator.svg
 delete mode 100644 src/controls/MMapRouteControl/icons/indicators/to-setted-indicator.svg

diff --git a/src/controls/MMapRouteControl/MMapWaypointInput/index.css b/src/controls/MMapRouteControl/MMapWaypointInput/index.css
index 476dc26..170e20d 100644
--- a/src/controls/MMapRouteControl/MMapWaypointInput/index.css
+++ b/src/controls/MMapRouteControl/MMapWaypointInput/index.css
@@ -28,6 +28,10 @@
         justify-content: center;
         align-items: center;
         margin-right: 12px;
+
+        &._empty {
+            color: #c8c9cc !important;
+        }
     }
     .mappable--route-control_waypoint-input__field {
         box-sizing: border-box;
@@ -37,7 +41,7 @@
         border-radius: 8px;
         background: rgba(92, 94, 102, 0.06);
         flex-grow: 1;
-        color: var(--text-text-primary, #050d33);
+        color: #050d33;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -100,13 +104,42 @@
         align-items: center;
         position: absolute;
         transform: translate(-36px, -50%);
+        border-radius: 8px;
         background: none;
         outline: none;
         border: none;
         cursor: pointer;
+        color: #7b7d85;
 
         &:hover {
             background: rgba(18, 45, 178, 0.04);
         }
     }
 }
+
+/* dark theme styles */
+.mappable--route-control_waypoint-input._dark-input {
+    .mappable--route-control_waypoint-input__field {
+        background: rgba(250, 251, 255, 0.039);
+        color: #f2f5fa;
+        &:focus {
+            border: 1px solid #7d90f0;
+        }
+    }
+    .mappable--route-control_waypoint-input__indicator._empty {
+        color: #46464d !important;
+    }
+    .mappable--route-control_waypoint-input__field-buttons__location {
+        color: #7d90f0;
+        &:hover {
+            background: rgba(125, 144, 240, 0.071);
+            color: #aebbff;
+        }
+    }
+    .mappable--route-control_waypoint-input__field-buttons__reset {
+        color: #939499;
+        &:hover {
+            background: rgba(125, 144, 240, 0.071);
+        }
+    }
+}
diff --git a/src/controls/MMapRouteControl/MMapWaypointInput/index.ts b/src/controls/MMapRouteControl/MMapWaypointInput/index.ts
index f8d6e89..5d52dab 100644
--- a/src/controls/MMapRouteControl/MMapWaypointInput/index.ts
+++ b/src/controls/MMapRouteControl/MMapWaypointInput/index.ts
@@ -12,22 +12,15 @@ import debounce from 'lodash/debounce';
 import {CustomSearch, CustomSuggest, SearchParams} from '../../MMapSearchControl';
 import {MMapSuggest} from '../../MMapSearchControl/MMapSuggest';
 import emptyIndicatorSVG from '../icons/indicators/empty-indicator.svg';
-import fromFocusIndicator from '../icons/indicators/from-focus-indicator.svg';
-import fromSettedIndicator from '../icons/indicators/from-setted-indicator.svg';
-import toFocusIndicator from '../icons/indicators/to-focus-indicator.svg';
-import toSettedIndicator from '../icons/indicators/to-setted-indicator.svg';
+import focusIndicatorSVG from '../icons/indicators/focus-indicator.svg';
+import settedIndicatorSVG from '../icons/indicators/setted-indicator.svg';
 import locationSVG from '../icons/location-button.svg';
 import resetSVG from '../icons/reset-button.svg';
 import './index.css';
 
-const focusIndicator = {
-    from: fromFocusIndicator,
-    to: toFocusIndicator
-};
-
-const settedIndicator = {
-    from: fromSettedIndicator,
-    to: toSettedIndicator
+const INDICATOR_COLORS = {
+    light: {from: '#2E4CE5', to: '#313133'},
+    dark: {from: '#D6FD63', to: '#C8D2E6'}
 };
 
 export type SelectWaypointArgs = {
@@ -76,7 +69,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
 
         this._indicator = document.createElement('mappable');
         this._indicator.classList.add('mappable--route-control_waypoint-input__indicator');
-        this._indicator.insertAdjacentHTML('afterbegin', emptyIndicatorSVG);
+        this._updateIndicatorStatus('empty');
         form.appendChild(this._indicator);
 
         this._inputEl = document.createElement('input');
@@ -138,6 +131,15 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
             },
             {immediate: true}
         );
+        this._watchContext(
+            mappable.ThemeContext,
+            () => {
+                const {theme} = this._consumeContext(mappable.ThemeContext);
+                this._indicator.style.color = INDICATOR_COLORS[theme][this._props.type];
+                this._rootElement.classList.toggle('_dark-input', theme === 'dark');
+            },
+            {immediate: true}
+        );
 
         if (this._props.waypoint !== undefined && this._props.waypoint !== null) {
             this._search({text: this._props.waypoint.toString()}, this._props.waypoint);
@@ -160,12 +162,26 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
         this._detachDom = undefined;
     }
 
-    private _resetInput() {
-        this._inputEl.value = '';
-
+    private _updateIndicatorStatus(status: 'empty' | 'focus' | 'setted'): void {
         this._indicator.innerHTML = '';
-        this._indicator.insertAdjacentHTML('afterbegin', emptyIndicatorSVG);
+        this._indicator.classList.toggle('_empty', status === 'empty');
 
+        switch (status) {
+            case 'empty':
+                this._indicator.insertAdjacentHTML('afterbegin', emptyIndicatorSVG);
+                break;
+            case 'focus':
+                this._indicator.insertAdjacentHTML('afterbegin', focusIndicatorSVG);
+                break;
+            case 'setted':
+                this._indicator.insertAdjacentHTML('afterbegin', settedIndicatorSVG);
+                break;
+        }
+    }
+
+    private _resetInput() {
+        this._inputEl.value = '';
+        this._updateIndicatorStatus('empty');
         this._props.onSelectWaypoint(null);
     }
 
@@ -176,8 +192,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
 
     private _onFocusInput = (_event: FocusEvent) => {
         this.addChild(this._suggestComponent);
-        this._indicator.innerHTML = '';
-        this._indicator.insertAdjacentHTML('afterbegin', focusIndicator[this._props.type]);
+        this._updateIndicatorStatus('focus');
     };
 
     private _onBlurInput = (event: FocusEvent) => {
@@ -196,8 +211,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
             this._resetInput();
             return;
         }
-        this._indicator.innerHTML = '';
-        this._indicator.insertAdjacentHTML('afterbegin', emptyIndicatorSVG);
+        this._updateIndicatorStatus('empty');
     };
 
     private _submitWaypointInput = (event?: SubmitEvent) => {
@@ -236,9 +250,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
             properties: {name: text, description: text},
             geometry: {type: 'Point', coordinates: position.coords}
         };
-
-        this._indicator.innerHTML = '';
-        this._indicator.insertAdjacentHTML('afterbegin', settedIndicator[this._props.type]);
+        this._updateIndicatorStatus('setted');
         this._props.onSelectWaypoint({feature});
     }
 
@@ -249,8 +261,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity<MMapWaypointIn
             this._inputEl.value = feature.properties.name;
             feature.geometry.coordinates = reverseGeocodingCoordinate;
         }
-        this._indicator.innerHTML = '';
-        this._indicator.insertAdjacentHTML('afterbegin', settedIndicator[this._props.type]);
+        this._updateIndicatorStatus('setted');
         this._props.onSelectWaypoint({feature});
     }
 
diff --git a/src/controls/MMapRouteControl/icons/indicators/empty-indicator.svg b/src/controls/MMapRouteControl/icons/indicators/empty-indicator.svg
index 7c60d5b..5623951 100644
--- a/src/controls/MMapRouteControl/icons/indicators/empty-indicator.svg
+++ b/src/controls/MMapRouteControl/icons/indicators/empty-indicator.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><circle cx="10" cy="10" r="4" fill="#C8C9CC"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><circle cx="10" cy="10" r="4" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/controls/MMapRouteControl/icons/indicators/from-focus-indicator.svg b/src/controls/MMapRouteControl/icons/indicators/focus-indicator.svg
similarity index 65%
rename from src/controls/MMapRouteControl/icons/indicators/from-focus-indicator.svg
rename to src/controls/MMapRouteControl/icons/indicators/focus-indicator.svg
index 0f8f16d..eb4983e 100644
--- a/src/controls/MMapRouteControl/icons/indicators/from-focus-indicator.svg
+++ b/src/controls/MMapRouteControl/icons/indicators/focus-indicator.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><circle cx="10" cy="10" r="8" fill="#5C5E66" fill-opacity=".1"/><circle cx="10" cy="10" r="4" fill="#2E4CE5"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><circle cx="10" cy="10" r="8" fill="#5C5E66" fill-opacity=".1"/><circle cx="10" cy="10" r="4" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/controls/MMapRouteControl/icons/indicators/from-setted-indicator.svg b/src/controls/MMapRouteControl/icons/indicators/from-setted-indicator.svg
deleted file mode 100644
index 29dd6e2..0000000
--- a/src/controls/MMapRouteControl/icons/indicators/from-setted-indicator.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="#2E4CE5" fill-rule="evenodd" d="M2.89 9c0-4.002 1.113-7 7.111-7C16 2 17.113 5 17.113 9s-1.616 5.136-3.965 6.28c-1.535.784-2.434 1.604-2.748 2.46-.057.157-.232.261-.399.261s-.344-.104-.4-.261c-.315-.855-1.211-1.676-2.746-2.46C4.506 14.134 2.89 13 2.89 9m7.111 2c1.122 0 2.032-.896 2.032-2 0-1.106-.91-2-2.032-2S7.97 7.895 7.97 9s.91 2 2.032 2" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/controls/MMapRouteControl/icons/indicators/setted-indicator.svg b/src/controls/MMapRouteControl/icons/indicators/setted-indicator.svg
new file mode 100644
index 0000000..a5e7432
--- /dev/null
+++ b/src/controls/MMapRouteControl/icons/indicators/setted-indicator.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M2.89 9c0-4.002 1.113-7 7.111-7C16 2 17.113 5 17.113 9s-1.616 5.136-3.965 6.28c-1.535.784-2.434 1.604-2.748 2.46-.057.157-.232.261-.399.261s-.344-.104-.4-.261c-.315-.855-1.211-1.676-2.746-2.46C4.506 14.134 2.89 13 2.89 9m7.111 2c1.122 0 2.032-.896 2.032-2 0-1.106-.91-2-2.032-2S7.97 7.895 7.97 9s.91 2 2.032 2" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/controls/MMapRouteControl/icons/indicators/to-focus-indicator.svg b/src/controls/MMapRouteControl/icons/indicators/to-focus-indicator.svg
deleted file mode 100644
index 42dd20a..0000000
--- a/src/controls/MMapRouteControl/icons/indicators/to-focus-indicator.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><circle cx="10" cy="10" r="8" fill="#5C5E66" fill-opacity=".1"/><circle cx="10" cy="10" r="4" fill="#313133"/></svg>
\ No newline at end of file
diff --git a/src/controls/MMapRouteControl/icons/indicators/to-setted-indicator.svg b/src/controls/MMapRouteControl/icons/indicators/to-setted-indicator.svg
deleted file mode 100644
index 9529691..0000000
--- a/src/controls/MMapRouteControl/icons/indicators/to-setted-indicator.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="#313133" fill-rule="evenodd" d="M10.001 2c-5.998 0-7.11 2.998-7.11 7 0 4 1.615 5.135 3.964 6.28 1.535.784 2.431 1.604 2.745 2.46.057.157.234.261.401.261s.342-.104.4-.261c.313-.855 1.212-1.676 2.747-2.46 2.35-1.144 3.965-2.28 3.965-6.28S16 2 10 2m2.063 7c0 1.104-.91 2-2.032 2S8 10.105 8 9s.91-2 2.032-2 2.032.894 2.032 2" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/controls/MMapRouteControl/icons/loading-spinner.svg b/src/controls/MMapRouteControl/icons/loading-spinner.svg
index 0424f85..6ee8a86 100644
--- a/src/controls/MMapRouteControl/icons/loading-spinner.svg
+++ b/src/controls/MMapRouteControl/icons/loading-spinner.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#34374A" d="M5.636 5.636 7.05 7.05A7 7 0 1 0 12 5V3a9 9 0 1 1-6.364 2.636"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="currentColor" d="M5.636 5.636 7.05 7.05A7 7 0 1 0 12 5V3a9 9 0 1 1-6.364 2.636"/></svg>
\ No newline at end of file
diff --git a/src/controls/MMapRouteControl/icons/reset-button.svg b/src/controls/MMapRouteControl/icons/reset-button.svg
index 508103b..5c90cf8 100644
--- a/src/controls/MMapRouteControl/icons/reset-button.svg
+++ b/src/controls/MMapRouteControl/icons/reset-button.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#7B7D85" d="m8 7.057 3.3-3.3.943.943-3.3 3.3 3.3 3.3-.943.943-3.3-3.3-3.3 3.3-.942-.943 3.3-3.3-3.3-3.3.943-.942z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="currentColor" d="m8 7.057 3.3-3.3.943.943-3.3 3.3 3.3 3.3-.943.943-3.3-3.3-3.3 3.3-.942-.943 3.3-3.3-3.3-3.3.943-.942z"/></svg>
\ No newline at end of file
diff --git a/src/controls/MMapRouteControl/index.css b/src/controls/MMapRouteControl/index.css
index c8c7671..08ef379 100644
--- a/src/controls/MMapRouteControl/index.css
+++ b/src/controls/MMapRouteControl/index.css
@@ -140,6 +140,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    color: #34374a;
 
     svg {
         position: relative;
@@ -218,3 +219,50 @@
         background-color: #e5fd30;
     }
 }
+
+/* dark theme styles */
+.mappable--route-control._dark {
+    .mappable--route-control_parameters {
+        background: #1d1e1f;
+        box-shadow:
+            0px 4px 12px 0px rgba(18, 20, 26, 0.22),
+            0px 4px 24px 0px rgba(18, 20, 26, 0.14);
+    }
+    .mappable--route-control_modes {
+        .mappable--route-control_modes__container {
+            background: rgba(250, 251, 255, 0.04);
+        }
+
+        input[type='radio']:checked + label {
+            background: #1d1e1f;
+            color: #f2f5fa;
+        }
+    }
+    .mappable--route-control_actions button {
+        color: #7d90f0;
+
+        &:disabled {
+            color: #46464d;
+        }
+    }
+    .mappable--route-control_info {
+        border: 1px solid #313133;
+        background: #1d1e1f;
+        box-shadow:
+            0px 4px 12px 0px rgba(18, 20, 26, 0.22),
+            0px 4px 24px 0px rgba(18, 20, 26, 0.14);
+
+        .mappable--route-control_info_container__value {
+            color: #f2f5fa;
+        }
+        .mappable--route-control_info_error__icon {
+            background: #4f1f24;
+        }
+        .mappable--route-control_info_error__label {
+            color: #f2f5fa;
+        }
+        .mappable--route-control_info_loading {
+            color: #f2f5fa;
+        }
+    }
+}
diff --git a/src/controls/MMapRouteControl/index.ts b/src/controls/MMapRouteControl/index.ts
index efbf17e..425b5e8 100644
--- a/src/controls/MMapRouteControl/index.ts
+++ b/src/controls/MMapRouteControl/index.ts
@@ -126,6 +126,14 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity<MMapRouteControl
             },
             {immediate: true}
         );
+        this._watchContext(
+            mappable.ThemeContext,
+            () => {
+                const {theme} = this._consumeContext(mappable.ThemeContext);
+                this._rootElement.classList.toggle('_dark', theme === 'dark');
+            },
+            {immediate: true}
+        );
     }
 
     protected _onDetach(): void {