Adjust CSS

src/lib/navigation/nav.svelte

@@ -3,27 +3,31 @@
     {
       title: 'Home',
       path: '/',
-      svgPath: '/images/navigation/home.svg'
+      svgPath: '/images/navigation/home.svg',
+      icon: IconHome
     },
     {
       title: 'PIS Finder',
       path: '/pis/',
-      svgPath: '/images/navigation/info.svg'
+      svgPath: '/images/navigation/info.svg',
+      icon: IconNumbers
     },
     {
       title: 'Menu',
       path: '/more/',
-      svgPath: '/images/navigation/more.svg'
+      svgPath: '/images/navigation/more.svg',
+      icon: IconMenu2
     }
   ];
   import { page } from '$app/stores';
+  import { IconHome, IconMenu2, IconNumbers } from '@tabler/icons-svelte';
 </script>
 
 <footer>
   
   {#each links as item}
     <a href={item.path} class:active={$page.url.pathname == item.path}>
-      <img src={item.svgPath} alt={item.title} />
+      <svelte:component this={item.icon} />
       <br />
       <span>{item.title}</span>
     </a>

src/routes/more/+page.svelte

@@ -1,19 +1,20 @@
 <script>
   import Header from '$lib/navigation/header.svelte';
   import Nav from '$lib/navigation/nav.svelte';
+  import { IconCode, IconHelp, IconInfoCircle, IconLocation, IconMessageCode, IconNumber, IconSettings, IconSpy, IconUser, IconUserPlus, IconVersions } from '@tabler/icons-svelte';
   const title = 'More';
 
   const links = [
-    { title: 'Your Data', path: '/more/data' },
+    { title: 'Your Data', path: '/more/data', icon: IconUser},
-    { title: 'Registration', path: '/more/reg' },
+    { title: 'Registration', path: '/more/reg', icon: IconUserPlus },
-    { title: 'Settings', path: '/more/settings' },
+    { title: 'Settings', path: '/more/settings', icon: IconSettings },
-    { title: 'Help', path: '/more/help' },
+    { title: 'Help', path: '/more/help', icon: IconHelp },
-    { title: 'About', path: '/more/about' },
+    { title: 'About', path: '/more/about', icon: IconInfoCircle },
-    { title: 'Location Reference Code Lookup', path: '/more/corpus' },
+    { title: 'Location Reference Code Lookup', path: '/more/corpus', icon: IconLocation },
-    { title: 'Reason Code Lookup', path: '/more/reasons' },
+    { title: 'Reason Code Lookup', path: '/more/reasons', icon: IconMessageCode },
-    { title: 'Privacy Policy', path: '/more/privacy' },
+    { title: 'Privacy Policy', path: '/more/privacy', icon: IconSpy },
-    { title: 'Component Versions', path: '/more/versions' },
+    { title: 'Component Versions', path: '/more/versions', icon: IconVersions },
-    { title: 'Statistics', path: '/more/statistics' }
+    { title: 'Statistics', path: '/more/statistics', icon: IconNumber }
   ];
 </script>
 
@@ -22,6 +23,7 @@
 {#each links as item}
   <a href={item.path}>
     <div>
+      <svelte:component this={item.icon} />
       <p>{item.title}</p>
     </div>
   </a>
@@ -37,13 +39,19 @@
     border-width: 1px;
     border-style: solid;
     border-left: none;
+    padding-left: 0.5rem;
+    overflow-x: hidden;
     border-right: none;
     height: 50px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
   }
   a {
     text-decoration: none;
     height: 100%;
     vertical-align: middle;
+    overflow-x: hidden;
   }
   p {
     color: white;
@@ -54,6 +62,7 @@
     vertical-align: middle;
     font-weight: 600;
     font-size: 20px;
+    overflow-x: hidden;
   }
   @media (min-width: 600px) {
     p {

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

@@ -6,6 +6,7 @@
   import LargeLogo from '$lib/images/large-logo.svelte';
   import { version, versionTag } from '$lib/stores/version';
   import { getApiUrl } from '$lib/scripts/upstream';
+  import { IconBrandGolang, IconBrandJavascript, IconBrandPython, IconBrandSvelte, IconBrandTypescript, IconFileTypeSql } from '@tabler/icons-svelte';
   const title = 'Versions';
 
   async function getData() {
@@ -24,6 +25,7 @@
 {:then data}
   <Island>
     <p>
+      <IconBrandSvelte />
       <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
@@ -31,19 +33,23 @@
       >
     </p>
     <p>
+      <IconBrandTypescript /><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>
+      <IconBrandPython /><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>
+      <IconBrandGolang /><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>
-      Web-app Version<br /><span class="data">{version}-{versionTag}</span>
+      <IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br>
+      Web-app Version<br /><span class="data">{version}{#if versionTag}-{versionTag}{/if}</span>
     </p>
     <p>Unable to fetch server versions</p>
   </Island>