From 7a8fe6d1523c87458ebfeda9b2f45b70008635ff Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Thu, 22 Sep 2022 09:47:33 +0200
Subject: [PATCH] ui: settings view

---
 apps/ui/src/routes/settings/_Menu.svelte      |  2 +-
 apps/ui/src/routes/settings/__layout.svelte   |  6 +-
 .../src/routes/settings/certificates.svelte   | 20 ++---
 apps/ui/src/routes/settings/coolify.svelte    | 87 +++++++++----------
 apps/ui/src/routes/settings/ssh.svelte        | 14 +--
 5 files changed, 61 insertions(+), 68 deletions(-)

diff --git a/apps/ui/src/routes/settings/_Menu.svelte b/apps/ui/src/routes/settings/_Menu.svelte
index a4d2ece77..3c5bf4c32 100644
--- a/apps/ui/src/routes/settings/_Menu.svelte
+++ b/apps/ui/src/routes/settings/_Menu.svelte
@@ -3,7 +3,7 @@
 	import { appSession } from '$lib/store';
 </script>
 
-<ul class="menu bg-coolgray-200 rounded lg:w-52">
+<ul class="menu bg-coolgray-200 rounded">
 	{#if $appSession.teamId === '0'}
 		<li
 			class="hover:bg-coollabs duration-150"
diff --git a/apps/ui/src/routes/settings/__layout.svelte b/apps/ui/src/routes/settings/__layout.svelte
index b17c9d2be..256d264da 100644
--- a/apps/ui/src/routes/settings/__layout.svelte
+++ b/apps/ui/src/routes/settings/__layout.svelte
@@ -20,12 +20,12 @@
 	};
 </script>
 
-<div class="flex flex-col lg:flex-row ">
-	<nav class="header flex flex-col w-full lg:w-52">
+<div class="mx-auto max-w-6xl px-6 grid grid-cols-1 lg:grid-cols-4">
+	<nav class="header flex flex-col">
 		<div class="title pb-10">Settings</div>
 		<Menu />
 	</nav>
-	<div class="pt-0 lg:pt-24 px-5 lg:px-0 mx-auto">
+	<div class="pt-0 lg:pt-24 px-5 lg:px-0 col-span-0 lg:col-span-3">
 		<slot />
 	</div>
 </div>
diff --git a/apps/ui/src/routes/settings/certificates.svelte b/apps/ui/src/routes/settings/certificates.svelte
index 036a4ec7b..d1b97851c 100644
--- a/apps/ui/src/routes/settings/certificates.svelte
+++ b/apps/ui/src/routes/settings/certificates.svelte
@@ -56,16 +56,16 @@
 </script>
 
 <div class="title font-bold pb-3">SSL Certificates</div>
-<div class="w-full lg:w-[50em]">
+<div class="w-full">
 	{#if certificates.length === 0}
 		<div class="text-sm">No SSL Certificate found</div>
 		<label
 			for="my-modal"
-			class="btn btn-sm bg-settings text-black mt-6"
+			class="btn btn-primary mt-6"
 			on:click={() => (isModalActive = true)}>Add SSL Certificate</label
 		>
 	{:else}
-		<div class="mx-auto w-full p-6 bg-coolgray-100 rounded border-coolgray-300 border ">
+		<div class="mx-auto w-full p-6 bg-coolgray-200 rounded shadow-xl">
 			<table class="table w-full">
 				<thead>
 					<tr>
@@ -80,7 +80,7 @@
 							<td>{cert.commonName}</td>
 							<td>{cert.createdAt}</td>
 							<td
-								><button on:click={() => deleteCertificate(cert.id)} class="btn btn-sm bg-error"
+								><button on:click={() => deleteCertificate(cert.id)} class="btn btn-error"
 									>Delete</button
 								></td
 							>
@@ -88,10 +88,8 @@
 					{/each}
 				</tbody>
 			</table>
-			<label
-				for="my-modal"
-				class="btn btn-sm bg-settings text-black mt-6"
-				on:click={() => (isModalActive = true)}>Add SSL Certificate</label
+			<label for="my-modal" class="btn  btn-primary mt-6" on:click={() => (isModalActive = true)}
+				>Add SSL Certificate</label
 			>
 		</div>
 	{/if}
@@ -100,7 +98,7 @@
 {#if isModalActive}
 	<input type="checkbox" id="my-modal" class="modal-toggle" />
 	<div class="modal modal-bottom sm:modal-middle ">
-		<div class="modal-box rounded bg-coolgray-300  max-w-2xl">
+		<div class="modal-box rounded bg-coolgray-300 max-w-2xl">
 			<h3 class="font-bold text-lg">Add a new SSL Certificate</h3>
 			<p class="py-4">
 				SSL Certificates are used to secure your domain and allow you to use HTTPS. <br /><br />Once
@@ -131,10 +129,10 @@
 						/>
 					</div>
 					<label for="my-modal">
-						<button type="submit" class="btn btn-sm bg-settings text-black mt-4">Upload</button
+						<button type="submit" class="btn btn-primary mt-4">Upload</button
 						></label
 					>
-					<button on:click={() => (isModalActive = false)} type="button" class="btn btn-sm"
+					<button on:click={() => (isModalActive = false)} type="button" class="btn"
 						>Cancel</button
 					>
 				</form>
diff --git a/apps/ui/src/routes/settings/coolify.svelte b/apps/ui/src/routes/settings/coolify.svelte
index ec6fa4cca..ae751dae4 100644
--- a/apps/ui/src/routes/settings/coolify.svelte
+++ b/apps/ui/src/routes/settings/coolify.svelte
@@ -198,23 +198,17 @@
 
 <div class="title font-bold pb-3">Coolify Settings</div>
 
-<div class="mx-auto w-full p-4 bg-coolgray-100 rounded border-coolgray-300 border">
+<div class="mx-auto w-full p-6 bg-coolgray-200 rounded shadow-xl">
 	<div class="flex lg:flex-row flex-col">
-		<!-- <Upload />
-		{#if certificates.length > 0}
-			{#each certificates as cert}
-				<div>{cert.commonName}</div>
-			{/each}
-		{/if} -->
 		<form on:submit|preventDefault={handleSubmit}>
-			<div class="grid grid-flow-row gap-2 lg:px-10 px-2 pr-5">
+			<div class="grid grid-flow-row gap-2  px-4 pr-5">
 				<div class="grid grid-cols-2 items-center">
 					<div>
 						{$t('application.url_fqdn')}
 						<Explainer position="dropdown-bottom" explanation={$t('setting.ssl_explainer')} />
 					</div>
 					<input
-						class="w-full"
+						class="w-full bg-coolgray-100"
 						bind:value={fqdn}
 						readonly={!$appSession.isAdmin || isFqdnSet}
 						disabled={!$appSession.isAdmin || isFqdnSet}
@@ -229,13 +223,13 @@
 						<div class="flex-col space-y-2 pt-4 text-center">
 							{#if isNonWWWDomainOK}
 								<button
-									class="btn btn-sm bg-success"
+									class="btn bg-success"
 									on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
 									>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
 								>
 							{:else}
 								<button
-									class="btn btn-sm bg-error"
+									class="btn btn-error"
 									on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
 									>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
 								>
@@ -243,14 +237,14 @@
 							{#if dualCerts}
 								{#if isWWWDomainOK}
 									<button
-										class="btn btn-sm bg-success"
+										class="btn bg-success"
 										on:click|preventDefault={() =>
 											isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
 										>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
 									>
 								{:else}
 									<button
-										class="btn btn-sm bg-error"
+										class="btn btn-error"
 										on:click|preventDefault={() =>
 											isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
 										>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
@@ -279,7 +273,7 @@
 
 					<div class="flex flex-row items-center space-x-2">
 						<input
-							class=" w-full px-2"
+							class="w-full px-2 bg-coolgray-100"
 							type="number"
 							bind:value={minPort}
 							min="1024"
@@ -287,7 +281,7 @@
 						/>
 						<p>-</p>
 						<input
-							class="w-full px-2"
+							class="w-full px-2 bg-coolgray-100"
 							type="number"
 							bind:value={maxPort}
 							min={minPort}
@@ -311,9 +305,13 @@
 						/>
 					</div>
 
-					<input class="w-full" placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} />
+					<input
+						class="w-full bg-coolgray-100"
+						placeholder="1.1.1.1,8.8.8.8"
+						bind:value={DNSServers}
+					/>
 				</div>
-			
+
 				<div class="grid grid-cols-2 items-center">
 					<Setting
 						id="isRegistrationEnabled"
@@ -345,38 +343,35 @@
 				{/if}
 			</div>
 			<div
-			class="flex flex-col lg:flex-row flex-wrap items-center space-x-3 justify-center lg:justify-start lg:py-4 px-4 pb-4 lg:pb-4"
-		>
-			<div class="flex lg:flex-row lg:space-x-4 flex-col space-y-2 lg:space-y-0 px-6">
-				<button
-					class="btn btn-sm bg-settings text-black"
-					type="submit"
-					class:bg-orange-600={forceSave}
-					class:hover:bg-orange-400={forceSave}
-					class:loading={loading.save}
-					disabled={loading.save}
-					>{loading.save
-						? $t('forms.saving')
-						: forceSave
-						? $t('forms.confirm_continue')
-						: $t('forms.save')}</button
-				>
-
-				{#if isFqdnSet}
+				class="flex flex-col lg:flex-row flex-wrap items-center space-x-3 justify-center lg:justify-start pt-8"
+			>
+				<div class="flex lg:flex-row lg:space-x-4 flex-col space-y-2 lg:space-y-0">
 					<button
-						on:click|preventDefault={removeFqdn}
-						disabled={loading.remove}
-						class="btn btn-sm"
-						>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button
+						class="btn btn-primary"
+						type="submit"
+						class:bg-orange-600={forceSave}
+						class:hover:bg-orange-400={forceSave}
+						class:loading={loading.save}
+						disabled={loading.save}
+						>{loading.save
+							? $t('forms.saving')
+							: forceSave
+							? $t('forms.confirm_continue')
+							: $t('forms.save')}</button
 					>
-				{/if}
-				<button
-					on:click={restartCoolify}
-					class:loading={loading.restart}
-					class="btn btn-sm bg-red-600 hover:bg-red-500">Restart Coolify</button
-				>
+
+					{#if isFqdnSet}
+						<button on:click|preventDefault={removeFqdn} disabled={loading.remove} class="btn"
+							>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button
+						>
+					{/if}
+					<button
+						on:click={restartCoolify}
+						class:loading={loading.restart}
+						class="btn bg-red-600 hover:bg-red-700">Restart Coolify</button
+					>
+				</div>
 			</div>
-		</div>	
 		</form>
 	</div>
 </div>
diff --git a/apps/ui/src/routes/settings/ssh.svelte b/apps/ui/src/routes/settings/ssh.svelte
index 5eda80f4e..ff398f408 100644
--- a/apps/ui/src/routes/settings/ssh.svelte
+++ b/apps/ui/src/routes/settings/ssh.svelte
@@ -58,17 +58,17 @@
 </script>
 
 <div class="title font-bold pb-3">SSH Keys</div>
-<div class="w-full lg:w-[50em]">
+<div class="w-full">
 	{#if sshKeys.length === 0}
 		<div class="text-sm">No SSH keys found</div>
 		<label
 				for="my-modal"
-				class="btn btn-sm bg-settings text-black mt-6"
+				class="btn btn-primary mt-6"
 				on:click={() => (isModalActive = true)}>Add SSH Key</label
 			>
 	{:else}
 		<div
-			class="mx-auto w-full p-6 bg-coolgray-100 rounded border-coolgray-300 border "
+			class="mx-auto w-full p-6 bg-coolgray-200 rounded shadow-xl"
 		>
 			<table class="table w-full">
 				<thead>
@@ -84,7 +84,7 @@
 							<td>{key.name}</td>
 							<td>{key.createdAt}</td>
 							<td
-								><button on:click={() => deleteSSHKey(key.id)} class="btn btn-sm bg-error"
+								><button on:click={() => deleteSSHKey(key.id)} class="btn btn-error"
 									>Delete</button
 								></td
 							>
@@ -94,7 +94,7 @@
 			</table>
 			<label
 				for="my-modal"
-				class="btn btn-sm bg-settings text-black mt-6"
+				class="btn btn-primary mt-6"
 				on:click={() => (isModalActive = true)}>Add SSH Key</label
 			>
 		</div>
@@ -132,10 +132,10 @@
 						rows={15}
 					/>
 					<label for="my-modal">
-						<button type="submit" class="btn btn-sm bg-settings text-black mt-4">Save</button
+						<button type="submit" class="btn btn-primary mt-4">Save</button
 						></label
 					>
-					<button on:click={() => (isModalActive = false)} type="button" class="btn btn-sm"
+					<button on:click={() => (isModalActive = false)} type="button" class="btn"
 						>Cancel</button
 					>
 				</form>