More design tweaking

src/UI/BigComponents/MenuDrawer.svelte

@@ -46,6 +46,8 @@
   import Marker from "../Map/Marker.svelte"
   import LogoutButton from "../Base/LogoutButton.svelte"
   import { LanguageIcon } from "@babeard/svelte-heroicons/solid"
+  import { BoltIcon } from "@babeard/svelte-heroicons/mini"
+  import Copyright from "../../assets/svg/Copyright.svelte"
 
   export let state: ThemeViewState
   let userdetails = state.osmConnection.userDetails
@@ -60,7 +62,6 @@
 </script>
 
 <Sidebar asideClass="max-w-screen p-0 low-interaction p-6 link-underline">
-<h2>Menu</h2>
   <div class="flex flex-col">
 
     <!-- User related: avatar, settings, favourits, logout -->
@@ -133,8 +134,9 @@
         </div>
       </LoginToggle>
 
-
+      <div style="width: 90%">
         <LanguagePicker />
+      </div>
 
     </div>
 
@@ -247,10 +249,16 @@
       {/if}
 
 
+      <div class="hidden-on-mobile">
+
         <Page {onlyLink} shown={pg.hotkeys}>
-          <Tr t={ Translations.t.hotkeyDocumentation.title} slot="header" />
+          <div class="flex" slot="header">
+            <BoltIcon class="w-6 h-6" />
+            <Tr t={ Translations.t.hotkeyDocumentation.title} />
+          </div>
           <HotkeyTable />
         </Page>
+      </div>
 
       <a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
         <Github class="h-6 w-6" />
@@ -275,13 +283,17 @@
 
 
       <Page {onlyLink} shown={pg.copyright}>
-          <Tr slot="header" t={Translations.t.general.attribution.attributionTitle} />
+        <div slot="header" class="flex">
+          <Copyright class="w-8 h-8" />
+          <Tr t={Translations.t.general.attribution.attributionTitle} />
+        </div>
         <CopyrightPanel {state} />
       </Page>
 
 
       <Page {onlyLink} shown={pg.copyright_icons}>
-          <div slot="header">
+        <div slot="header" class="flex">
+          <Copyright class="w-8 h-8" />
           <Tr t={ Translations.t.general.attribution.iconAttribution.title} />
         </div>
         <CopyrightAllIcons {state} />
@@ -319,10 +331,12 @@
         padding: 1rem;
         border-radius: 0.5rem;
     }
+
     :global(.sidebar-unit > h3) {
         margin-top: 0;
         margin-bottom: 0.5rem
     }
+
     :global(.sidebar-unit svg) {
         width: 1.5rem;
         height: 1.5rem;

src/UI/ThemeViewGUI.svelte

@@ -190,7 +190,7 @@
     <!-- Top components -->
 
     <div
-      class="flex bg-black-light-transparent pointer-events-auto items-center justify-between px-4 py-2 flex-wrap-reverse">
+      class="flex bg-black-light-transparent pointer-events-auto items-center justify-between px-4 py-1 flex-wrap-reverse">
       <!-- Top bar with tools -->
       <div class="flex items-center">
 
@@ -200,7 +200,7 @@
           on:click={() => {console.log("Opening...."); state.guistate.menuIsOpened.setData(true)}}
           on:keydown={forwardEventToMap}
         >
-          <MenuIcon class="h-8 w-8 cursor-pointer" />
+          <MenuIcon class="h-6 w-6 cursor-pointer" />
         </MapControlButton>
 
         <MapControlButton
@@ -210,7 +210,7 @@
           <div
             class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 mr-2"
           >
-            <Marker icons={layout.icon} size="h-6 w-6 shrink-0 md:h-8 md:w-8 mr-0.5 sm:mr-1 md:mr-2" />
+            <Marker icons={layout.icon} size="h-6 w-6 shrink-0 mr-0.5 sm:mr-1 md:mr-2" />
             <b class="mr-1">
               <Tr t={layout.title} />
             </b>