Uniformly style titles of pages

src/UI/Base/Page.svelte

@@ -29,7 +29,7 @@
          size="xl"
          {defaultClass} {bodyClass} {dialogClass} {headerClass}
          color="none">
-    <h1 slot="header" class="w-full">
+    <h1 slot="header" class="page-header w-full">
       <slot name="header" />
     </h1>
     <slot />
@@ -44,3 +44,16 @@
     </slot>
   </button>
 {/if}
+
+<style>
+    :global(.page-header) {
+        display: flex;
+        align-items: center;
+    }
+
+  :global(.page-header svg) {
+      width: 2rem;
+      height: 2rem;
+      margin-right: 0.75rem;
+  }
+</style>

src/UI/BigComponents/MenuDrawer.svelte

@@ -96,10 +96,10 @@
 
 
     <Page {onlyLink} shown={pg.usersettings}>
-      <div class="flex" slot="header">
-        <CogIcon class="h-6 w-6" />
+      <svelte:fragment slot="header">
+        <CogIcon/>
         <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
-      </div>
+      </svelte:fragment>
 
       <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
       <LoginToggle {state}>
@@ -128,10 +128,10 @@
     <LoginToggle {state}>
       <Page {onlyLink} shown={pg.favourites}>
 
-        <div class="flex" slot="header">
-          <HeartIcon class="h-6 w-6" />
+        <svelte:fragment slot="header">
+          <HeartIcon />
           <Tr t={Translations.t.favouritePoi.tab} />
-        </div>
+        </svelte:fragment>
 
 
         <h3>
@@ -167,10 +167,10 @@
         <Marker icons={layout.icon} size="h-6 w-6 mr-2" />
         <Tr t={t.showIntroduction} />
       </div>
-      <div class="flex" slot="header">
-        <Marker icons={layout.icon} size="h-8 w-8 mr-4" />
+      <svelte:fragment  slot="header">
+        <Marker icons={layout.icon} />
         <Tr t={layout.title} />
-      </div>
+      </svelte:fragment>
       <ThemeIntroPanel {state} />
     </Page>
 
@@ -179,20 +179,20 @@
     <RasterLayerOverview {onlyLink} {state} />
 
     <Page {onlyLink} shown={pg.share}>
-      <div class="flex" slot="header">
-        <Share class="h-4 w-4" />
+      <svelte:fragment slot="header">
+        <Share/>
         <Tr t={Translations.t.general.sharescreen.title} />
-      </div>
+      </svelte:fragment>
       <ShareScreen {state} />
     </Page>
 
 
     {#if state.featureSwitches.featureSwitchEnableExport}
       <Page {onlyLink} shown={pg.download}>
-        <div slot="header" class="flex">
-          <ArrowDownTray class="h-4 w-4" />
+        <svelte:fragment slot="header">
+          <ArrowDownTray  />
           <Tr t={Translations.t.general.download.title} />
-        </div>
+        </svelte:fragment>
         <DownloadPanel {state} />
       </Page>
     {/if}
@@ -230,10 +230,10 @@
 
 
     <Page {onlyLink} shown={pg.community_index}>
-      <div class="flex" slot="header">
-        <Community class="h-6 w-6" />
+      <svelte:fragment slot="header">
+        <Community/>
         <Tr t={Translations.t.communityIndex.title} />
-      </div>
+      </svelte:fragment>
       <CommunityIndexView location={state.mapProperties.location} />
     </Page>
 
@@ -264,10 +264,10 @@
 
     <div class="hidden-on-mobile w-full">
       <Page {onlyLink} shown={pg.hotkeys}>
-        <div class="flex" slot="header">
-          <BoltIcon class="w-6 h-6" />
+        <svelte:fragment  slot="header">
+          <BoltIcon />
           <Tr t={ Translations.t.hotkeyDocumentation.title} />
-        </div>
+        </svelte:fragment>
         <HotkeyTable />
       </Page>
     </div>
@@ -295,29 +295,29 @@
 
 
     <Page {onlyLink} shown={pg.copyright}>
-      <div slot="header" class="flex">
-        <Copyright class="w-8 h-8" />
+      <svelte:fragment slot="header">
+        <Copyright />
         <Tr t={Translations.t.general.attribution.attributionTitle} />
-      </div>
+      </svelte:fragment>
       <CopyrightPanel {state} />
     </Page>
 
 
     <Page {onlyLink} shown={pg.copyright_icons}>
-      <div slot="header" class="flex">
-        <Copyright class="w-8 h-8" />
+      <svelte:fragment slot="header" >
+        <Copyright/>
         <Tr t={ Translations.t.general.attribution.iconAttribution.title} />
-      </div>
+      </svelte:fragment>
       <CopyrightAllIcons {state} />
 
     </Page>
 
 
     <Page {onlyLink} shown={pg.privacy}>
-      <div class="flex" slot="header">
-        <EyeIcon class="w-8 h-8" />
+      <svelte:fragment slot="header">
+        <EyeIcon />
         <Tr t={Translations.t.privacy.title} />
-      </div>
+      </svelte:fragment>
       <PrivacyPolicy {state} />
     </Page>