From 09113fec2f5605f43f7ac24c29a1d04ea8ae925f Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Sat, 4 May 2024 23:26:08 +0200
Subject: [PATCH] fix layout on project setup

- fix text when open `login page` in a browser
- remove `name` from Toggle. We didn't use it
- fields layout updated
---
 app/src/lib/components/Login.svelte           | 32 ++++----
 .../lib/components/ProjectNameLabel.svelte    |  4 +-
 .../lib/components/ProjectSetupTarget.svelte  | 79 ++++++++++++-------
 app/src/lib/components/SetupFeature.svelte    | 20 ++++-
 app/src/lib/components/Toggle.svelte          |  3 -
 5 files changed, 87 insertions(+), 51 deletions(-)

diff --git a/app/src/lib/components/Login.svelte b/app/src/lib/components/Login.svelte
index 59d3b1465..ede067c2c 100644
--- a/app/src/lib/components/Login.svelte
+++ b/app/src/lib/components/Login.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
 	import Button from './Button.svelte';
+	import Link from './Link.svelte';
 	import { showError } from '$lib/notifications/toasts';
 	import { UserService, type LoginToken } from '$lib/stores/user';
 	import { getContext } from '$lib/utils/context';
-	import { openExternalUrl } from '$lib/utils/url';
 
 	const userService = getContext(UserService);
 	const user = userService.user;
 
-	export let minimal = false;
 	export let wide = false;
 
 	let signUpOrLoginLoading = false;
@@ -26,19 +25,18 @@
 		}}>Log out</Button
 	>
 {:else if token}
-	{#if minimal}
+	<p class="helper-text text-base-body-12">
 		Your browser should have been opened. Please log into your GitButler account there.
-	{:else}
-		<div class="text-light-700">
-			Your browser should have been opened. Please log into your GitButler account there.
-		</div>
-		<p>
-			If you were not redirected automatically, you can
-			<button class="underline" on:click={() => token && openExternalUrl(token.url)}>
-				Click here
-			</button>
-		</p>
-	{/if}
+		{#if token}
+			If you were not redirected automatically, open <Link
+				target="_blank"
+				rel="noreferrer"
+				href={token.url}
+			>
+				this link
+			</Link>
+		{/if}
+	</p>
 {:else}
 	<div>
 		<Button
@@ -64,3 +62,9 @@
 		</Button>
 	</div>
 {/if}
+
+<style>
+	.helper-text {
+		color: var(--clr-text-2);
+	}
+</style>
diff --git a/app/src/lib/components/ProjectNameLabel.svelte b/app/src/lib/components/ProjectNameLabel.svelte
index 65b90991d..3d54422f3 100644
--- a/app/src/lib/components/ProjectNameLabel.svelte
+++ b/app/src/lib/components/ProjectNameLabel.svelte
@@ -15,10 +15,8 @@
 		align-self: flex-start;
 		display: flex;
 		align-items: center;
-		gap: var(--size-4);
-		padding: var(--size-2) var(--size-4) var(--size-2) var(--size-2);
+		gap: var(--size-6);
 		border-radius: var(--radius-s);
-		background: oklch(from var(--clr-scale-ntrl-30) l c h / 0.08);
 		color: var(--clr-scale-ntrl-50);
 	}
 </style>
diff --git a/app/src/lib/components/ProjectSetupTarget.svelte b/app/src/lib/components/ProjectSetupTarget.svelte
index 14fb8e877..b1a22b28f 100644
--- a/app/src/lib/components/ProjectSetupTarget.svelte
+++ b/app/src/lib/components/ProjectSetupTarget.svelte
@@ -86,29 +86,38 @@
 	<div class="project-setup__info">
 		<ProjectNameLabel {projectName} />
 		<h3 class="text-base-body-14 text-bold">Target trunk branch</h3>
-		<p class="text-base-body-12">
-			This is the branch that you consider "production", normally something like "origin/master" or
-			"upstream/main".
-		</p>
 	</div>
-	<Select items={remoteBranches} bind:value={selectedBranch} itemId="name" labelId="name">
-		<SelectItem slot="template" let:item let:selected {selected}>
-			{item.name}
-		</SelectItem>
-	</Select>
-	{#if remotes.length > 1}
-		<p class="text-base-body-12">
-			You have branches from multiple remotes. If you want to specify a push target for creating
-			branches that is different from your production branch, change it here.
-		</p>
-		<Select items={remotes} bind:value={selectedRemote} itemId="name" labelId="name">
-			<SelectItem slot="template" let:item let:selected {selected}>
-				{item.name}
-			</SelectItem>
-		</Select>
-	{/if}
+
+	<div class="project-setup__fields">
+		<div class="project-setup__field-wrap">
+			<Select items={remoteBranches} bind:value={selectedBranch} itemId="name" labelId="name">
+				<SelectItem slot="template" let:item let:selected {selected}>
+					{item.name}
+				</SelectItem>
+			</Select>
+			<p class="project-setup__description-text text-base-body-12">
+				This is the branch that you consider "production", normally something like "origin/master"
+				or "upstream/main".
+			</p>
+		</div>
+
+		{#if remotes.length > 1}
+			<div class="project-setup__field-wrap">
+				<Select items={remotes} bind:value={selectedRemote} itemId="name" labelId="name">
+					<SelectItem slot="template" let:item let:selected {selected}>
+						{item.name}
+					</SelectItem>
+				</Select>
+				<p class="project-setup__description-text text-base-body-12">
+					You have branches from multiple remotes. If you want to specify a push target for creating
+					branches that is different from your production branch, change it here.
+				</p>
+			</div>
+		{/if}
+	</div>
+
 	<div class="card features-wrapper">
-		<SetupFeature>
+		<SetupFeature labelFor="aiGenEnabled">
 			<svelte:fragment slot="icon">
 				<svg
 					width="20"
@@ -147,20 +156,15 @@
 			<svelte:fragment slot="title">GitButler features</svelte:fragment>
 
 			<svelte:fragment slot="body">
-				{#if $user}
-					<label class="project-setup__toggle-label" for="aiGenEnabled"
-						>Enable automatic branch and commit message generation (uses OpenAI's API).</label
-					>
-				{:else}
-					Enable automatic branch and commit message generation (uses OpenAI's API).
-				{/if}
+				Enable automatic creation of branches and automatic generation of commit messages (using
+				OpenAI's API).
 			</svelte:fragment>
 			<svelte:fragment slot="toggle">
 				{#if $user}
 					<Toggle
-						name="aiGenEnabled"
 						bind:this={aiGenCheckbox}
 						checked={$aiGenEnabled}
+						id="aiGenEnabled"
 						on:change={() => {
 							$aiGenEnabled = !$aiGenEnabled;
 							$aiGenAutoBranchNamingEnabled = $aiGenEnabled;
@@ -263,6 +267,23 @@
 		gap: var(--size-12);
 	}
 
+	.project-setup__fields {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-16);
+		padding-bottom: var(--size-10);
+	}
+
+	.project-setup__description-text {
+		color: var(--clr-text-2);
+	}
+
+	.project-setup__field-wrap {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-12);
+	}
+
 	.floating-buttons {
 		display: flex;
 		justify-content: flex-end;
diff --git a/app/src/lib/components/SetupFeature.svelte b/app/src/lib/components/SetupFeature.svelte
index 6124eb09a..4cc837697 100644
--- a/app/src/lib/components/SetupFeature.svelte
+++ b/app/src/lib/components/SetupFeature.svelte
@@ -2,10 +2,20 @@
 	export let disabled = false;
 	export let success = false;
 	export let topBorder = false;
+
+	export let labelFor = '';
+
 	const SLOTS = $$props.$$slots;
 </script>
 
-<div class="setup-feature" class:success class:disabled class:top-border={topBorder}>
+<label
+	for={labelFor}
+	class="setup-feature"
+	class:success
+	class:disabled
+	class:top-border={topBorder}
+	class:clickable={labelFor !== '' && !SLOTS.actions}
+>
 	<div class="setup-feature__icon">
 		<slot name="icon" />
 	</div>
@@ -31,7 +41,7 @@
 			</div>
 		{/if}
 	</div>
-</div>
+</label>
 
 <style lang="postcss">
 	.setup-feature {
@@ -86,7 +96,13 @@
 		line-height: 100%;
 	}
 
+	/* MODIFIERS */
+
 	.top-border {
 		border-top: 1px solid var(--clr-border-2);
 	}
+
+	.clickable {
+		cursor: pointer;
+	}
 </style>
diff --git a/app/src/lib/components/Toggle.svelte b/app/src/lib/components/Toggle.svelte
index 0607e04f7..dc1f44763 100644
--- a/app/src/lib/components/Toggle.svelte
+++ b/app/src/lib/components/Toggle.svelte
@@ -2,8 +2,6 @@
 	import { tooltip } from '$lib/utils/tooltip';
 	import { createEventDispatcher } from 'svelte';
 
-	export let name = '';
-
 	export let small = false;
 	export let disabled = false;
 	export let checked = false;
@@ -26,7 +24,6 @@
 	class="toggle"
 	class:small
 	{value}
-	{name}
 	{id}
 	{disabled}
 	use:tooltip={help}