Update link URL in QuickLinkCard

src/lib/buttons/LinkButton.svelte

@@ -0,0 +1,34 @@
+<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

@@ -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: 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,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>

src/lib/cards/QuickLinkCard.svelte

@@ -0,0 +1,43 @@
+<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,6 +41,12 @@
         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}
@@ -53,7 +59,7 @@
     <Loading />
 {:then data}
     {#if data}
-        <p class="generatedTime">Updated: {new Date(data.generatedAt).toLocaleTimeString()}</p>
+        <p class="generatedTime" style="margin-top: {generatedMarginTop};">Updated: {new Date(data.generatedAt).toLocaleTimeString()}</p>
         {#if data.trainServices?.length}
             <TableGenerator services={data.trainServices} click={showDetail} />
         {/if}

src/routes/test/+page.svelte

@@ -2,6 +2,7 @@
     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",
@@ -29,3 +30,4 @@
 <LookupCard config={LookupConfig} />
 <LookupCard config={TimetableConfig} />
 <NearToMeCard />
+<QuickLinkCard />