From 657b97f190bbcf7fe6b0b4fa45e7c3829768f04a Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Thu, 22 Sep 2022 09:09:31 +0200
Subject: [PATCH] ui: fix destination view

---
 .../destinations/[id]/_LocalDocker.svelte     |  8 +++-----
 .../destinations/[id]/_RemoteDocker.svelte    | 19 ++++++++++---------
 .../routes/destinations/[id]/__layout.svelte  |  8 ++++++--
 .../[id]/configuration/sshkey.svelte          |  3 ---
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte b/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
index 5251624c8..208593bab 100644
--- a/apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
+++ b/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"
-			>{$t('forms.engine')}</label
-		>
+		<label for="engine">{$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
diff --git a/apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte b/apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte
index 6d375a46f..e9c444e3d 100644
--- a/apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte
+++ b/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>'
 					: ''
diff --git a/apps/ui/src/routes/destinations/[id]/__layout.svelte b/apps/ui/src/routes/destinations/[id]/__layout.svelte
index 735265a5d..475dbc342 100644
--- a/apps/ui/src/routes/destinations/[id]/__layout.svelte
+++ b/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="title">Configurations</div>
+			<div class="flex flex-col items-center justify-center title">
+				{#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" />
diff --git a/apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte b/apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte
index 800153345..1f9e5bbce 100644
--- a/apps/ui/src/routes/destinations/[id]/configuration/sshkey.svelte
+++ b/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}