src/lib/buttons/LinkButton.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-    export let link: string;
-    export let text: string;
-</script>
-
-<a class="link-button" href="{link}">{text}</a>
-
-<style>
-    .link-button {
-        color: aliceblue;
-        border: none;
-        border-radius: 20px;
-        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;
-        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;
-    }
-
-    .link-button:hover {
-        box-shadow: var(--box-shadow-dark);
-        background-color: rgb(45,45,45);
-    }
-</style>

src/lib/buttons/ScriptButton.svelte

@@ -1,36 +0,0 @@
-<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: 20px 20px;
-        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,8 +10,6 @@
     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[] = [];
@@ -63,7 +61,7 @@
 
 <Card {config}>
     {#if !$uuid || $uuid === "null"}
-        <LinkButton text="Register to use this feature" link="/more/reg" />
+        <p><a href="/more/reg">Register to use this feature</a></p>
     {:else if $location}
         {#if !stations.length}
             {#if errorMessage}
@@ -74,16 +72,39 @@
         {:else}
             <div id="buttons">
                 {#each stations as station}
-                    <LinkButton text={`${station.NLCDESC} - ${station.miles}mi`} link={`/ldb?station=${station["3ALPHA"]}`} />
+                    <a class="link" href="/ldb?station={station['3ALPHA']}">{station.NLCDESC} - {station.miles}mi</a>
                 {/each}
             </div>
         {/if}
     {:else}
-        <ScriptButton text={"Turn on Location"} fn={turnOnLocation} />
+        <p><button on:click={turnOnLocation}>Turn on Location</button></p>
     {/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;
@@ -93,9 +114,9 @@
         margin: auto;
         padding-top: 5px;
     }
-
+    .link {
-    p {
+        display: inline-flex;
-        text-align: center;
+        margin: 5px;
-        margin: auto;
+        padding: 5px 10px;
     }
 </style>

src/lib/cards/QuickLinkCard.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-    import Card from "./Card.svelte";
-    import type { CardConfig } from "./Card.types";
-    import { ql } from "$lib/stores/quick-links";
-    import LinkButton from "$lib/buttons/LinkButton.svelte";
-
-    let upstreamProps: CardConfig = {
-        title: "Quick Links",
-        showHelp: false,
-        showRefresh: false,
-        helpText: "",
-        onRefresh: () => {},
-        refreshing: false,
-    }
-</script>
-
-<Card config={upstreamProps}>
-    {#if !$ql.length}
-        <p>Go to <a href="/more/settings">Settings</a> to add your quick links</p>
-    {:else}
-        <div class="quick-links">
-            {#each $ql as link}
-                {#if link.length === 3}
-                    <LinkButton text={link.toUpperCase()} link={`/ldb?station=${link.toLowerCase()}`} />
-                {:else if link.length === 4}
-                    <LinkButton text={link.toUpperCase()} link={`/train?headcode=${link.toLowerCase()}`} />
-                {/if}
-            {/each}
-        </div>
-    {/if}
-</Card>
-
-<style>
-    .quick-links {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        width: 90%;
-        margin: auto;
-        padding-top: 5px;
-    }
-</style>

src/lib/ldb/staff/staff-ldb.svelte

@@ -41,12 +41,6 @@
         errorDetail.message = data.obMsg || "An unknown error occoured";
         throw new Error("Unable to Fetch Data");
     }
-
-    // Add additional margin if AlertBox is displayed
-    let generatedMarginTop = "10px";
-    $: if (nrcc.length) {
-        generatedMarginTop = "50px";
-    }
 </script>
 
 {#key detail}
@@ -59,7 +53,7 @@
     <Loading />
 {:then data}
     {#if data}
-        <p class="generatedTime" style="margin-top: {generatedMarginTop};">Updated: {new Date(data.generatedAt).toLocaleTimeString()}</p>
+        <p class="generatedTime">Updated: {new Date(data.generatedAt).toLocaleTimeString()}</p>
         {#if data.trainServices?.length}
             <TableGenerator services={data.trainServices} click={showDetail} />
         {/if}

src/routes/test/+page.svelte

@@ -2,7 +2,6 @@
     import type { LookupCardConfig } from "$lib/cards/Card.types";
     import LookupCard from "$lib/cards/LookupCard.svelte";
     import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
-    import QuickLinkCard from "$lib/cards/QuickLinkCard.svelte";
 
     let LookupConfig: LookupCardConfig = {
         title: "Live Arr/Dep Boards",
@@ -30,4 +29,3 @@
 <LookupCard config={LookupConfig} />
 <LookupCard config={TimetableConfig} />
 <NearToMeCard />
-<QuickLinkCard />