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

@@ -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}
+		{#if token}
-		<div class="text-light-700">
+			If you were not redirected automatically, open <Link
-			Your browser should have been opened. Please log into your GitButler account there.
+				target="_blank"
-		</div>
+				rel="noreferrer"
-		<p>
+				href={token.url}
-			If you were not redirected automatically, you can
+			>
-			<button class="underline" on:click={() => token && openExternalUrl(token.url)}>
+				this link
-				Click here
+			</Link>
-			</button>
+		{/if}
-		</p>
+	</p>
-	{/if}
 {:else}
 	<div>
 		<Button
@@ -64,3 +62,9 @@
 		</Button>
 	</div>
 {/if}
+
+<style>
+	.helper-text {
+		color: var(--clr-text-2);
+	}
+</style>

app/src/lib/components/ProjectNameLabel.svelte

@@ -15,10 +15,8 @@
 		align-self: flex-start;
 		display: flex;
 		align-items: center;
-		gap: var(--size-4);
+		gap: var(--size-6);
-		padding: var(--size-2) var(--size-4) var(--size-2) var(--size-2);
 		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>

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}>
+	<div class="project-setup__fields">
-			{item.name}
+		<div class="project-setup__field-wrap">
-		</SelectItem>
+			<Select items={remoteBranches} bind:value={selectedBranch} itemId="name" labelId="name">
-	</Select>
+				<SelectItem slot="template" let:item let:selected {selected}>
-	{#if remotes.length > 1}
+					{item.name}
-		<p class="text-base-body-12">
+				</SelectItem>
-			You have branches from multiple remotes. If you want to specify a push target for creating
+			</Select>
-			branches that is different from your production branch, change it here.
+			<p class="project-setup__description-text text-base-body-12">
-		</p>
+				This is the branch that you consider "production", normally something like "origin/master"
-		<Select items={remotes} bind:value={selectedRemote} itemId="name" labelId="name">
+				or "upstream/main".
-			<SelectItem slot="template" let:item let:selected {selected}>
+			</p>
-				{item.name}
+		</div>
-			</SelectItem>
+
-		</Select>
+		{#if remotes.length > 1}
-	{/if}
+			<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}
+				Enable automatic creation of branches and automatic generation of commit messages (using
-					<label class="project-setup__toggle-label" for="aiGenEnabled"
+				OpenAI's API).
-						>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}
 			</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;

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>

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}