ui: fix destination view

apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte

@@ -160,7 +160,7 @@
 		>
 	</div>
 	<div class="grid gap-2 grid-cols-2 auto-rows-max mt-10 items-center">
-		<label for="name" class="text-base font-bold text-stone-100 w-full">{$t('forms.name')}</label>
+		<label for="name">{$t('forms.name')}</label>
 		<input
 			class="w-full"
 			name="name"
@@ -169,9 +169,7 @@
 			readonly={!$appSession.isAdmin}
 			bind:value={destination.name}
 		/>
-		<label for="engine" class="text-base font-bold text-stone-100 w-full"
+		<label for="engine">{$t('forms.engine')}</label>
-			>{$t('forms.engine')}</label
-		>
 		<CopyPasswordField
 			id="engine"
 			readonly
@@ -180,7 +178,7 @@
 			placeholder="{$t('forms.eg')}: /var/run/docker.sock"
 			value={destination.engine}
 		/>
-		<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
+		<label for="network">{$t('forms.network')}</label>
 		<CopyPasswordField
 			id="network"
 			readonly

apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte

@@ -69,7 +69,7 @@
 		loading.proxy = false;
 	});
 	async function changeProxySetting() {
-		if (!destination.remoteVerified) return
+		if (!destination.remoteVerified) return;
 		loading.proxy = true;
 		if (!cannotDisable) {
 			const isProxyActivated = destination.isCoolifyProxyUsed;
@@ -196,9 +196,10 @@
 		{/if}
 	</div>
 	<div class="grid grid-cols-2 items-center px-10 ">
-		<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
+		<label for="name">{$t('forms.name')}</label>
 		<input
 			name="name"
+			class="w-full"
 			placeholder={$t('forms.name')}
 			disabled={!$appSession.isAdmin}
 			readonly={!$appSession.isAdmin}
@@ -206,7 +207,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
+		<label for="network">{$t('forms.network')}</label>
 		<CopyPasswordField
 			id="network"
 			readonly
@@ -217,7 +218,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="remoteIpAddress" class="text-base font-bold text-stone-100">IP Address</label>
+		<label for="remoteIpAddress">IP Address</label>
 		<CopyPasswordField
 			id="remoteIpAddress"
 			readonly
@@ -227,7 +228,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="remoteUser" class="text-base font-bold text-stone-100">User</label>
+		<label for="remoteUser">User</label>
 		<CopyPasswordField
 			id="remoteUser"
 			readonly
@@ -237,7 +238,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="remotePort" class="text-base font-bold text-stone-100">Port</label>
+		<label for="remotePort">Port</label>
 		<CopyPasswordField
 			id="remotePort"
 			readonly
@@ -247,7 +248,7 @@
 		/>
 	</div>
 	<div class="grid grid-cols-2 items-center px-10">
-		<label for="sshKey" class="text-base font-bold text-stone-100">SSH Key</label>
+		<label for="sshKey">SSH Key</label>
 		<a
 			href={!isDisabled ? `/destinations/${id}/configuration/sshkey?from=/destinations/${id}` : ''}
 			class="no-underline"
@@ -255,7 +256,7 @@
 				value={destination.sshKey.name}
 				readonly
 				id="sshKey"
-				class="cursor-pointer hover:bg-coolgray-500"
+				class="cursor-pointer w-full"
 			/></a
 		>
 	</div>
@@ -267,7 +268,7 @@
 			bind:setting={destination.isCoolifyProxyUsed}
 			on:click={changeProxySetting}
 			title={$t('destination.use_coolify_proxy')}
-			description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.${
+			description={`Install & configure a proxy (based on Traefik) on the destination to allow you to access your applications and services without any manual configuration.${
 				cannotDisable
 					? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
 					: ''

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

@@ -90,8 +90,12 @@
 {#if $page.params.id !== 'new'}
 	<nav class="header lg:flex-row flex-col-reverse">
 		<div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
-			<div class="flex flex-col items-center justify-center">
+			<div class="flex flex-col items-center justify-center title">
-				<div class="title">Configurations</div>
+				{#if $page.url.pathname === `/destinations/${$page.params.id}`}
+					Configurations
+				{:else if $page.url.pathname.startsWith(`/destinations/${$page.params.id}/configuration/sshkey`)}
+					Select a SSH Key
+				{/if}
 			</div>
 		</div>
 		<div class="lg:block hidden flex-1" />

apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte

@@ -38,9 +38,6 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Select a SSH Keys</div>
-</div>
 <div class="flex flex-col justify-center">
 	<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row ">
 		{#if sshKeys.length > 0}