fix icons

apps/ui/src/routes/services/[id]/_ServiceLinks.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
 	import DocLink from '$lib/components/DocLink.svelte';
+	import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
 	export let service: any;
 	export let template: any;
 	export let linkToDocs: boolean = false;
-	import * as Icons from '$lib/components/svg/services';
 	const name: any = service.type && service.type[0].toUpperCase() + service.type.substring(1);
 </script>
 
 {#if linkToDocs}
 	<DocLink url={template[service.id].documentation} text={`Documentation`} isExternal={true} />
 {:else}
-	<svelte:component this={Icons[name]} />
+	<ServiceIcons type={service.type} />
 {/if}
-

apps/ui/src/routes/services/[id]/__layout.svelte

@@ -410,7 +410,7 @@
 </div>
 
 <div
-	class="mx-auto max-w-screen-2xl px-0 lg:px-2 grid grid-cols-1"
+	class="mx-auto max-w-screen-2xl px-0 lg:px-10 grid grid-cols-1"
 	class:lg:grid-cols-4={!$page.url.pathname.startsWith(`/services/${id}/configuration/`)}
 >
 	{#if !$page.url.pathname.startsWith(`/services/${id}/configuration/`)}

apps/ui/src/routes/services/[id]/configuration/type.svelte

@@ -58,6 +58,20 @@
 		search = '';
 		filteredServices = services;
 	}
+	function sortMe(data: any) {
+		return data.sort((a, b) => {
+			let fa = a.name.toLowerCase(),
+				fb = b.name.toLowerCase();
+
+			if (fa < fb) {
+				return -1;
+			}
+			if (fa > fb) {
+				return 1;
+			}
+			return 0;
+		});
+	}
 </script>
 
 <div class="container lg:mx-auto lg:p-0 px-8 pt-5">
@@ -89,18 +103,20 @@
 		/>
 	</div>
 </div>
-<div class="container lg:mx-auto lg:pt-20 lg:p-0 px-8 pt-20">
-	<div class="flex flex-wrap justify-center  gap-8">
-		{#each filteredServices as service}
+<div class=" lg:pt-20 lg:p-0 px-8 pt-20">
+	<div class="grid grid-flow-rows grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+		{#each sortMe(filteredServices) as service}
 			{#key service.name}
-				<div class="p-2">
-					<form on:submit|preventDefault={() => handleSubmit(service)}>
-						<button type="submit" class="box-selection relative text-xl font-bold hover:bg-primary">
-							<ServiceIcons type={service.type} />
-							{service.name}
-						</button>
-					</form>
-				</div>
+				<button
+					on:click={() => handleSubmit(service)}
+					class="box-selection relative text-xl font-bold hover:bg-primary h-24"
+				>
+					<ServiceIcons type={service.type} />
+					{service.name}
+					{#if service.subname}
+						<div class="text-sm font-mono">{service.subname}</div>
+					{/if}
+				</button>
 			{/key}
 		{/each}
 	</div>

apps/ui/src/routes/settings/_Menu.svelte

@@ -3,7 +3,7 @@
 	import { appSession } from '$lib/store';
 </script>
 
-<ul class="menu border bg-coolgray-100 border-coolgray-200 rounded-box p-2 space-y-2">
+<ul class="menu border bg-coolgray-100 border-coolgray-200 rounded p-2 space-y-2">
 	{#if $appSession.teamId === '0'}
 		<li class="menu-title">
 			<span>General</span>