Move about to top bar

web/src/About.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { notNull, Modal } from "svelte-utils";
+  import { showAbout } from "./stores";
+</script>
+
+{#if $showAbout}
+  <Modal on:close={() => ($showAbout = false)} let:dialog>
+    <h1>15-minute neighborhood tool</h1>
+    <p>TODO. Extremely early in development.</p>
+    <p>
+      This <a href="https://github.com/a-b-street/15m/" target="_blank"
+        >open source</a
+      >
+      tool is created by
+      <a href="https://github.com/dabreegster/" target="_blank"
+        >Dustin Carlino</a
+      >
+      and relies heavily on
+      <a href="https://www.openstreetmap.org/about" target="_blank"
+        >OpenStreetMap</a
+      > data.
+    </p>
+
+    <center
+      ><button on:click={() => notNull(dialog).close()}>Start!</button></center
+    >
+  </Modal>
+{/if}

web/src/App.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import "@picocss/pico/css/pico.jade.min.css";
+  import logoDark from "../assets/logo_dark.svg?url";
+  import About from "./About.svelte";
   import { notNull } from "svelte-utils";
   import { Geocoder } from "svelte-utils/map";
   import type { Map } from "maplibre-gl";
@@ -22,6 +24,7 @@
     backend,
     maptilerApiKey,
     isLoaded,
+    showAbout,
   } from "./stores";
   import TitleMode from "./title/TitleMode.svelte";
   import workerWrapper from "./worker?worker";
@@ -85,8 +88,12 @@
   }
 </script>
 
+<About />
 <Layout>
   <div slot="top" style="display: flex">
+    <button class="outline" on:click={() => ($showAbout = true)}>
+      <img src={logoDark} style="height: 6vh;" alt="A/B Street logo" />
+    </button>
     <span bind:this={topDiv} style="width: 100%" />
   </div>
   <div slot="left">

web/src/RouteMode.svelte

@@ -120,6 +120,8 @@
     {#if err}
       <p>{err}</p>
     {:else if gj}
+      <button on:click={debugRoute}>Watch how this route was found</button>
+
       <ol>
         {#each gj.features as f}
           {@const props = notNull(f.properties)}
@@ -137,8 +139,6 @@
           {/if}
         {/each}
       </ol>
-
-      <button on:click={debugRoute}>Watch how this route was found</button>
     {/if}
   </div>
   <div slot="map">

web/src/title/TitleMode.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { PolygonToolLayer } from "maplibre-draw-polygon";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import { Modal, notNull } from "svelte-utils";
-  import { map, backend, showAbout, isLoaded } from "../stores";
+  import { map, backend, isLoaded } from "../stores";
   import MapLoader from "./MapLoader.svelte";
   import { onMount } from "svelte";
 
@@ -14,36 +13,9 @@
 </script>
 
 <SplitComponent>
-  <div slot="top">modes</div>
+  <div slot="top"></div>
   <div slot="sidebar">
-    {#if $showAbout}
-      <Modal on:close={() => ($showAbout = false)} let:dialog>
-        <h1>15-minute neighborhood tool</h1>
-        <p>TODO. Extremely early in development.</p>
-        <p>
-          This <a href="https://github.com/a-b-street/15m/" target="_blank"
-            >open source</a
-          >
-          tool is created by
-          <a href="https://github.com/dabreegster/" target="_blank"
-            >Dustin Carlino</a
-          >
-          and relies heavily on
-          <a href="https://www.openstreetmap.org/about" target="_blank"
-            >OpenStreetMap</a
-          > data.
-        </p>
-
-        <center
-          ><button on:click={() => notNull(dialog).close()}>Start!</button
-          ></center
-        >
-      </Modal>
-    {/if}
-
     <h2>Choose your study area</h2>
-    <button on:click={() => ($showAbout = true)}>About this tool</button>
-    <hr />
 
     {#if $map}
       <MapLoader />