Introduce LinkButton and ScriptButton components and updated NearToMeCard to make use of the new components

src/lib/buttons/LinkButton.svelte

@@ -13,6 +13,7 @@
         text-decoration: none;
         margin: 5px;
         background-color: var(--island-button-color);
+        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
         padding: 5px 10px;
         min-width: 40px;
         height: 25px;

src/lib/buttons/ScriptButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    export let fn = () => {};
+    export let text: string;
+</script>
+
+<button class="script-button" on:click={fn} on:keypress={fn}>{text}</button>
+
+<style>
+    .script-button {
+        color: aliceblue;
+        border: none;
+        border-radius: 20px;
+        text-decoration: none;
+        margin: auto;
+        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        background-color: var(--island-button-color);
+        padding: 5px 10px;
+        min-width: 40px;
+        height: 35px;
+        font-size: 16px;
+        font-weight: 400;
+        box-shadow: var(--box-shadow);
+        transition: all 0.3s ease;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .script-button:hover {
+        box-shadow: var(--box-shadow-dark);
+        background-color: rgb(45,45,45);
+    }
+</style>

src/lib/cards/NearToMeCard.svelte

@@ -10,6 +10,8 @@
     import { apiGet } from "$lib/scripts/apiFetch";
     import { onMount } from "svelte";
     import { nearToMeCache } from "$lib/stores/nearToMeCache";
+    import LinkButton from "$lib/buttons/LinkButton.svelte";
+    import ScriptButton from "$lib/buttons/ScriptButton.svelte";
 
     let errorMessage: string;
     let stations: NearestStationResponse[] = [];
@@ -61,7 +63,7 @@
 
 <Card {config}>
     {#if !$uuid || $uuid === "null"}
-        <p><a href="/more/reg">Register to use this feature</a></p>
+        <LinkButton text="Register to use this feature" link="/more/reg" />
     {:else if $location}
         {#if !stations.length}
             {#if errorMessage}
@@ -72,39 +74,16 @@
         {:else}
             <div id="buttons">
                 {#each stations as station}
-                    <a class="link" href="/ldb?station={station['3ALPHA']}">{station.NLCDESC} - {station.miles}mi</a>
+                    <LinkButton text={`${station.NLCDESC} - ${station.miles}mi`} link={`/ldb?station=${station["3ALPHA"]}`} />
                 {/each}
             </div>
         {/if}
     {:else}
-        <p><button on:click={turnOnLocation}>Turn on Location</button></p>
+        <ScriptButton text={"Turn on Location"} fn={turnOnLocation} />
     {/if}
 </Card>
 
 <style>
-    a,
-    button {
-        color: aliceblue;
-        text-decoration: none;
-        margin: auto;
-        padding: 5px 10px;
-        background-color: var(--island-button-color);
-        border: none;
-        border-radius: 20px;
-        box-shadow: var(--box-shadow);
-        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
-        font-size: 16px;
-        font-weight: 400;
-        white-space: nowrap;
-        transition: all 0.3s ease;
-    }
-
-    a:hover,
-    button:hover {
-        background-color: rgb(45, 45, 45);
-        box-shadow: var(--box-shadow-dark);
-    }
-
     #buttons {
         display: flex;
         flex-wrap: wrap;
@@ -114,9 +93,9 @@
         margin: auto;
         padding-top: 5px;
     }
-    .link {
+
-        display: inline-flex;
+    p {
-        margin: 5px;
+        text-align: center;
-        padding: 5px 10px;
+        margin: auto;
     }
 </style>