From 1523d5f8cff19ce337fa51e0b45f370db094298c Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Fri, 12 Jan 2024 01:24:59 +0100
Subject: [PATCH] =?UTF-8?q?-=20added=20imgThemed=20=E2=80=94=20for=20image?=
 =?UTF-8?q?s=20that=20have=20dark=20and=20light=20themes=20-=20styles=20up?=
 =?UTF-8?q?dated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/lib/components/AccountLink.svelte     |  24 ++-
 .../lib/components/DecorativeSplitView.svelte | 196 +++++++++++++-----
 .../src/lib/components/ImgThemed.svelte       |  27 +++
 .../routes/[projectId]/ProjectSetup.svelte    |  48 +++--
 4 files changed, 223 insertions(+), 72 deletions(-)
 create mode 100644 gitbutler-ui/src/lib/components/ImgThemed.svelte

diff --git a/gitbutler-ui/src/lib/components/AccountLink.svelte b/gitbutler-ui/src/lib/components/AccountLink.svelte
index bc73a5f19..e93f106fb 100644
--- a/gitbutler-ui/src/lib/components/AccountLink.svelte
+++ b/gitbutler-ui/src/lib/components/AccountLink.svelte
@@ -30,6 +30,8 @@
 	{/if}
 </button>
 
+<!-- REMOVE IF IT'S NOT NEEDED -->
+
 <style lang="postcss">
 	.btn {
 		display: flex;
@@ -42,9 +44,29 @@
 		border-radius: var(--radius-m);
 
 		color: var(--clr-theme-scale-ntrl-50);
+		transition:
+			background-color var(--transition-fast),
+			color var(--transition-fast),
+			filter var(--transition-fast);
 
 		&.pop {
-			background: var(--clr-theme-scale-pop-90);
+			color: var(--clr-theme-scale-pop-10);
+			background: color-mix(
+				in srgb,
+				var(--clr-theme-scale-pop-80) 70%,
+				var(--clr-theme-scale-ntrl-100)
+			);
+			/* filter: brightness(1.05); */
+
+			&:hover {
+				color: var(--clr-theme-scale-pop-10);
+				background: color-mix(
+					in srgb,
+					var(--clr-theme-scale-pop-80) 40%,
+					var(--clr-theme-scale-ntrl-100)
+				);
+				/* filter: brightness(1.1); */
+			}
 		}
 
 		&:hover {
diff --git a/gitbutler-ui/src/lib/components/DecorativeSplitView.svelte b/gitbutler-ui/src/lib/components/DecorativeSplitView.svelte
index 2ccad95d7..7867a5232 100644
--- a/gitbutler-ui/src/lib/components/DecorativeSplitView.svelte
+++ b/gitbutler-ui/src/lib/components/DecorativeSplitView.svelte
@@ -1,101 +1,187 @@
 <script lang="ts">
 	import type { User } from '$lib/backend/cloud';
 	import AccountLink from './AccountLink.svelte';
-	import IconLink from './IconLink.svelte';
+	import Icon from '$lib/icons/Icon.svelte';
+	import ImgThemed from './ImgThemed.svelte';
 
 	export let user: User | undefined;
+	export let imgSet: { light: string; dark: string };
 </script>
 
 <div class="decorative-split-view">
-	<div class="decorative-split-view__left">
-		<slot />
+	<div class="left-side">
+		<div class="left-side__content">
+			<slot />
+		</div>
 	</div>
-	<div class="decorative-split-view__right">
-		<div class="links text-semibold">
-			<IconLink
-				icon="docs"
-				href="https://docs.gitbutler.com/features/virtual-branches/branch-lanes"
-			>
-				GitButler Docs
-			</IconLink>
-			<!-- <a href="/">
-				<Icon name="video" opacity="0.5" /> Watch Tutorial
-			</a> -->
-		</div>
-		<div class="account-button">
-			<AccountLink {user} pop />
-		</div>
-		<div class="wordmark">
-			<!-- prettier-ignore -->
-			<svg width="110" height="24" viewBox="0 0 110 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<g opacity="0.6">
-				<path d="M9.81268 24C3.23275 24 0 18.8286 0 12.2571C0 5.34286 3.63327 0.228572 9.66964 0.228572C11.7008 0.228572 13.3029 0.771429 14.8192 2.05714C15.2483 2.45714 15.5916 2.34286 15.6488 1.8L15.7918 0.485715H16.4784L16.8504 8.57143H16.1924C15.3913 3.97143 13.4173 1.48572 10.156 1.48572C5.83611 1.48572 3.49023 5.88571 3.49023 11.8857C3.49023 17.9714 5.80751 22.6286 10.2418 22.6286C12.3874 22.6286 13.8751 21.4286 14.5903 20.3143V14.6857C14.5903 12.9429 13.9037 12.4286 9.24052 12.4286V11.7429H19.3679V12.4286C17.823 12.4286 17.5942 12.8571 17.5942 14.6857V20.1714C15.9635 22.4857 13.2171 24 9.81268 24Z" fill="#0E7C76"/>
-				<path d="M23.5928 5.08571C22.5057 5.08571 21.7332 4.34286 21.7332 3.34286C21.7332 2.31429 22.5057 1.57143 23.5928 1.57143C24.6513 1.57143 25.4237 2.31429 25.4237 3.34286C25.4237 4.34286 24.6513 5.08571 23.5928 5.08571ZM25.1948 8.25714V20.6C25.1948 22.4286 25.4809 22.8571 27.226 22.8571V23.5429H20.4172V22.8571C22.1624 22.8571 22.4484 22.4286 22.4484 20.6V11.8C22.4484 9.88572 22.4198 9.48571 20.7605 10.1714L20.5031 9.51429L24.7085 7.82857L25.1948 8.25714Z" fill="#0E7C76"/>
-				<path d="M36.2741 17.1429H37.0752C37.0752 21.6 36.1883 24 33.3847 24C31.1532 24 29.9803 22.6571 29.9803 18.6571V9.57143H27.9777V8.51429C30.0661 8.45714 31.3821 6.91429 31.6682 4.22857H32.6981V8.4H36.1311V9.57143H32.7553V17.9143C32.7553 20.4571 33.0128 22.1429 34.3574 22.1429C35.6447 22.1429 36.2741 20.5429 36.2741 17.1429Z" fill="#0E7C76"/>
-				<path d="M46.737 23.5429H38.0686V22.8571C40.7292 22.8571 41.1011 22.3429 41.1011 20.6V3.62857C41.1011 1.88572 40.7292 1.37143 38.0686 1.37143V0.685716H47.0231C51.1999 0.685716 53.9749 2.51429 53.9749 6.34286C53.9749 9.51429 51.8865 11.3714 49.1115 11.7143V11.8571C52.6875 12.0857 55.0334 14.3143 55.0334 17.4C55.0334 21.9143 51.3143 23.5429 46.737 23.5429ZM44.2766 2.74286V11.1429C44.9919 11.2571 45.7357 11.2571 46.4223 11.2571C48.7682 11.2571 50.828 9.77143 50.828 6.45714C50.828 3.2 48.7396 1.85714 46.4795 1.85714C45.9359 1.85714 45.3352 1.88572 44.8488 2C44.4483 2.08571 44.2766 2.34286 44.2766 2.74286ZM44.2766 12.5429V21.4857C44.2766 22.1714 45.0205 22.3714 46.3651 22.3714C49.0543 22.3714 51.8293 21.3714 51.8293 17.4286C51.8293 13.4857 48.6537 12.4286 46.4509 12.4286C45.7071 12.4286 44.9919 12.4286 44.2766 12.5429Z" fill="#0E7C76"/>
-				<path d="M65.8487 24L65.2766 23.5143L65.2193 21.0857L65.1335 21.0571C64.1608 22.6 62.7876 24 60.7564 24C58.7825 24 57.6381 22.4 57.6381 19.8857V11.8286C57.6381 9.97143 57.5523 9.62857 55.8072 10.1714L55.6069 9.54286L60.0126 8.11429L60.4131 8.48571V19.6C60.4131 21.2857 60.9281 22.0857 62.0152 22.0857C63.1595 22.0857 64.3039 21.1143 65.2193 19.8857V11.8286C65.2193 9.97143 65.1621 9.62857 63.3884 10.1714L63.1881 9.54286L67.6225 8.11429L67.9944 8.48571V20.1429C67.9944 22.0571 68.0516 22.4286 69.8253 21.7714L70.0828 22.4286L65.8487 24Z" fill="#0E7C76"/>
-				<path d="M78.6838 17.1429H79.4849C79.4849 21.6 78.598 24 75.7944 24C73.5629 24 72.39 22.6571 72.39 18.6571V9.57143H70.3874V8.51429C72.4758 8.45714 73.7918 6.91429 74.0779 4.22857H75.1078V8.4H78.5408V9.57143H75.165V17.9143C75.165 20.4571 75.4225 22.1429 76.7671 22.1429C78.0545 22.1429 78.6838 20.5429 78.6838 17.1429Z" fill="#0E7C76"/>
-				<path d="M85.0338 0.4V20.6C85.0338 22.4286 85.2913 22.8571 87.0364 22.8571V23.5429H80.2276V22.8571C81.9727 22.8571 82.2588 22.4286 82.2588 20.6V4.08571C82.2588 2.25714 82.2588 1.88572 80.5423 2.74286L80.2562 2.11429L84.6047 0L85.0338 0.4Z" fill="#0E7C76"/>
-				<path d="M97.8709 17.4286H98.5575C97.9567 22.0286 96.0114 24 93.3222 24C90.0894 24 88.0582 20.9429 88.0582 16.2286C88.0582 11.7143 90.0608 7.88571 93.4652 7.88571C96.8124 7.88571 98.3859 11.0286 98.3859 15.2H90.8333V15.2571C90.8333 19.1429 92.0348 21.8857 94.4093 21.8857C95.6967 21.8857 97.1843 20.8857 97.8709 17.4286ZM93.4652 9.08571C91.7487 9.08571 91.0335 11.1714 90.8619 14.0286H95.6395C95.6395 11.2857 95.1531 9.08571 93.4652 9.08571Z" fill="#0E7C76"/>
-				<path d="M108.455 7.88571C109.456 7.88571 110 8.45714 110 9.4C110 10.5143 109.342 11.2286 108.598 11.2286C108.083 11.2286 107.854 11.0286 107.482 10.6286C107.111 10.2571 106.968 10.1429 106.624 10.1429C105.966 10.1429 105.194 11.0857 104.593 12.8286V20.4286C104.593 22.3714 105.022 22.8286 107.625 22.8286V23.5429H99.9012V22.8571C101.561 22.8571 101.847 22.4286 101.847 20.6V11.8C101.847 9.88572 101.847 9.48571 100.13 10.2L99.844 9.54286L102.133 8.62857L104.078 7.82857L104.593 8.25714V11H104.679C105.48 9.48571 106.882 7.88571 108.455 7.88571Z" fill="#0E7C76"/>
-				</g>
-			</svg>
+
+	<div class="right-side">
+		<div class="right-side-wrapper">
+			<div class="right-side__header">
+				<div class="account-button">
+					<AccountLink {user} pop />
+				</div>
+			</div>
+
+			<div class="right-side__img-wrapper">
+				<ImgThemed {imgSet} />
+			</div>
+
+			<div class="right-side__footer">
+				<div class="right-side__links">
+					<a
+						class="right-side__link"
+						href="https://docs.gitbutler.com/features/virtual-branches/branch-lanes"
+						target="_blank"
+					>
+						<div class="right-side__link__icon"><Icon name="docs" /></div>
+
+						<span class="text-base-14 text-semibold">GitButler Docs</span>
+					</a>
+					<a class="right-side__link" href="https://www.youtube.com/@gitbutlerapp" target="_blank">
+						<div class="right-side__link__icon"><Icon name="video" /></div>
+
+						<span class="text-base-14 text-semibold">Watch tutorials</span>
+					</a>
+				</div>
+
+				<!-- prettier-ignore -->
+				<svg class="wordmark" width="110" height="24" viewBox="0 0 110 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<g opacity="0.6">
+					<path d="M9.81268 24C3.23275 24 0 18.8286 0 12.2571C0 5.34286 3.63327 0.228572 9.66964 0.228572C11.7008 0.228572 13.3029 0.771429 14.8192 2.05714C15.2483 2.45714 15.5916 2.34286 15.6488 1.8L15.7918 0.485715H16.4784L16.8504 8.57143H16.1924C15.3913 3.97143 13.4173 1.48572 10.156 1.48572C5.83611 1.48572 3.49023 5.88571 3.49023 11.8857C3.49023 17.9714 5.80751 22.6286 10.2418 22.6286C12.3874 22.6286 13.8751 21.4286 14.5903 20.3143V14.6857C14.5903 12.9429 13.9037 12.4286 9.24052 12.4286V11.7429H19.3679V12.4286C17.823 12.4286 17.5942 12.8571 17.5942 14.6857V20.1714C15.9635 22.4857 13.2171 24 9.81268 24Z"/>
+					<path d="M23.5928 5.08571C22.5057 5.08571 21.7332 4.34286 21.7332 3.34286C21.7332 2.31429 22.5057 1.57143 23.5928 1.57143C24.6513 1.57143 25.4237 2.31429 25.4237 3.34286C25.4237 4.34286 24.6513 5.08571 23.5928 5.08571ZM25.1948 8.25714V20.6C25.1948 22.4286 25.4809 22.8571 27.226 22.8571V23.5429H20.4172V22.8571C22.1624 22.8571 22.4484 22.4286 22.4484 20.6V11.8C22.4484 9.88572 22.4198 9.48571 20.7605 10.1714L20.5031 9.51429L24.7085 7.82857L25.1948 8.25714Z"/>
+					<path d="M36.2741 17.1429H37.0752C37.0752 21.6 36.1883 24 33.3847 24C31.1532 24 29.9803 22.6571 29.9803 18.6571V9.57143H27.9777V8.51429C30.0661 8.45714 31.3821 6.91429 31.6682 4.22857H32.6981V8.4H36.1311V9.57143H32.7553V17.9143C32.7553 20.4571 33.0128 22.1429 34.3574 22.1429C35.6447 22.1429 36.2741 20.5429 36.2741 17.1429Z"/>
+					<path d="M46.737 23.5429H38.0686V22.8571C40.7292 22.8571 41.1011 22.3429 41.1011 20.6V3.62857C41.1011 1.88572 40.7292 1.37143 38.0686 1.37143V0.685716H47.0231C51.1999 0.685716 53.9749 2.51429 53.9749 6.34286C53.9749 9.51429 51.8865 11.3714 49.1115 11.7143V11.8571C52.6875 12.0857 55.0334 14.3143 55.0334 17.4C55.0334 21.9143 51.3143 23.5429 46.737 23.5429ZM44.2766 2.74286V11.1429C44.9919 11.2571 45.7357 11.2571 46.4223 11.2571C48.7682 11.2571 50.828 9.77143 50.828 6.45714C50.828 3.2 48.7396 1.85714 46.4795 1.85714C45.9359 1.85714 45.3352 1.88572 44.8488 2C44.4483 2.08571 44.2766 2.34286 44.2766 2.74286ZM44.2766 12.5429V21.4857C44.2766 22.1714 45.0205 22.3714 46.3651 22.3714C49.0543 22.3714 51.8293 21.3714 51.8293 17.4286C51.8293 13.4857 48.6537 12.4286 46.4509 12.4286C45.7071 12.4286 44.9919 12.4286 44.2766 12.5429Z"/>
+					<path d="M65.8487 24L65.2766 23.5143L65.2193 21.0857L65.1335 21.0571C64.1608 22.6 62.7876 24 60.7564 24C58.7825 24 57.6381 22.4 57.6381 19.8857V11.8286C57.6381 9.97143 57.5523 9.62857 55.8072 10.1714L55.6069 9.54286L60.0126 8.11429L60.4131 8.48571V19.6C60.4131 21.2857 60.9281 22.0857 62.0152 22.0857C63.1595 22.0857 64.3039 21.1143 65.2193 19.8857V11.8286C65.2193 9.97143 65.1621 9.62857 63.3884 10.1714L63.1881 9.54286L67.6225 8.11429L67.9944 8.48571V20.1429C67.9944 22.0571 68.0516 22.4286 69.8253 21.7714L70.0828 22.4286L65.8487 24Z"/>
+					<path d="M78.6838 17.1429H79.4849C79.4849 21.6 78.598 24 75.7944 24C73.5629 24 72.39 22.6571 72.39 18.6571V9.57143H70.3874V8.51429C72.4758 8.45714 73.7918 6.91429 74.0779 4.22857H75.1078V8.4H78.5408V9.57143H75.165V17.9143C75.165 20.4571 75.4225 22.1429 76.7671 22.1429C78.0545 22.1429 78.6838 20.5429 78.6838 17.1429Z"/>
+					<path d="M85.0338 0.4V20.6C85.0338 22.4286 85.2913 22.8571 87.0364 22.8571V23.5429H80.2276V22.8571C81.9727 22.8571 82.2588 22.4286 82.2588 20.6V4.08571C82.2588 2.25714 82.2588 1.88572 80.5423 2.74286L80.2562 2.11429L84.6047 0L85.0338 0.4Z"/>
+					<path d="M97.8709 17.4286H98.5575C97.9567 22.0286 96.0114 24 93.3222 24C90.0894 24 88.0582 20.9429 88.0582 16.2286C88.0582 11.7143 90.0608 7.88571 93.4652 7.88571C96.8124 7.88571 98.3859 11.0286 98.3859 15.2H90.8333V15.2571C90.8333 19.1429 92.0348 21.8857 94.4093 21.8857C95.6967 21.8857 97.1843 20.8857 97.8709 17.4286ZM93.4652 9.08571C91.7487 9.08571 91.0335 11.1714 90.8619 14.0286H95.6395C95.6395 11.2857 95.1531 9.08571 93.4652 9.08571Z"/>
+					<path d="M108.455 7.88571C109.456 7.88571 110 8.45714 110 9.4C110 10.5143 109.342 11.2286 108.598 11.2286C108.083 11.2286 107.854 11.0286 107.482 10.6286C107.111 10.2571 106.968 10.1429 106.624 10.1429C105.966 10.1429 105.194 11.0857 104.593 12.8286V20.4286C104.593 22.3714 105.022 22.8286 107.625 22.8286V23.5429H99.9012V22.8571C101.561 22.8571 101.847 22.4286 101.847 20.6V11.8C101.847 9.88572 101.847 9.48571 100.13 10.2L99.844 9.54286L102.133 8.62857L104.078 7.82857L104.593 8.25714V11H104.679C105.48 9.48571 106.882 7.88571 108.455 7.88571Z"/>
+					</g>
+				</svg>
+			</div>
 		</div>
 	</div>
 </div>
 
 <style lang="postcss">
 	.decorative-split-view {
+		cursor: default;
+		user-select: none;
 		display: flex;
 		flex-grow: 1;
 	}
-	.decorative-split-view__left,
-	.decorative-split-view__right {
+	.left-side,
+	.right-side {
 		display: flex;
 		flex-direction: column;
-		flex-basis: 50%;
 		position: relative;
 	}
 
-	.decorative-split-view__left {
+	.left-side {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: var(--space-32);
+		padding: var(--space-32) calc(var(--space-40) * 2);
+		flex: 1.3;
 		background-color: var(--clr-theme-container-light);
 	}
 
-	.decorative-split-view__right {
-		background-color: var(--clr-theme-scale-pop-80);
-		background-image: url(/images/setup-art-light.svg);
-		background-repeat: no-repeat;
-		background-position: 50% 50%;
+	.left-side__content {
+		width: 100%;
+		max-width: 40rem;
+		display: flex;
+		flex-direction: column;
 	}
 
-	:global(.dark) .decorative-split-view__right {
-		background-image: url(/images/setup-art-dark.svg);
+	.right-side {
+		flex: 1;
+		min-width: 560px;
+		background-color: var(--clr-theme-container-light);
+		padding: var(--space-20) var(--space-20) var(--space-20) 0;
+	}
+
+	.right-side-wrapper {
+		overflow: hidden;
+		--splitview-back-color: var(--clr-core-pop-75);
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		background-color: var(--splitview-back-color);
+		border-radius: var(--space-8);
+	}
+
+	.right-side__header {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: var(--space-20);
+	}
+
+	.right-side__footer {
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		padding: var(--space-32);
 	}
 
 	.wordmark {
-		position: absolute;
-		right: var(--space-32);
-		bottom: var(--space-32);
+		fill: var(--clr-theme-scale-pop-30);
 	}
 
 	.account-button {
-		position: absolute;
 		right: var(--space-32);
 		top: var(--space-32);
 	}
 
-	.links {
-		color: var(--clr-theme-scale-pop-20);
+	/* links */
 
-		position: absolute;
+	.right-side__links {
+		color: var(--clr-theme-scale-pop-20);
 		display: flex;
 		flex-direction: column;
-		left: var(--space-32);
-		bottom: var(--space-32);
-		gap: var(--space-16);
+		gap: var(--space-6);
+	}
+
+	.right-side__link {
+		display: flex;
+		align-items: center;
+		width: fit-content;
+		gap: var(--space-12);
+		border-radius: var(--radius-m);
+		padding: var(--space-4) var(--space-8) var(--space-4) var(--space-6);
+		transition: background-color var(--transition-fast);
+	}
+
+	.right-side__link__icon {
+		opacity: 0.7;
+	}
+
+	.right-side__img-wrapper {
+		height: 100%;
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.right-side__img_dark {
+		display: none;
+	}
+
+	/* global */
+
+	:global(.dark .decorative-split-view .right-side-wrapper) {
+		--splitview-back-color: var(--clr-core-pop-25);
+	}
+
+	:global(.dark .decorative-split-view) {
+		& .right-side__img_dark {
+			display: block;
+		}
+
+		& .right-side__img_light {
+			display: none;
+		}
 	}
 </style>
diff --git a/gitbutler-ui/src/lib/components/ImgThemed.svelte b/gitbutler-ui/src/lib/components/ImgThemed.svelte
new file mode 100644
index 000000000..d3c60f147
--- /dev/null
+++ b/gitbutler-ui/src/lib/components/ImgThemed.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	export let imgSet: { light: string; dark: string };
+
+	let imgSrc = '';
+
+	const updateImage = () => {
+		const colorScheme = getComputedStyle(document.documentElement)
+			.getPropertyValue('color-scheme')
+			.trim();
+		imgSrc = colorScheme === 'dark' ? imgSet.dark : imgSet.light;
+	};
+
+	let observer: MutationObserver;
+
+	onMount(() => {
+		updateImage();
+		observer = new MutationObserver(updateImage);
+		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
+	});
+
+	onDestroy(() => {
+		observer.disconnect();
+	});
+</script>
+
+<img src={imgSrc} alt="Decorative Art" />
diff --git a/gitbutler-ui/src/routes/[projectId]/ProjectSetup.svelte b/gitbutler-ui/src/routes/[projectId]/ProjectSetup.svelte
index b1f591fe8..ab22ff9d1 100644
--- a/gitbutler-ui/src/routes/[projectId]/ProjectSetup.svelte
+++ b/gitbutler-ui/src/routes/[projectId]/ProjectSetup.svelte
@@ -33,7 +33,13 @@
 	}
 </script>
 
-<DecorativeSplitView user={$user$}>
+<DecorativeSplitView
+	user={$user$}
+	imgSet={{
+		light: '/images/setup-art-light.svg',
+		dark: '/images/setup-art-dark.svg'
+	}}
+>
 	<div class="project-setup">
 		{#await remoteBranches}
 			<p>loading...</p>
@@ -83,14 +89,20 @@
 								xmlns="http://www.w3.org/2000/svg"
 							>
 								<path
-									fill-rule="evenodd"
-									clip-rule="evenodd"
-									d="M0 9.84C0 6.25297 0 4.45946 0.74216 3.10948C1.29067 2.11174 2.11174 1.29067 3.10948 0.74216C4.45946 0 6.25297 0 9.84 0H10.16C13.747 0 15.5405 0 16.8905 0.74216C17.8883 1.29067 18.7093 2.11174 19.2578 3.10948C20 4.45946 20 6.25297 20 9.84V10.16C20 13.747 20 15.5405 19.2578 16.8905C18.7093 17.8883 17.8883 18.7093 16.8905 19.2578C15.5405 20 13.747 20 10.16 20H9.84C6.25297 20 4.45946 20 3.10948 19.2578C2.11174 18.7093 1.29067 17.8883 0.74216 16.8905C0 15.5405 0 13.747 0 10.16V9.84ZM3.18635 11.7585C2.93788 11.6757 2.93788 11.3243 3.18635 11.2415L5.68497 10.4086C6.49875 10.1373 7.13732 9.49875 7.40858 8.68497L8.24146 6.18635C8.32428 5.93788 8.67572 5.93788 8.75854 6.18635L9.59142 8.68497C9.86268 9.49875 10.5012 10.1373 11.315 10.4086L13.8137 11.2415C14.0621 11.3243 14.0621 11.6757 13.8137 11.7585L11.315 12.5914C10.5012 12.8627 9.86268 13.5012 9.59142 14.315L8.75854 16.8137C8.67572 17.0621 8.32428 17.0621 8.24146 16.8137L7.40858 14.315C7.13732 13.5012 6.49875 12.8627 5.68497 12.5914L3.18635 11.7585ZM11.1016 5.85898C10.9661 5.90415 10.9661 6.09585 11.1016 6.14102L12.4645 6.59532C12.9084 6.74328 13.2567 7.09159 13.4047 7.53547L13.859 8.89836C13.9042 9.03388 14.0958 9.03388 14.141 8.89836L14.5953 7.53547C14.7433 7.09159 15.0916 6.74328 15.5355 6.59532L16.8984 6.14102C17.0339 6.09585 17.0339 5.90415 16.8984 5.85898L15.5355 5.40468C15.0916 5.25672 14.7433 4.90841 14.5953 4.46453L14.141 3.10164C14.0958 2.96612 13.9042 2.96612 13.859 3.10164L13.4047 4.46453C13.2567 4.90841 12.9084 5.25672 12.4645 5.40468L11.1016 5.85898Z"
-									fill="url(#paint0_linear_484_17972)"
+									d="M0 9.84C0 6.25297 0 4.45946 0.74216 3.10948C1.29067 2.11174 2.11174 1.29067 3.10948 0.74216C4.45946 0 6.25297 0 9.84 0H10.16C13.747 0 15.5405 0 16.8905 0.74216C17.8883 1.29067 18.7093 2.11174 19.2578 3.10948C20 4.45946 20 6.25297 20 9.84V10.16C20 13.747 20 15.5405 19.2578 16.8905C18.7093 17.8883 17.8883 18.7093 16.8905 19.2578C15.5405 20 13.747 20 10.16 20H9.84C6.25297 20 4.45946 20 3.10948 19.2578C2.11174 18.7093 1.29067 17.8883 0.74216 16.8905C0 15.5405 0 13.747 0 10.16V9.84Z"
+									fill="url(#paint0_linear_743_30630)"
+								/>
+								<path
+									d="M3.18635 11.7585C2.93788 11.6757 2.93788 11.3243 3.18635 11.2415L5.68497 10.4086C6.49875 10.1373 7.13732 9.49875 7.40858 8.68497L8.24146 6.18635C8.32428 5.93788 8.67572 5.93788 8.75854 6.18635L9.59142 8.68497C9.86268 9.49875 10.5012 10.1373 11.315 10.4086L13.8137 11.2415C14.0621 11.3243 14.0621 11.6757 13.8137 11.7585L11.315 12.5914C10.5012 12.8627 9.86268 13.5012 9.59142 14.315L8.75854 16.8137C8.67572 17.0621 8.32428 17.0621 8.24146 16.8137L7.40858 14.315C7.13732 13.5012 6.49875 12.8627 5.68497 12.5914L3.18635 11.7585Z"
+									fill="white"
+								/>
+								<path
+									d="M11.1016 6.14102C10.9661 6.09585 10.9661 5.90415 11.1016 5.85898L12.4645 5.40468C12.9084 5.25672 13.2567 4.90841 13.4047 4.46453L13.859 3.10164C13.9042 2.96612 14.0958 2.96612 14.141 3.10164L14.5953 4.46453C14.7433 4.90841 15.0916 5.25672 15.5355 5.40468L16.8984 5.85898C17.0339 5.90415 17.0339 6.09585 16.8984 6.14102L15.5355 6.59532C15.0916 6.74328 14.7433 7.09159 14.5953 7.53547L14.141 8.89836C14.0958 9.03388 13.9042 9.03388 13.859 8.89836L13.4047 7.53547C13.2567 7.09159 12.9084 6.74328 12.4645 6.59532L11.1016 6.14102Z"
+									fill="white"
 								/>
 								<defs>
 									<linearGradient
-										id="paint0_linear_484_17972"
+										id="paint0_linear_743_30630"
 										x1="3.5"
 										y1="4"
 										x2="16"
@@ -135,14 +147,13 @@
 								width="20"
 								height="20"
 								viewBox="0 0 20 20"
-								fill="none"
 								xmlns="http://www.w3.org/2000/svg"
+								fill="var(--clr-theme-scale-ntrl-0)"
 							>
 								<path
 									fill-rule="evenodd"
 									clip-rule="evenodd"
 									d="M10.0083 0C4.47396 0 0 4.58331 0 10.2535C0 14.786 2.86662 18.6226 6.84338 19.9805C7.34058 20.0826 7.5227 19.7599 7.5227 19.4885C7.5227 19.2508 7.50631 18.436 7.50631 17.587C4.72225 18.1983 4.14249 16.3647 4.14249 16.3647C3.69508 15.1764 3.03215 14.871 3.03215 14.871C2.12092 14.2429 3.09852 14.2429 3.09852 14.2429C4.1093 14.3108 4.63969 15.2954 4.63969 15.2954C5.53432 16.857 6.97592 16.4158 7.55588 16.1441C7.63865 15.482 7.90394 15.0237 8.18563 14.7691C5.96514 14.5314 3.62891 13.6487 3.62891 9.71017C3.62891 8.58976 4.02634 7.67309 4.65608 6.96018C4.55672 6.7056 4.20866 5.65289 4.75564 4.24394C4.75564 4.24394 5.60069 3.97228 7.5061 5.29644C8.32188 5.07199 9.16317 4.95782 10.0083 4.95685C10.8533 4.95685 11.7148 5.07581 12.5102 5.29644C14.4159 3.97228 15.2609 4.24394 15.2609 4.24394C15.8079 5.65289 15.4596 6.7056 15.3603 6.96018C16.0066 7.67309 16.3876 8.58976 16.3876 9.71017C16.3876 13.6487 14.0514 14.5143 11.8143 14.7691C12.179 15.0916 12.4936 15.7026 12.4936 16.6703C12.4936 18.0453 12.4773 19.1489 12.4773 19.4883C12.4773 19.7599 12.6596 20.0826 13.1566 19.9808C17.1333 18.6224 20 14.786 20 10.2535C20.0163 4.58331 15.526 0 10.0083 0Z"
-									fill="black"
 								/>
 							</svg>
 						</svelte:fragment>
@@ -177,20 +188,25 @@
 						</svelte:fragment>
 					</SetupFeature>
 				</div>
+
+				<div class="floating-buttons">
+					<Button kind="outlined" color="neutral" on:click={() => goto('/')}>Back</Button>
+					<Button
+						{loading}
+						on:click={onSetTargetClick}
+						icon="chevron-right-small"
+						id="set-base-branch">Let's go!</Button
+					>
+				</div>
 			{/if}
 		{:catch}
 			<p>Something has gone wrong...</p>
 		{/await}
 	</div>
-	<div class="floating-buttons">
-		<Button kind="outlined" on:click={() => goto('/')}>Back</Button>
-		<Button {loading} on:click={onSetTargetClick} id="set-base-branch">Let's go!</Button>
-	</div>
 </DecorativeSplitView>
 
 <style lang="postcss">
 	.project-setup {
-		max-width: 30rem;
 		display: flex;
 		flex-direction: column;
 		gap: var(--space-20);
@@ -198,15 +214,15 @@
 
 	.project-setup__info {
 		display: flex;
+
 		flex-direction: column;
 		gap: var(--space-12);
 	}
 
 	.floating-buttons {
 		display: flex;
-		position: absolute;
-		right: var(--space-32);
-		bottom: var(--space-32);
+		justify-content: flex-end;
+		width: 100%;
 		gap: var(--space-8);
 	}