From ac6970ad409b388b770a82398485a96f1bc2243c Mon Sep 17 00:00:00 2001
From: Kaname <56084970+kaname-png@users.noreply.github.com>
Date: Tue, 6 Sep 2022 19:06:27 +0000
Subject: [PATCH] fix(routes): improve design of git sources page

---
 .../lib/components/CopyPasswordField.svelte   |  2 +-
 .../ui/src/routes/sources/[id]/_Github.svelte | 14 ++++---
 .../ui/src/routes/sources/[id]/_Gitlab.svelte | 41 +++++++++++--------
 3 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/apps/ui/src/lib/components/CopyPasswordField.svelte b/apps/ui/src/lib/components/CopyPasswordField.svelte
index 0a6fba471..f26d1b411 100644
--- a/apps/ui/src/lib/components/CopyPasswordField.svelte
+++ b/apps/ui/src/lib/components/CopyPasswordField.svelte
@@ -14,7 +14,7 @@
 	export let name: string;
 	export let placeholder = '';
 
-	let disabledClass = 'bg-coolback disabled:bg-coolblack';
+	let disabledClass = 'bg-coolback disabled:bg-coolblack w-full';
 	let isHttps = browser && window.location.protocol === 'https:';
 
 	function copyToClipboard() {
diff --git a/apps/ui/src/routes/sources/[id]/_Github.svelte b/apps/ui/src/routes/sources/[id]/_Github.svelte
index e9b229290..9fda431de 100644
--- a/apps/ui/src/routes/sources/[id]/_Github.svelte
+++ b/apps/ui/src/routes/sources/[id]/_Github.svelte
@@ -96,23 +96,25 @@
 			<div class="grid gap-1 lg:grid-flow-col pb-7">
 				<div class="title">General</div>
 				{#if !source.githubAppId}
-					<button class="btn btn-sm bg-sources" type="submit">Save & Redirect to GitHub</button>
+					<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>
+					</div>
 				{/if}
 			</div>
-			<div class="grid grid-flow-row gap-2 px-10">
+			<div class="grid grid-flow-row gap-2 lg: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">Name</label>
-						<input name="name" id="name" required bind:value={source.name} />
+						<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 name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
+					<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 name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
+					<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"
@@ -121,6 +123,7 @@
 						/></label
 					>
 					<input
+						class="w-full"
 						name="customPort"
 						id="customPort"
 						disabled={!selfHosted || source.githubAppId}
@@ -139,6 +142,7 @@
 						>
 					</div>
 					<input
+						class="w-full"
 						name="organization"
 						id="organization"
 						placeholder="eg: coollabsio"
diff --git a/apps/ui/src/routes/sources/[id]/_Gitlab.svelte b/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
index c805bd8be..f354dc50f 100644
--- a/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
+++ b/apps/ui/src/routes/sources/[id]/_Gitlab.svelte
@@ -145,24 +145,26 @@
 
 <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">
+		<div class="flex space-x-1 pb-7 flex-col lg:items-center lg:flex-row">
 			<div class="title">General</div>
-			{#if $appSession.isAdmin}
-				<button type="submit" class="btn btn-sm bg-sources" disabled={loading}
-					>{loading ? $t('forms.saving') : $t('forms.save')}</button
-				>
-				{#if source.gitlabAppId}
-					<button class="btn btn-sm" on:click|preventDefault={changeSettings}
-						>{$t('source.change_app_settings', { name: 'GitLab' })}</button
-					>
-				{:else}
-					<button class="btn btn-sm" on:click|preventDefault|stopPropagation={newApp}
-						>Create new GitLab App manually</button
+			<div class="w-full flex flex-rpw lg:justify-end space-x-2 mt-5 lg:mt-0">
+				{#if $appSession.isAdmin}
+					<button type="submit" class="btn btn-sm bg-sources" disabled={loading}
+						>{loading ? $t('forms.saving') : $t('forms.save')}</button
 					>
+					{#if source.gitlabAppId}
+						<button class="btn btn-sm" on:click|preventDefault={changeSettings}
+							>{$t('source.change_app_settings', { name: 'GitLab' })}</button
+						>
+					{:else}
+						<button class="btn btn-sm" on:click|preventDefault|stopPropagation={newApp}
+							>Create new GitLab App manually</button
+						>
+					{/if}
 				{/if}
-			{/if}
+			</div>
 		</div>
-		<div class="grid grid-flow-row gap-2 px-10">
+		<div class="grid grid-flow-row gap-2 lg:px-10">
 			{#if !source.gitlabAppId}
 				<a
 					href="https://docs.coollabs.io/coolify/sources#how-to-integrate-with-gitlab"
@@ -172,7 +174,7 @@
 				>
 				<div class="grid grid-cols-2 items-center">
 					<label for="type" class="text-base font-bold text-stone-100">Application Type</label>
-					<select name="type" id="type" class="w-96" bind:value={applicationType}>
+					<select name="type" id="type" class="lg:w-96 w-full" bind:value={applicationType}>
 						<option value="user">{$t('source.gitlab.user_owned')}</option>
 						<option value="group">{$t('source.gitlab.group_owned')}</option>
 						{#if source.htmlUrl !== 'https://gitlab.com'}
@@ -185,6 +187,7 @@
 					<div class="grid grid-cols-2 items-center">
 						<label for="groupName" class="text-base font-bold text-stone-100">Group Name</label>
 						<input
+							class="w-full"
 							name="groupName"
 							id="groupName"
 							required
@@ -197,7 +200,7 @@
 			<div class="grid grid-flow-row gap-2">
 				<div class="mt-2 grid 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} />
+					<input class="w-full" name="name" id="name" required bind:value={source.name} />
 				</div>
 			</div>
 			{#if source.gitlabApp.groupName}
@@ -206,6 +209,7 @@
 						>{$t('source.group_name')}</label
 					>
 					<input
+						class="w-full"
 						name="groupName"
 						id="groupName"
 						disabled={source.gitlabAppId}
@@ -218,6 +222,7 @@
 			<div class="grid 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
@@ -229,6 +234,7 @@
 			<div class="grid 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"
 					disabled={source.gitlabAppId}
@@ -245,6 +251,7 @@
 						/></label
 					>
 					<input
+						class="w-full"
 						name="customPort"
 						id="customPort"
 						disabled={!selfHosted}
@@ -264,6 +271,7 @@
 					>
 				</div>
 				<input
+					class="w-full"
 					disabled={source.gitlabAppId}
 					readonly={source.gitlabAppId}
 					on:change={checkOauthId}
@@ -281,6 +289,7 @@
 					>{$t('source.application_id')}</label
 				>
 				<input
+					class="w-full"
 					name="appId"
 					id="appId"
 					disabled={source.gitlabAppId}