tons of updates

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

@@ -81,7 +81,7 @@
 			{#each destinations as destination}
 				<div class="p-2">
 					<form on:submit|preventDefault={() => handleSubmit(destination.id)}>
-						<button type="submit" class="box-selection hover:bg-sky-700 font-bold">
+						<button type="submit" class="box-selection hover:bg-primary font-bold">
 							<div class="font-bold text-xl text-center truncate">{destination.name}</div>
 							<div class="text-center truncate">{destination.network}</div>
 						</button>

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

@@ -25,30 +25,29 @@
 </script>
 
 <script lang="ts">
-	export let types: any;
-
+	export let services: any;
+	
 	let search = '';
-	let filteredTypes = types;
+	let filteredServices = services;
 
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { get, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
-	import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
 
-	async function handleSubmit(type: any) {
+	async function handleSubmit(service: any) {
 		try {
-			await post(`/services/${id}/configuration/type`, { type });
+			await post(`/services/${id}/configuration/type`, { ...service });
 			return await goto(from || `/services/${id}`);
 		} catch (error) {
 			return errorNotification(error);
 		}
 	}
 	function doSearch() {
-		filteredTypes = types.filter(
+		filteredServices = services.filter(
 			(type: any) =>
 				type.name.toLowerCase().includes(search.toLowerCase()) ||
 				type.labels.some((label: string) => label.toLowerCase().includes(search.toLowerCase()))
@@ -56,7 +55,7 @@
 	}
 	function cleanupSearch() {
 		search = '';
-		filteredTypes = types;
+		filteredServices = services;
 	}
 </script>
 
@@ -89,16 +88,16 @@
 	</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 filteredTypes as type}
-		<div class="p-2">
-			<form on:submit|preventDefault={() => handleSubmit(type.name)}>
-				<button type="submit" class="box-selection relative text-xl font-bold hover:bg-pink-600">
-					<ServiceIcons type={type.name} />
-					{type.fancyName}
-				</button>
-			</form>
-		</div>
-	{/each}
-</div>
+	<div class="flex flex-wrap justify-center  gap-8">
+		{#each filteredServices as service}
+			<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.name} /> -->
+						{service.displayName}
+					</button>
+				</form>
+			</div>
+		{/each}
+	</div>
 </div>