Add to the about page

Prevent stray events from highlighting buttons
after closing a dialog

src/ncounter/About.svelte

@@ -5,6 +5,13 @@
         <h2>Release |BUILD_DATE|</h2>
         <h2>&copy; |BUILD_YEAR|</h2>
     </header>
+    <div class="repo">
+        <a href="https://github.com/cheddarcrisp/ncounter" rel="noopener external" target="_blank"><img src="{ GitHubIcon }" alt="GitHub">Source Code</a>
+        <a href="https://github.com/cheddarcrisp/ncounter/issues" rel="noopener external" target="_blank"><img src="{ GitHubIcon }" alt="GitHub">Issues and feedback</a>
+    </div>
+    <h3>Privacy Policy</h3>
+    <p>No cookies. No tracking. All data is stored on your device.
+        Everything you do with this application is private.</p>
     <div class="licenses">
         <h2>Open Source License Information</h2>
         <Licenses></Licenses>
@@ -13,7 +20,10 @@
 <script>
 import Licenses from './Licenses.svelte';
 import { createEventDispatcher } from 'svelte';
+import GitHubIcon from '../img/GitHub-Mark.png';
+
 const dispatch = createEventDispatcher();
+
 </script>
 <style>
 .about {
@@ -41,6 +51,36 @@ const dispatch = createEventDispatcher();
     text-align: center;
 }
 
+.repo {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin: 6px 0;
+    flex: none;
+}
+
+.repo > a {
+    display: inline-flex;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.87);
+    text-decoration: none;
+    padding: 5px;
+    background-color: #F0F0F0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    border: 2px solid transparent;
+}
+
+.repo > a:hover, .repo > a:focus {
+    box-shadow: none;
+    border-color: var(--highlight-color);
+}
+
+.repo > a > img {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+}
+
 h1 {
     font-weight: 600;
     font-size: 24px;
@@ -50,6 +90,12 @@ h2 {
     font-size: 18px;
 }
 
+h3 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 12px 0 6px 0;
+}
+
 .licenses h2{
     font-weight: 600;
 }

src/ncounter/App.svelte

@@ -17,8 +17,8 @@
         <label>Target<input type="text" pattern="(0|([1-9]\d*))(\.\d+)?" inputmode="decimal" bind:value={newCounter.max} /></label>
         <label>Save history<input type="checkbox" bind:checked={newCounter.saveHistory} /></label>
         <div class="buttons">
-            <button class="ok" on:click|preventDefault={ add }>OK</button>
-            <button on:click|preventDefault={ () => { showAddDialog = false; } }>Cancel</button>
+            <button class="ok" on:click|preventDefault|stopPropagation={ add }>OK</button>
+            <button on:click|preventDefault|stopPropagation={ () => { showAddDialog = false; } }>Cancel</button>
         </div>
     </form>
 </div>

src/ncounter/Counter.svelte

@@ -20,8 +20,8 @@
             <h1>{ showIncrement ? "Add" : "Set" }</h1>
             <input class="dialog-value" type="text" required pattern="(0|([1-9]\d*))(\.\d+)?" inputmode="decimal" bind:value={ dialogValue } use:focus />
             <div class="buttons">
-                <button class="ok" on:click|preventDefault={ dialogDone }>OK</button>
-                <button on:click|preventDefault={ dialogCancel }>Cancel</button>
+                <button class="ok" on:click|preventDefault|stopPropagation={ dialogDone }>OK</button>
+                <button on:click|preventDefault|stopPropagation={ dialogCancel }>Cancel</button>
             </div>
         </form>
     </div>

src/sw.js

@@ -29,7 +29,7 @@ registerRoute(
 );
 
 registerRoute(
-    /\.(?:js|css)$/,
+    /\.(?:js|css|png)$/,
     new StaleWhileRevalidate({
       cacheName: 'static-resources',
     })