Use '_svg' instead of '_ui' from the bundled svg classes

UI/Base/TabbedGroup.svelte

@@ -19,7 +19,7 @@
 <div class="tabbedgroup w-full h-full">
     <TabGroup class="h-full w-full flex flex-col" defaultIndex={1}
               on:change={(e) =>{if(e.detail >= 0){tab.setData( e.detail); }} }>
-        <div class="flex bg-gray-300 items-center justify-between sticky top-0">
+        <div class="tablist flex bg-gray-300 items-center justify-between sticky top-0">
             <TabList class="flex flex-wrap">
                 {#if $$slots.title1}
                     <Tab class={({selected}) => "tab "+(selected ? "tab-selected" : "tab-unselected")}>
@@ -111,8 +111,12 @@
     }
 
     :global(.tab-selected) {
-        background-color: rgb(59 130 246);
+        background-color: var(--catch-detail-color);
-        color: rgb(255 255 255);
+        color: var(--catch-detail-color-contrast);
+    }
+
+    :global(.tab-selected svg) {
+        fill: var(--catch-detail-color-contrast);
     }
 
     :global(.tab-unselected) {

UI/BigComponents/AllDownloads.ts

@@ -35,7 +35,7 @@ export default class AllDownloads extends SubtleButton {
         const loading = Svg.loading_svg().SetClass("animate-rotate")
 
         const dloadTrans = Translations.t.general.download
-        const icon = new Toggle(loading, Svg.floppy_ui(), isExporting)
+        const icon = new Toggle(loading, Svg.floppy_svg(), isExporting)
         const text = new Toggle(
             dloadTrans.exporting.Clone(),
             new Combine([

UI/BigComponents/CopyrightPanel.ts

@@ -48,7 +48,7 @@ export class OpenIdEditor extends VariableUiElement {
                     const idLink = `https://www.openstreetmap.org/edit?editor=id${elementSelect}#map=${
                         mapProperties.zoom?.data ?? 0
                     }/${location?.lat ?? 0}/${location?.lon ?? 0}`
-                    return new SubtleButton(Svg.pencil_ui().SetStyle(iconStyle), t.editId, {
+                    return new SubtleButton(Svg.pencil_svg().SetStyle(iconStyle), t.editId, {
                         url: idLink,
                         newTab: true,
                     })
@@ -81,7 +81,7 @@ export class OpenJosm extends Combine {
         )
 
         const toggle = new Toggle(
-            new SubtleButton(Svg.josm_logo_ui().SetStyle(iconStyle), t.editJosm).onClick(() => {
+            new SubtleButton(Svg.josm_logo_svg().SetStyle(iconStyle), t.editJosm).onClick(() => {
                 const bbox = bounds.data
                 if (bbox === undefined) {
                     return

UI/BigComponents/CustomGeneratorButton.svelte

@@ -29,8 +29,8 @@
         url: "https://pietervdvn.github.io/mc/legacy/070/customGenerator.html",
       }}
         >
-      <span slot="image" class="h-11 w-11 mx-4 bg-red">
+      <span slot="image">
-        <ToSvelte construct={Svg.pencil_ui()} />
+        <ToSvelte construct={Svg.pencil_svg().SetClass("h-11 w-11 mx-4 bg-red")}/>
       </span>
             <span slot="message">{t.createYourOwnTheme.toString()}</span>
         </SubtleButton>

UI/BigComponents/DownloadPanel.ts

@@ -28,7 +28,7 @@ export class DownloadPanel extends Toggle {
         const metaisIncluded = includeMetaToggle.GetValue().map((selected) => selected.length > 0)
 
         const buttonGeoJson = new SubtleButton(
-            Svg.floppy_ui(),
+            Svg.floppy_svg(),
             new Combine([
                 t.downloadGeojson.SetClass("font-bold"),
                 t.downloadGeoJsonHelper,
@@ -45,7 +45,7 @@ export class DownloadPanel extends Toggle {
         })
 
         const buttonCSV = new SubtleButton(
-            Svg.floppy_ui(),
+            Svg.floppy_svg(),
             new Combine([t.downloadCSV.SetClass("font-bold"), t.downloadCSVHelper]).SetClass(
                 "flex flex-col"
             )
@@ -63,7 +63,7 @@ export class DownloadPanel extends Toggle {
         })
 
         const buttonSvg = new SubtleButton(
-            Svg.floppy_ui(),
+            Svg.floppy_svg(),
             new Combine([t.downloadAsSvg.SetClass("font-bold"), t.downloadAsSvgHelper]).SetClass(
                 "flex flex-col"
             )
@@ -88,7 +88,7 @@ export class DownloadPanel extends Toggle {
         })
 
         const buttonPng = new SubtleButton(
-            Svg.floppy_ui(),
+            Svg.floppy_svg(),
             new Combine([t.downloadAsPng.SetClass("font-bold"), t.downloadAsPngHelper])
         ).OnClickWithLoading(t.exporting, async () => {
             const gpsLayer = state.layerState.filteredLayers.get(

UI/BigComponents/ExtraLinkButton.ts

@@ -61,7 +61,7 @@ export default class ExtraLinkButton extends UIElement {
             return Utils.SubstituteKeys(c.href, subs)
         }, [this.state.mapProperties.zoom])
 
-        let img: BaseUIElement = Svg.pop_out_ui()
+        let img: BaseUIElement = Svg.pop_out_svg()
         if (c.icon !== undefined) {
             img = new Img(c.icon).SetClass("h-6")
         }

UI/BigComponents/Geosearch.svelte

@@ -91,6 +91,6 @@
 
   </form>
   <div class="w-6 h-6 self-end" on:click={performSearch}>
-    <ToSvelte construct={Svg.search_ui}></ToSvelte>
+    <ToSvelte construct={Svg.search_svg}></ToSvelte>
   </div>
 </div>

UI/BigComponents/MapillaryLink.ts

@@ -15,7 +15,7 @@ export class MapillaryLink extends VariableUiElement {
                     location?.lat ?? 0
                 }&lng=${location?.lon ?? 0}&z=${Math.max((location?.zoom ?? 2) - 1, 1)}`
                 return new SubtleButton(
-                    Svg.mapillary_black_ui().SetStyle(iconStyle),
+                    Svg.mapillary_black_svg().SetStyle(iconStyle),
                     new Combine([t.openMapillary.SetClass("font-bold"), t.mapillaryHelp]).SetClass(
                         "flex flex-col link-no-underline"
                     ),

UI/BigComponents/NoThemeResultButton.svelte

@@ -33,7 +33,7 @@
     <span>
       <SubtleButton>
         <span slot="image">
-          <ToSvelte construct={Svg.search_disable_ui()} />
+          <ToSvelte construct={Svg.search_disable_svg().SetClass("w-6 mr-2")} />
         </span>
         <span slot="message">{t.noSearch.toString()}</span>
       </SubtleButton>

UI/BigComponents/ShareScreen.ts

@@ -13,7 +13,7 @@ import {SubtleButton} from "../Base/SubtleButton"
 import LZString from "lz-string"
 import {SpecialVisualizationState} from "../SpecialVisualization"
 
-class ShareScreen extends Combine{
+export class ShareScreen extends Combine{
     constructor(state: SpecialVisualizationState) {
         const layout = state?.layout
         const tr = Translations.t.general.sharescreen

UI/BigComponents/ThemesList.svelte

@@ -4,7 +4,6 @@
   import {OsmConnection} from "../../Logic/Osm/OsmConnection"
   import {UIEventSource} from "../../Logic/UIEventSource"
   import type Loc from "../../Models/Loc"
-  import Locale from "../i18n/Locale"
   import CustomGeneratorButton from "./CustomGeneratorButton.svelte"
   import ProfessionalServicesButton from "./ProfessionalServicesButton.svelte"
   import ThemeButton from "./ThemeButton.svelte"

UI/BigComponents/UploadTraceToOsmUI.ts

@@ -127,7 +127,7 @@ export default class UploadTraceToOsmUI extends LoginToggle {
                     uploadFinished
                 ),
                 new Combine([
-                    Svg.invalid_ui().SetClass("w-8 h-8 m-2"),
+                    Svg.invalid_svg().SetClass("w-8 h-8 m-2"),
                     t.gpxServiceOffline.SetClass("p-2"),
                 ]).SetClass("flex border alert items-center"),
                 state.osmConnection.gpxServiceIsOnline.map(

UI/Image/ImageUploadFlow.ts

@@ -68,7 +68,7 @@ export class ImageUploadFlow extends Toggle {
             )
         }
         const label = new Combine([
-            Svg.camera_plus_ui().SetClass("block w-12 h-12 p-1 text-4xl "),
+            Svg.camera_plus_svg().SetClass("block w-12 h-12 p-1 text-4xl "),
             labelContent,
         ])
             .SetClass(

UI/Map/ShowDataLayer.ts

@@ -145,7 +145,10 @@ class PointRenderingLayer {
             store = new ImmutableStore(<OsmTags>feature.properties)
         }
         const {html, iconAnchor} = this._config.RenderIcon(store, true)
-        html.SetClass("marker cursor-pointer")
+        html.SetClass("marker")
+        if (this._onClick !== undefined) {
+            html.SetClass("cursor-pointer")
+        }
         const el = html.ConstructElement()
 
         if (this._onClick) {
@@ -449,10 +452,10 @@ export default class ShowDataLayer {
         let {features, doShowLayer, fetchStore, selectedElement, selectedLayer} = this._options
         const onClick =
             this._options.onClick ??
-            ((feature: Feature) => {
+            (this._options.layer.title === undefined ? undefined : ((feature: Feature) => {
                 selectedElement?.setData(feature)
                 selectedLayer?.setData(this._options.layer)
-            })
+            }))
         if (this._options.drawLines !== false) {
             for (let i = 0; i < this._options.layer.lineRendering.length; i++) {
                 const lineRenderingConfig = this._options.layer.lineRendering[i]

UI/NewPoint/ConfirmLocationOfPoint.ts

@@ -12,6 +12,9 @@ import { WayId } from "../../Models/OsmFeature"
 import { Translation } from "../i18n/Translation"
 import { SpecialVisualizationState } from "../SpecialVisualization"
 
+/**
+ * @deprecated
+ */
 export default class ConfirmLocationOfPoint extends Combine {
     constructor(
         state: SpecialVisualizationState,

UI/OpeningHours/OpeningHoursRange.ts

@@ -30,7 +30,7 @@ export default class OpeningHoursRange extends BaseUIElement {
             Utils.TwoDigits(oh.endHour) + ":" + Utils.TwoDigits(oh.endMinutes)
         )
 
-        const deleteRange = Svg.delete_icon_ui()
+        const deleteRange = Svg.delete_icon_svg()
             .SetClass("rounded-full w-6 h-6 block bg-black pointer-events-auto  ")
             .onClick(() => {
                 this._onDelete()

UI/Popup/DeleteWizard.ts

@@ -134,7 +134,7 @@ export default class DeleteWizard extends Toggle {
             new Toggle(
                 new Toggle(
                     deleteDialog,
-                    new SubtleButton(Svg.envelope_ui(), t.readMessages),
+                    new SubtleButton(Svg.envelope_svg(), t.readMessages),
                     state.osmConnection.userDetails.map(
                         (ud) =>
                             ud.csCount >
@@ -192,12 +192,12 @@ export default class DeleteWizard extends Toggle {
     ): BaseUIElement {
         const t = Translations.t.delete
         const btn = new Combine([
-            Svg.delete_icon_ui().SetClass("w-6 h-6 mr-3 block"),
+            Svg.delete_icon_svg().SetClass("w-6 h-6 mr-3 block"),
             t.delete,
         ]).SetClass("flex btn bg-red-500")
 
         const btnNonActive = new Combine([
-            Svg.delete_icon_ui().SetClass("w-6 h-6 mr-3 block"),
+            Svg.delete_icon_svg().SetClass("w-6 h-6 mr-3 block"),
             t.delete,
         ]).SetClass("flex btn btn-disabled bg-red-200")
 

UI/Popup/ExportAsGpxViz.ts

@@ -26,7 +26,7 @@ export class ExportAsGpxViz implements SpecialVisualization {
             return undefined
         }
         return new SubtleButton(
-            Svg.download_ui(),
+            Svg.download_svg(),
             new Combine([
                 t.downloadFeatureAsGpx.SetClass("font-bold text-lg"),
                 t.downloadGpxHelper.SetClass("subtle"),

UI/Popup/ImportButton.ts

@@ -161,7 +161,7 @@ ${Utils.special_visualizations_importRequirementDocs}
         if (args.icon !== undefined && args.icon !== "") {
             img = new Img(args.icon)
         } else {
-            img = Svg.add_ui()
+            img = Svg.add_svg()
         }
         const inviteToImportButton = new SubtleButton(img, args.text)
 
@@ -318,7 +318,7 @@ ${Utils.special_visualizations_importRequirementDocs}
             }
         })
 
-        const cancel = new SubtleButton(Svg.close_ui(), Translations.t.general.cancel).onClick(
+        const cancel = new SubtleButton(Svg.close_svg(), Translations.t.general.cancel).onClick(
             onCancel
         )
         return new Combine([confirmationMap, confirmButton, cancel]).SetClass("flex flex-col")

UI/Popup/LoginButton.ts

@@ -17,7 +17,7 @@ class LoginButton extends SubtleButton {
         },
         icon?: BaseUIElement | string
     ) {
-        super(icon ?? Svg.login_ui(), text)
+        super(icon ?? Svg.login_svg(), text)
         this.onClick(() => {
             state.osmConnection?.AttemptLogin()
         })

UI/Popup/MoveWizard.ts

@@ -95,14 +95,14 @@ export default class MoveWizard extends Toggle {
             })
         } else {
             moveButton = new SubtleButton(
-                Svg.move_ui().SetStyle("width: 1.5rem; height: 1.5rem"),
+                Svg.move_svg().SetStyle("width: 1.5rem; height: 1.5rem"),
                 t.inviteToMove.generic
             ).onClick(() => {
                 currentStep.setData("reason")
             })
         }
 
-        const moveAgainButton = new SubtleButton(Svg.move_ui(), t.inviteToMoveAgain).onClick(() => {
+        const moveAgainButton = new SubtleButton(Svg.move_svg(), t.inviteToMoveAgain).onClick(() => {
             currentStep.setData("reason")
         })
 

UI/Popup/SaveButton.ts

@@ -9,7 +9,7 @@ import Svg from "../../Svg"
 export class EditButton extends Toggle {
     constructor(osmConnection: OsmConnection, onClick: () => void) {
         super(
-            new Combine([Svg.pencil_ui()])
+            new Combine([Svg.pencil_svg()])
                 .SetClass("block relative h-10 w-10 p-2 float-right")
                 .SetStyle("border: 1px solid black; border-radius: 0.7em")
                 .onClick(onClick),

UI/Popup/SplitRoadWizard.ts

@@ -68,7 +68,7 @@ export default class SplitRoadWizard extends Combine {
 
         // Toggle between splitmap
         const splitButton = new SubtleButton(
-            Svg.scissors_ui().SetStyle("height: 1.5rem; width: auto"),
+            Svg.scissors_svg().SetStyle("height: 1.5rem; width: auto"),
             new Toggle(
                 t.splitAgain.Clone().SetClass("text-lg font-bold"),
                 t.inviteToSplit.Clone().SetClass("text-lg font-bold"),

UI/SpecialVisualizations.ts

@@ -509,7 +509,7 @@ export default class SpecialVisualizations {
                 args: [],
                 docs: "Shows a button where the user can log out",
                 constr(state: SpecialVisualizationState): BaseUIElement {
-                    return new SubtleButton(Svg.logout_ui(), Translations.t.general.logout, {
+                    return new SubtleButton(Svg.logout_svg(), Translations.t.general.logout, {
                         imgSize: "w-6 h-6",
                     }).onClick(() => {
                         state.osmConnection.LogOut()
@@ -862,7 +862,7 @@ export default class SpecialVisualizations {
                     const t = Translations.t.general.download
 
                     return new SubtleButton(
-                        Svg.download_ui(),
+                        Svg.download_svg(),
                         new Combine([
                             t.downloadFeatureAsGeojson.SetClass("font-bold text-lg"),
                             t.downloadGeoJsonHelper.SetClass("subtle"),
@@ -986,7 +986,7 @@ export default class SpecialVisualizations {
                     })
 
                     const label = new Combine([
-                        Svg.camera_plus_ui().SetClass("block w-12 h-12 p-1 text-4xl "),
+                        Svg.camera_plus_svg().SetClass("block w-12 h-12 p-1 text-4xl "),
                         Translations.t.image.addPicture,
                     ]).SetClass(
                         "p-2 border-4 border-black rounded-full font-bold h-full align-center w-full flex justify-center"

UI/ThemeViewGUI.svelte

@@ -35,9 +35,10 @@
     import SvelteUIElement from "./Base/SvelteUIElement";
     import OverlayToggle from "./BigComponents/OverlayToggle.svelte";
     import LevelSelector from "./BigComponents/LevelSelector.svelte";
-    import Svg from "../Svg";
     import ExtraLinkButton from "./BigComponents/ExtraLinkButton";
     import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte";
+    import Svg from "../Svg";
+    import {ShareScreen} from "./BigComponents/ShareScreen";
 
     export let state: ThemeViewState;
     let layout = state.layout;
@@ -55,6 +56,10 @@
             return undefined;
         }
 
+        if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) {
+            return undefined
+        }
+
         const tags = state.featureProperties.getStore(selectedElement.properties.id);
         return new SvelteUIElement(SelectedElementView, {state, layer, selectedElement, tags})
     }, [selectedLayer]);
@@ -109,7 +114,7 @@
             <MapControlButton
                     on:click={() => {selectedLayer.setData(currentViewLayer); selectedElement.setData(state.currentView.features?.data?.[0])}}>
                 <ToSvelte
-                        construct={() =>(currentViewLayer.defaultIcon() ??  Svg.checkbox_empty_svg()).SetClass("w-8 h-8 cursor-pointer")}/>
+                        construct={() =>(currentViewLayer.defaultIcon()).SetClass("w-8 h-8 cursor-pointer")}/>
             </MapControlButton>
         {/if}
         <ToSvelte construct={() => new ExtraLinkButton(state, layout.extraLink)}></ToSvelte>
@@ -133,10 +138,10 @@
         </div>
     </If>
     <MapControlButton on:click={() => mapproperties.zoom.update(z => z+1)}>
-        <img class="w-8 h-8" src="./assets/svg/plus.svg"/>
+        <ToSvelte construct={Svg.plus_svg().SetClass("w-8 h-8")}/>
     </MapControlButton>
     <MapControlButton on:click={() => mapproperties.zoom.update(z => z-1)}>
-        <img class="w-8 h-8" src="./assets/svg/min.svg"/>
+        <ToSvelte construct={Svg.min_svg().SetClass("w-8 h-8")}/>
     </MapControlButton>
     <If condition={featureSwitches.featureSwitchGeolocation}>
         <MapControlButton>
@@ -174,7 +179,10 @@
                 <XCircleIcon class="w-8 h-8 mr-2" on:click={() => state.guistate.themeIsOpened.setData(false)}/>
             </div>
 
-            <Tr slot="title0" t={layout.title}/>
+            <div class="flex" slot="title0">
+                <img class="w-4 h-4 block" src={layout.icon}>
+                <Tr t={layout.title}/>
+            </div>
 
             <div slot="content0">
 
@@ -201,7 +209,7 @@
 
             <div class="flex" slot="title1">
                 <If condition={state.featureSwitches.featureSwitchFilter}>
-                    <img class="w-4 h-4" src="./assets/svg/filter.svg">
+                    <ToSvelte construct={Svg.filter_svg().SetClass("w-4 h-4")}/>
                     <Tr t={Translations.t.general.menu.filter}/>
                 </If>
             </div>
@@ -226,7 +234,7 @@
             </div>
             <div class="flex" slot="title2">
                 <If condition={state.featureSwitches.featureSwitchEnableExport}>
-                    <img class="w-4 h-4" src="./assets/svg/download.svg"/>
+                    <ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")}/>
                     <Tr t={Translations.t.general.download.title}/>
                 </If>
             </div>
@@ -240,6 +248,10 @@
 
             <ToSvelte construct={() => new CopyrightPanel(state)} slot="content3"></ToSvelte>
 
+            <div slot="title4">
+                <Tr t={Translations.t.general.sharescreen.title}/>
+            </div>
+            <ToSvelte construct={() => new ShareScreen(state)} slot="content4"/> 
             
         </TabbedGroup>
     </FloatOver>
@@ -315,7 +327,7 @@
             </div>
 
             <div class="flex" slot="title2">
-                <img class="w-6" src="./assets/svg/community.svg">
+                <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
                 Get in touch with others
             </div>
             <CommunityIndexView location={state.mapProperties.location} slot="content2"></CommunityIndexView>

UI/Wikipedia/WikidataSearchBox.ts

@@ -207,7 +207,7 @@ Another example is to search for species and trees:
         return new Combine([
             new Title(Translations.t.general.wikipedia.searchWikidata, 3).SetClass("m-2"),
             new Combine([
-                Svg.search_ui().SetStyle("width: 1.5rem"),
+                Svg.search_svg().SetStyle("width: 1.5rem"),
                 searchField.SetClass("m-2 w-full"),
             ]).SetClass("flex"),
             previews,