Add sublte-button, add different icon for popout

UI/Base/SubtleButton.ts

@@ -0,0 +1,27 @@
+import {UIElement} from "../UIElement";
+import Translations from "../i18n/Translations";
+import Combine from "./Combine";
+
+
+export class SubtleButton extends UIElement{
+    private imageUrl: string;
+    private message: UIElement;
+
+    constructor(imageUrl: string, message: string | UIElement) {
+        super(undefined);
+        this.message = Translations.W(message);
+        this.imageUrl = imageUrl;
+        
+    }
+
+    InnerRender(): string {
+        return new Combine([
+            '<span class="subtle-button">',
+            `<img src='${this.imageUrl}'>`,
+            this.message,
+            '</span>'
+        ]).Render();
+    }
+
+
+}

UI/MoreScreen.ts

@@ -7,6 +7,8 @@ import {Utils} from "../Utils";
 import {link} from "fs";
 import {UIEventSource} from "./UIEventSource";
 import {VariableUiElement} from "./Base/VariableUIElement";
+import Combine from "./Base/Combine";
+import {SubtleButton} from "./Base/SubtleButton";
 
 
 export class MoreScreen extends UIElement {
@@ -23,26 +25,27 @@ export class MoreScreen extends UIElement {
         const els: UIElement[] = []
         for (const k in AllKnownLayouts.allSets) {
             const layout = AllKnownLayouts.allSets[k]
-            if(layout.hideFromOverview){continue}
+            if (layout.hideFromOverview) {
+                continue
+            }
 
             const linkText =
-                `https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon}
-            `
-            const link = new FixedUiElement(
-                `
-                <span class="switch-layout">
-                 <a href="${linkText}" target="_blank">
-                <img src='${layout.icon}'>
-                 <div><b>${Utils.Upper(layout.name)}</b><br/>
-                  ${Translations.W(layout.description).Render()}</div>
-                </a>
-                </span>
-`
-            );
+                `https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon}`
+            const link =
+                new SubtleButton(layout.icon,
+                    new Combine([
+                        `<a href="${linkText}" target="_blank">`,
+                        "<div>",
+                        "<b>",
+                        Translations.W(layout.title),
+                        "</b>",
+                        "<br/>",
+                        Translations.W(layout.description),
+                        "</div>",
+                        "</a>"
+                    ]));
 
             els.push(link)
-
-
         }