From 7e6156f5dd3b29f092e8a340d117a591c8fa0fcc Mon Sep 17 00:00:00 2001
From: Kaname <56084970+kaname-png@users.noreply.github.com>
Date: Wed, 7 Sep 2022 01:29:48 +0000
Subject: [PATCH] fix(routes): more ui tweaks

---
 .../[id]/configuration/_BuildPack.svelte      |   2 +-
 .../configuration/_GithubRepositories.svelte  |   4 +-
 .../configuration/_GitlabRepositories.svelte  |   2 +-
 .../configuration/_PublicRepository.svelte    |  65 +++--
 .../[id]/configuration/buildpack.svelte       |   2 +-
 .../[id]/configuration/database.svelte        |   2 +-
 .../[id]/configuration/destination.svelte     |   2 +-
 .../[id]/configuration/repository.svelte      |   2 +-
 .../[id]/configuration/source.svelte          |   6 +-
 .../ui/src/routes/sources/[id]/_Github.svelte | 225 ++++++++----------
 .../ui/src/routes/sources/[id]/_Gitlab.svelte |   6 +-
 11 files changed, 147 insertions(+), 171 deletions(-)

diff --git a/apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte b/apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte
index 89625336b..c7d7ad464 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte
@@ -37,7 +37,7 @@
 	}
 </script>
 
-<form on:submit|preventDefault={() => handleSubmit(buildPack.name)}>
+<form class="lg:pt-32" on:submit|preventDefault={() => handleSubmit(buildPack.name)}>
 	<button
 		type="submit"
 		class="box-selection relative flex text-xl font-bold {buildPack.hoverColor} {foundConfig?.name ===
diff --git a/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte b/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
index 922c2b174..1e232c787 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
@@ -145,14 +145,14 @@
 </script>
 
 {#if repositories.length === 0 && loading.repositories === false}
-	<div class="flex-col text-center">
+	<div class="flex-col text-center lg:pt-32">
 		<div class="pb-4">{$t('application.configuration.no_repositories_configured')}</div>
 		<a href={`/sources/${application.gitSource.id}`}
 			><button>{$t('application.configuration.configure_it_now')}</button></a
 		>
 	</div>
 {:else}
-	<form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center">
+	<form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center lg:pt-32">
 		<div class="flex-col space-y-3 md:space-y-0 space-x-1">
 			<div class="flex-row md:flex gap-4">
 				<div class="custom-select-wrapper">
diff --git a/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte b/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
index 3da8c6415..616f2b793 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
@@ -327,7 +327,7 @@
 	}
 </script>
 
-<form on:submit={handleSubmit}>
+<form on:submit={handleSubmit} lg:pt-32>
 	<div class="flex flex-col space-y-2 px-4 xl:flex-row xl:space-y-0 xl:space-x-2 ">
 		<div class="custom-select-wrapper">
 			<Select
diff --git a/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte b/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
index 7146a66ee..5824cfa19 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
@@ -156,40 +156,39 @@
 	}
 </script>
 
-<div class="mx-auto max-w-5xl">
-	<div class="grid grid-flow-row gap-2 px-10">
-		<div class="flex">
-			<form class="flex" on:submit|preventDefault={loadBranches}>
-				<div class="space-y-4">
-					<input
-						placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
-						bind:value={publicRepositoryLink}
+<div class="mx-auto max-w-5xl lg:pt-32">
+	<form
+		class="flex flex-col lg:flex-row w-full lg:px-32 space-y-5 lg:space-y-0 lg:space-x-5 lg:items-center"
+		on:submit|preventDefault={loadBranches}
+	>
+		<div class="space-y-4 w-full">
+			<input
+				class="w-full"
+				placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
+				bind:value={publicRepositoryLink}
+			/>
+			{#if branchSelectOptions.length > 0}
+				<div class="custom-select-wrapper">
+					<Select
+						placeholder={loading.branches
+							? $t('application.configuration.loading_branches')
+							: !publicRepositoryLink
+							? $t('application.configuration.select_a_repository_first')
+							: $t('application.configuration.select_a_branch')}
+						isWaiting={loading.branches}
+						showIndicator={!!publicRepositoryLink && !loading.branches}
+						id="branches"
+						on:select={saveRepository}
+						items={branchSelectOptions}
+						isDisabled={loading.branches || !!!publicRepositoryLink}
+						isClearable={false}
 					/>
-					{#if branchSelectOptions.length > 0}
-						<div class="custom-select-wrapper">
-							<Select
-								placeholder={loading.branches
-									? $t('application.configuration.loading_branches')
-									: !publicRepositoryLink
-									? $t('application.configuration.select_a_repository_first')
-									: $t('application.configuration.select_a_branch')}
-								isWaiting={loading.branches}
-								showIndicator={!!publicRepositoryLink && !loading.branches}
-								id="branches"
-								on:select={saveRepository}
-								items={branchSelectOptions}
-								isDisabled={loading.branches || !!!publicRepositoryLink}
-								isClearable={false}
-							/>
-						</div>
-					{/if}
 				</div>
-
-				<button class="btn mx-4 bg-orange-600" class:loading={loading.branches} type="submit"
-					>Load Repository</button
-				>
-			</form>
+			{/if}
 		</div>
-	</div>
-	
+
+		<button class="btn bg-orange-600" class:loading={loading.branches} type="submit">
+			Load Repository
+		</button>
+	</form>
 </div>
diff --git a/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte b/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte
index fc83fe6a6..75a7e42ff 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte
@@ -254,7 +254,7 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
+<div class="flex space-x-1 p-6 font-bold lg:pt-32">
 	<div class="mr-4 text-2xl tracking-tight">
 		{$t('application.configuration.configure_build_pack')}
 	</div>
diff --git a/apps/ui/src/routes/applications/[id]/configuration/database.svelte b/apps/ui/src/routes/applications/[id]/configuration/database.svelte
index 919682b00..74fe899eb 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/database.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/database.svelte
@@ -63,7 +63,7 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
+<div class="flex space-x-1 p-6 font-bold lg:pt-32">
 	<div class="mr-4 text-2xl tracking-tight">Select a Database</div>
 </div>
 
diff --git a/apps/ui/src/routes/applications/[id]/configuration/destination.svelte b/apps/ui/src/routes/applications/[id]/configuration/destination.svelte
index 2f0efe2d3..6c8c50eb1 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/destination.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/destination.svelte
@@ -63,7 +63,7 @@
 	});
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
+<div class="flex space-x-1 p-6 font-bold lg:pt-32">
 	<div class="mr-4 text-2xl tracking-tight">
 		{$t('application.configuration.configure_destination')}
 	</div>
diff --git a/apps/ui/src/routes/applications/[id]/configuration/repository.svelte b/apps/ui/src/routes/applications/[id]/configuration/repository.svelte
index 002e1f74c..e44d04537 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/repository.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/repository.svelte
@@ -36,7 +36,7 @@
 	import GitlabRepositories from './_GitlabRepositories.svelte';
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
+<div class="flex space-x-1 p-6 font-bold lg:pt-32">
 	<div class="mr-4 text-2xl tracking-tight">
 		{$t('application.configuration.select_a_repository_project')}
 	</div>
diff --git a/apps/ui/src/routes/applications/[id]/configuration/source.svelte b/apps/ui/src/routes/applications/[id]/configuration/source.svelte
index d1252c74f..35b263834 100644
--- a/apps/ui/src/routes/applications/[id]/configuration/source.svelte
+++ b/apps/ui/src/routes/applications/[id]/configuration/source.svelte
@@ -68,12 +68,12 @@
 	}
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
+<div class="flex space-x-1 p-6 font-bold lg:pt-32">
 	<div class="mr-4 text-2xl tracking-tight">
 		{$t('application.configuration.select_a_git_source')}
 	</div>
 </div>
-<div class="max-w-5xl mx-auto ">
+<div class="max-w-5xl mx-auto px-5">
 	<div class="title pb-8">Git App</div>
 	<div class="flex flex-wrap justify-center">
 		{#if !filteredSources || ownSources.length === 0}
@@ -192,7 +192,7 @@
 			</div>
 		{/if}
 	</div>
-	<div class="flex items-center">
+	<div class="flex flex-row items-center">
 		<div class="title py-4">Public Repository</div>
 		<DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" />
 	</div>
diff --git a/apps/ui/src/routes/sources/[id]/_Github.svelte b/apps/ui/src/routes/sources/[id]/_Github.svelte
index cc0292e90..1bbbd8039 100644
--- a/apps/ui/src/routes/sources/[id]/_Github.svelte
+++ b/apps/ui/src/routes/sources/[id]/_Github.svelte
@@ -90,146 +90,123 @@
 	}
 </script>
 
-<div class="mx-auto max-w-4xl px-6">
+<div class="mx-auto max-w-4xl lg:px-6 px-3">
 	{#if !source.githubAppId}
 		<form on:submit|preventDefault={newGithubApp} class="py-4">
 			<div class="grid gap-1 lg:grid-flow-col pb-7">
 				<h1 class="title">General</h1>
 				{#if !source.githubAppId}
 					<div class="w-full flex flex-rpw justify-end">
-						<button class="btn btn-sm bg-sources mt-5 w-full lg:w-fit" type="submit">Save & Redirect to GitHub</button>
+						<button class="btn btn-sm bg-sources mt-5 w-full lg:w-fit" type="submit"
+							>Save & Redirect to GitHub</button
+						>
 					</div>
 				{/if}
 			</div>
-			<div class="grid grid-flow-row gap-2">
-				<div class="grid grid-flow-row gap-2">
-					<div class="mt-2 grid lg:grid-cols-2 items-center">
-						<label for="name" class="text-base font-bold text-stone-100">Name</label>
-						<input class="w-full" name="name" id="name" required bind:value={source.name} />
-					</div>
-				</div>
-				<div class="grid lg:grid-cols-2 items-center">
-					<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
-					<input class="w-full" name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
-				</div>
-				<div class="grid lg:grid-cols-2 items-center">
-					<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
-					<input class="w-full" name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
-				</div>
-				<div class="grid lg:grid-cols-2 items-center">
-					<label for="customPort" class="text-base font-bold text-stone-100"
-						>Custom SSH Port <Explainer
-							explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
-						/></label
-					>
-					<input
-						class="w-full"
-						name="customPort"
-						id="customPort"
-						disabled={!selfHosted || source.githubAppId}
-						readonly={!selfHosted || source.githubAppId}
-						required
-						value={source.customPort}
-					/>
-				</div>
-				<div class="grid lg:grid-cols-2">
-					<div class="flex flex-col">
-						<label for="organization" class="pt-2 text-base font-bold text-stone-100"
-							>Organization
-							<Explainer
-								explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
-							/></label
-						>
-					</div>
-					<input
-						class="w-full"
-						name="organization"
-						id="organization"
-						placeholder="eg: coollabsio"
-						bind:value={source.organization}
-					/>
-				</div>
+			<div class="grid gap-4 grid-cols-2 auto-rows-max">
+				<label for="name" class="text-base font-bold text-stone-100">Name</label>
+				<input class="w-full" name="name" id="name" required bind:value={source.name} />
+				<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
+				<input class="w-full" name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
+				<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
+				<input class="w-full" name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
+				<label for="customPort" class="text-base font-bold text-stone-100"
+					>Custom SSH Port <Explainer
+						explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
+					/></label
+				>
+				<input
+					class="w-full"
+					name="customPort"
+					id="customPort"
+					disabled={!selfHosted || source.githubAppId}
+					readonly={!selfHosted || source.githubAppId}
+					required
+					value={source.customPort}
+				/>
+				<label for="organization" class="pt-2 text-base font-bold text-stone-100"
+					>Organization
+					<Explainer
+						explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
+					/></label
+				>
+				<input
+					class="w-full"
+					name="organization"
+					id="organization"
+					placeholder="eg: coollabsio"
+					bind:value={source.organization}
+				/>
 			</div>
 		</form>
 	{:else if source.githubApp?.installationId}
 		<form on:submit|preventDefault={handleSubmit} class="py-4">
-			<div class="flex md:flex-row space-y-2 md:space-y-0 space-x-0 md:space-x-2 flex-col pb-5">
-				<div class="title">{$t('general')}</div>
-
+			<div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
+				<h1 class="title">{$t('general')}</h1>
 				{#if $appSession.isAdmin}
-					<button class="btn btn-sm bg-sources" type="submit" disabled={loading}
-						>{loading ? 'Saving...' : 'Save'}</button
-					>
-					<a
-						class="btn btn-sm"
-						href={`${source.htmlUrl}/${
-							source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
-						}/${source.githubApp.name}/installations/new`}
-						>{$t('source.change_app_settings', { name: 'GitHub' })}</a
-					>
+					<div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-4 lg:space-y-0 w-full">
+						<button class="btn btn-sm bg-sources" type="submit" disabled={loading}
+							>{loading ? 'Saving...' : 'Save'}</button
+						>
+						<a
+							class="btn btn-sm"
+							href={`${source.htmlUrl}/${
+								source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
+							}/${source.githubApp.name}/installations/new`}
+							>{$t('source.change_app_settings', { name: 'GitHub' })}</a
+						>
+					</div>
 				{/if}
 			</div>
-			<div class="grid grid-flow-row gap-2 px-10">
-				<div class="grid grid-flow-row gap-2">
-					<div class="mt-2 grid lg:grid-cols-2 items-center">
-						<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
-						<input name="name" id="name" required bind:value={source.name} />
-					</div>
-				</div>
-				<div class="grid lg:grid-cols-2 items-center">
-					<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
-					<input
-						name="htmlUrl"
-						id="htmlUrl"
-						disabled={source.githubAppId}
-						readonly={source.githubAppId}
-						required
-						bind:value={source.htmlUrl}
-					/>
-				</div>
-				<div class="grid lg:grid-cols-2 items-center">
-					<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
-					<input
-						name="apiUrl"
-						id="apiUrl"
-						required
-						disabled={source.githubAppId}
-						readonly={source.githubAppId}
-						bind:value={source.apiUrl}
-					/>
-				</div>
-				{#if selfHosted}
-					<div class="grid lg:grid-cols-2 items-center">
-						<label for="customPort" class="text-base font-bold text-stone-100"
-							>Custom SSH Port <Explainer
-								explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
-							/></label
-						>
-						<input
-							name="customPort"
-							id="customPort"
-							disabled={!selfHosted}
-							readonly={!selfHosted}
-							required
-							value={source.customPort}
-						/>
-					</div>
-				{/if}
-				<div class="grid lg:grid-cols-2">
-					<div class="flex flex-col">
-						<label for="organization" class="pt-2 text-base font-bold text-stone-100"
-							>Organization</label
-						>
-					</div>
-					<input
-						readonly
-						disabled
-						name="organization"
-						id="organization"
-						placeholder="eg: coollabsio"
-						bind:value={source.organization}
-					/>
-				</div>
+			<div class="grid gap-4 grid-cols-2 auto-rows-max mt-4">
+				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
+				<input class="w-full" name="name" id="name" required bind:value={source.name} />
+				<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
+				<input
+					class="w-full"
+					name="htmlUrl"
+					id="htmlUrl"
+					disabled={source.githubAppId}
+					readonly={source.githubAppId}
+					required
+					bind:value={source.htmlUrl}
+				/>
+				<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
+				<input
+					class="w-full"
+					name="apiUrl"
+					id="apiUrl"
+					required
+					disabled={source.githubAppId}
+					readonly={source.githubAppId}
+					bind:value={source.apiUrl}
+				/>
+				<label for="customPort" class="text-base font-bold text-stone-100"
+					>Custom SSH Port <Explainer
+						explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
+					/></label
+				>
+				<input
+					class="w-full"
+					name="customPort"
+					id="customPort"
+					disabled={!selfHosted}
+					readonly={!selfHosted}
+					required
+					value={source.customPort}
+				/>
+				<label for="organization" class="pt-2 text-base font-bold text-stone-100"
+					>Organization</label
+				>
+				<input
+					class="w-full"
+					readonly
+					disabled
+					name="organization"
+					id="organization"
+					placeholder="eg: coollabsio"
+					bind:value={source.organization}
+				/>
 			</div>
 		</form>
 	{:else}
diff --git a/apps/ui/src/routes/sources/[id]/_Gitlab.svelte b/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
index f354dc50f..eea955f4a 100644
--- a/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
+++ b/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
@@ -145,9 +145,9 @@
 
 <div class="mx-auto max-w-4xl px-6">
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
-		<div class="flex space-x-1 pb-7 flex-col lg:items-center lg:flex-row">
-			<div class="title">General</div>
-			<div class="w-full flex flex-rpw lg:justify-end space-x-2 mt-5 lg:mt-0">
+		<div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
+			<h1 class="title">General</h1>
+			<div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-4 lg:space-y-0 w-full">
 				{#if $appSession.isAdmin}
 					<button type="submit" class="btn btn-sm bg-sources" disabled={loading}
 						>{loading ? $t('forms.saving') : $t('forms.save')}</button