Update train detail layout to improve icon placement

src/routes/more/+page.svelte

@@ -5,7 +5,7 @@
   const title = 'More';
 
   const links = [
-    { title: 'Your Data', path: '/more/data', icon: IconUser},
+    { title: 'Your Data', path: '/more/data', icon: IconUser },
     { title: 'Registration', path: '/more/reg', icon: IconUserPlus },
     { title: 'Settings', path: '/more/settings', icon: IconSettings },
     { title: 'Help', path: '/more/help', icon: IconHelp },

src/routes/more/reg/+page.svelte

@@ -57,16 +57,17 @@
   {#if isLoading}
     <Loading />
   {:else if state == 'unreg'}
-  <p>To register, you will need to enter a work email address to receive a confirmation email</p>
-  <p class="bold">Already have a registration code? <a href="/more/reg/submit">enter it here</a></p>
-  <form on:submit={request}>
-    <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
-    <label for="checkbox">
-      I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
-      <input id="checkbox" type="checkbox" required />
-    </label><br />
-    <button type="submit">Submit</button>
-  </form><br>
+    <p>To register, you will need to enter a work email address to receive a confirmation email</p>
+    <p class="bold">Already have a registration code? <a href="/more/reg/submit">enter it here</a></p>
+    <form on:submit={request}>
+      <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
+      <label for="checkbox">
+        I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
+        <input id="checkbox" type="checkbox" required />
+      </label><br />
+      <button type="submit">Submit</button>
+    </form>
+    <br />
     <p class="bold">What do you get?</p>
     <li>Access to Train details</li>
     <li>Access to PIS Codes</li>
@@ -74,7 +75,6 @@
     <li>Non-Public trains on departure boards</li>
     <li>Hidden platform numbers on departure boards</li>
     <li>See up to the next 40 trains departing a station over the next two hours</li>
-
   {:else if state == 'sent'}
     <p>An email has been sent, enter the code in the email to activate your profile.</p>
     <p class="bold"><a href="/more/reg/submit">Ready to enter your code?</a></p>

src/routes/more/reg/submit/+page.svelte

@@ -17,7 +17,6 @@
     { id: '6', value: '' }
   ];
 
-
   function handleInput(index: number, event: KeyboardEvent): void {
     if (event.key === 'Backspace' && index > 0 && inputs[index].value === '') {
       const prevInput = document.getElementById(`input-${index}`);
@@ -35,17 +34,17 @@
   async function handleSubmit() {
     let submitString: string = '';
     for (const input of inputs) {
-        submitString += input.value.toUpperCase();
+      submitString += input.value.toUpperCase();
     }
     console.log(`Code: ${submitString}`);
     const res = await submit(submitString);
-    console.log(`Registration Status: ${res}`)
+    console.log(`Registration Status: ${res}`);
     if (res == 201) {
-        status = "okay"
+      status = 'okay';
     } else if (res == 401) {
-        status = "fail"
+      status = 'fail';
     } else {
-        console.error("Unable to register: ", status)
+      console.error('Unable to register: ', status);
     }
     state = true;
   }
@@ -70,17 +69,16 @@
       return res.status;
     }
   }
-
 </script>
 
 <Header {title} />
 
 {#if state}
-  {#if status == "okay"}
+  {#if status == 'okay'}
     <p class="title-ish">You are now registered</p>
     <p>Your secret key will be stored in your browser.</p>
     <p>If you change browsers, change device or clear your browsing data, you may have to register again.</p>
-  {:else if status == "fail"}
+  {:else if status == 'fail'}
     <p class="title-ish">Your code was not accepted</p>
     <p>The code expires after 1 hour, you can check the code and enter it again or request a <a href="/more/reg">new code</a>.</p>
   {/if}

src/routes/more/versions/+page.svelte

@@ -27,9 +27,9 @@
   <Island>
     <p>
       <Tooltip text="Svelte"><IconBrandSvelte /></Tooltip>
-      <Tooltip text="Javascript"><IconBrandJavascript/></Tooltip>
+      <Tooltip text="Javascript"><IconBrandJavascript /></Tooltip>
       <Tooltip text="Typescript"><IconBrandTypescript /></Tooltip>
-      <br>
+      <br />
       <a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank"
         >Web-app version<br /><span class="data"
           >{version}{#if versionTag}-{versionTag}{/if}</span
@@ -40,25 +40,27 @@
       <Tooltip text="NodeJS"><IconBrandNodejs /></Tooltip>
       <Tooltip text="Javascript"><IconBrandJavascript /></Tooltip>
       <Tooltip text="Typescript"><IconBrandTypescript /></Tooltip>
-      <br>
+      <br />
       <a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || 'Unknown'}</span></a>
     </p>
     <p>
       <Tooltip text="Python"><IconBrandPython /></Tooltip>
-      <br>
+      <br />
       <a class="data" href="https://git.fjla.uk/owlboard/db-manager" target="_blank">DB Manager version<br /><span class="data">{data?.['db-manager'] || 'Unknown'}</span></a>
     </p>
     <p>
       <Tooltip text="Go"><IconBrandGolang /></Tooltip>
-      <br>
+      <br />
       <a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">MQ Client version<br /><span class="data">{data?.['mq-client'] || 'Not installed'}</span></a>
     </p>
   </Island>
 {:catch}
   <Island>
     <p>
-      <IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br>
-      Web-app Version<br /><span class="data">{version}{#if versionTag}-{versionTag}{/if}</span>
+      <IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br />
+      Web-app Version<br /><span class="data"
+        >{version}{#if versionTag}-{versionTag}{/if}</span
+      >
     </p>
     <p>Unable to fetch server application versions</p>
   </Island>

src/routes/pis/+page.svelte

@@ -103,7 +103,7 @@
     <br />
     <button type="submit">Search</button>
   </form>
-<!-- FIND BY PIS CODE NOT WORKING AT PRESENT
+  <!-- FIND BY PIS CODE NOT WORKING AT PRESENT
   <p class="label">Find By PIS Code:</p>
   <form on:submit={findByPis}>
     <input type="number" max="9999" autocomplete="off" placeholder="PIS" bind:value={entryPIS} />