new color and icon for navigation

UI/Base/CenterFlexedElement.ts

@@ -0,0 +1,32 @@
+import BaseUIElement from "../BaseUIElement";
+
+export class CenterFlexedElement extends BaseUIElement {
+  private _html: string;
+
+  constructor(html: string) {
+    super();
+    this._html = html ?? "";
+  }
+
+  InnerRender(): string {
+    return this._html;
+  }
+
+  protected InnerConstructElement(): HTMLElement {
+    const e = document.createElement("div");
+    e.innerHTML = this._html;
+    e.style.display = "flex";
+    e.style.height = "100%";
+    e.style.width = "100%";
+    e.style.flexDirection = "column";
+    e.style.flexWrap = "nowrap";
+    e.style.alignContent = "center";
+    e.style.justifyContent = "center";
+    e.style.alignItems = "center";
+    return e;
+  }
+
+  AsMarkdown(): string {
+    return this._html;
+  }
+}

UI/MapControlButton.ts

@@ -5,11 +5,11 @@ import Combine from "./Base/Combine";
  * A button floating above the map, in a uniform style
  */
 export default class MapControlButton extends Combine {
-    
-    constructor(contents: BaseUIElement) {
-        super([contents]);
-        this.SetClass("relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background")
-        this.SetStyle("box-shadow: 0 0 10px var(--shadow-color);");
-    }
-    
-}
+  constructor(contents: BaseUIElement) {
+    super([contents]);
+    this.SetClass(
+      "relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background"
+    );
+    this.SetStyle("box-shadow: 0 0 10px var(--shadow-color);");
+  }
+}