Make mapcontrol-button svgs styleable by colour

InitUiElements.ts

@@ -1,4 +1,3 @@
-import {CenterFlexedElement} from "./UI/Base/CenterFlexedElement";
 import {FixedUiElement} from "./UI/Base/FixedUiElement";
 import Toggle from "./UI/Input/Toggle";
 import {Basemap} from "./UI/BigComponents/Basemap";
@@ -197,25 +196,23 @@ export class InitUiElements {
                     State.state.currentGPSLocation,
                     State.state.leafletMap,
                     State.state.layoutToUse
-                )
+                ), {
+                    dontStyle : true
+                }
             ),
             undefined,
             State.state.featureSwitchGeolocation
         );
 
         const plus = new MapControlButton(
-            new CenterFlexedElement(
+                Svg.plus_zoom_svg()
-                Img.AsImageElement(Svg.plus_zoom, "", "width:1.25rem;height:1.25rem")
-            )
         ).onClick(() => {
             State.state.locationControl.data.zoom++;
             State.state.locationControl.ping();
         });
 
         const min = new MapControlButton(
-            new CenterFlexedElement(
+           Svg.min_zoom_svg()
-                Img.AsImageElement(Svg.min_zoom, "", "width:1.25rem;height:1.25rem")
-            )
         ).onClick(() => {
             State.state.locationControl.data.zoom--;
             State.state.locationControl.ping();
@@ -383,9 +380,7 @@ export class InitUiElements {
             
 
         const filterMapControlButton = new MapControlButton(
-            new CenterFlexedElement(
+            Svg.filter_svg()
-                Img.AsImageElement(Svg.filter, "", "width:1.25rem;height:1.25rem")
-            )
         );
 
         const filterButton = new Toggle(

Logic/Actors/GeoLocationHandler.ts

@@ -5,7 +5,7 @@ import Img from "../../UI/Base/Img";
 import {LocalStorageSource} from "../Web/LocalStorageSource";
 import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
 import {VariableUiElement} from "../../UI/Base/VariableUIElement";
-import {CenterFlexedElement} from "../../UI/Base/CenterFlexedElement";
+import BaseUIElement from "../../UI/BaseUIElement";
 
 export default class GeoLocationHandler extends VariableUiElement {
     /**
@@ -79,25 +79,23 @@ export default class GeoLocationHandler extends VariableUiElement {
         super(
             hasLocation.map(
                 (hasLocationData) => {
-                    let icon: string;
+                    let icon: BaseUIElement;
 
                     if (isLocked.data) {
-                        icon = Svg.location;
+                        icon = Svg.location_svg();
                     } else if (hasLocationData) {
-                        icon = Svg.location_empty;
+                        icon = Svg.location_empty_svg();
                     } else if (isActive.data) {
-                        icon = Svg.location_empty;
+                        icon = Svg.location_empty_svg();
                     } else {
-                        icon = Svg.location_circle;
+                        icon = Svg.location_circle_svg();
                     }
-
+                    return icon
-                    return new CenterFlexedElement(
-                        Img.AsImageElement(icon, "", "width:1.25rem;height:1.25rem")
-                    );
                 },
                 [isActive, isLocked]
             )
         );
+        this.SetClass("mapcontrol")
         this._isActive = isActive;
         this._isLocked = isLocked;
         this._permission = new UIEventSource<string>("");

UI/MapControlButton.ts

@@ -5,8 +5,13 @@ import Combine from "./Base/Combine";
  * A button floating above the map, in a uniform style
  */
 export default class MapControlButton extends Combine {
-  constructor(contents: BaseUIElement) {
+  constructor(contents: BaseUIElement, options?:{
+    dontStyle?: boolean
+  }) {
     super([contents]);
+    if(!options?.dontStyle){
+    contents.SetClass("mapcontrol p-1")
+    }
     this.SetClass(
       "relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background m-0.5 md:m-1"
     );

assets/svg/location-circle.svg

@@ -1 +1,62 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><g id="Calque_1" data-name="Calque 1"><path class="cls-1" d="M12,7.71a4.37,4.37,0,0,1,2.4.73,4.3,4.3,0,0,1,1.83,4.43,4.31,4.31,0,0,1-3.39,3.39A4.32,4.32,0,1,1,12,7.71Z"/><path class="cls-2" d="M12,4.7a7.36,7.36,0,0,1,6.8,4.54,7.36,7.36,0,0,1-12.92,6.9A7.36,7.36,0,0,1,12,4.7Z"/></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="location-circle.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata15">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="999"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="19.666667"
+     inkscape:cx="15.349556"
+     inkscape:cy="11.585617"
+     inkscape:window-x="1680"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">.cls-1{fill:#000;}.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:1.5px;}</style>
+  </defs>
+  <path
+     style="fill:#000000"
+     inkscape:connector-curvature="0"
+     id="path6"
+     d="m 12,7.71 a 4.37,4.37 0 0 1 2.4,0.73 4.3,4.3 0 0 1 1.83,4.43 4.31,4.31 0 0 1 -3.39,3.39 A 4.32,4.32 0 1 1 12,7.71 Z"
+     class="cls-1" />
+  <path
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="M 12,3.9492188 C 5.5686003,3.954127 1.690624,11.203882 5.2558594,16.556641 h 0.00195 c 2.6718604,3.989543 7.2401435,4.412862 10.5585935,2.640625 3.318451,-1.772238 5.507368,-5.802848 3.677735,-10.2421879 l -0.002,-0.00195 C 18.236517,5.9260126 15.277212,3.9484722 12,3.9492188 Z m 0,1.5 c 2.674974,-6.094e-4 5.0825,1.6072908 6.107422,4.078125 1.553254,3.7713402 -0.246448,6.8781492 -2.998047,8.3476562 -2.751726,1.469575 -6.3350719,1.238395 -8.6054688,-2.150391 v -0.002 C 3.5579114,11.297176 6.6831292,5.4532764 12,5.4492188 Z"
+     id="path8"
+     inkscape:connector-curvature="0" />
+</svg>

index.css

@@ -93,6 +93,10 @@ svg, img {
     display: unset;
 }
 
+.mapcontrol svg path{
+    fill: var(--subtle-detail-color-contrast);
+}
+
 a {
     color: var(--foreground-color);
 }