Improved project remove UX, updated text styles

gitbutler-ui/src/lib/components/Overlay.svelte

@@ -63,7 +63,7 @@
 	}
 
 	.s-default {
-		max-width: calc(var(--space-64) * 10);
+		max-width: calc(var(--space-64) * 9);
 	}
 
 	.s-small {

gitbutler-ui/src/lib/components/ProblemLoadingRepo.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import Button from './Button.svelte';
 	import DecorativeSplitView from './DecorativeSplitView.svelte';
-	import Modal from './Modal.svelte';
 	import ProjectSwitcher from './ProjectSwitcher.svelte';
+	import RemoveProjectButton from './RemoveProjectButton.svelte';
 	import Icon from '$lib/components/Icon.svelte';
 	import * as toasts from '$lib/utils/toasts';
 	import type { Project, ProjectService } from '$lib/backend/projects';
@@ -17,7 +16,7 @@
 	$: user$ = userService.user$;
 
 	let loading = false;
-	let deleteConfirmationModal: Modal;
+	let deleteConfirmationModal: RemoveProjectButton;
 
 	async function onDeleteClicked() {
 		loading = true;
@@ -49,44 +48,26 @@
 			There was a problem loading this repo
 		</p>
 
-		{#if error}
 		<div class="problem__error text-base-body-12">
 			<Icon name="error" color="error" />
-				{error}
+			{error ? error.message : 'An unknown error occurred'}
+		</div>
+
+		<div class="remove-project-btn">
+			<RemoveProjectButton
+				bind:this={deleteConfirmationModal}
+				projectTitle={project.title}
+				isDeleting={loading}
+				{onDeleteClicked}
+			/>
 		</div>
-		{/if}
 
 		<div class="problem__switcher">
 			<ProjectSwitcher {projectService} {project} />
 		</div>
-
-		<div class="problem__delete">
-			<Button
-				wide
-				on:click={() => deleteConfirmationModal.show()}
-				{loading}
-				kind="outlined"
-				color="error"
-				icon="bin-small"
-			>
-				Remove project from GitButler
-			</Button>
-		</div>
 	</div>
 </DecorativeSplitView>
 
-<Modal bind:this={deleteConfirmationModal} title="Delete {project.title}?">
-	<p>
-		Are you sure you want to delete
-		<span class="font-bold">{project.title}</span>? This can’t be undone.
-	</p>
-
-	<svelte:fragment slot="controls" let:close>
-		<Button kind="outlined" on:click={close}>Cancel</Button>
-		<Button color="error" {loading} on:click={onDeleteClicked}>Delete project</Button>
-	</svelte:fragment>
-</Modal>
-
 <style lang="postcss">
 	.problem__project {
 		display: flex;
@@ -104,9 +85,7 @@
 
 	.problem__switcher {
 		text-align: right;
-		margin-top: var(--space-10);
-		padding-bottom: var(--space-32);
-		border-bottom: 1px dashed var(--clr-theme-scale-ntrl-60);
+		margin-top: var(--space-24);
 	}
 
 	.problem__error {
@@ -116,10 +95,13 @@
 		padding: var(--space-20);
 		background-color: var(--clr-theme-err-container);
 		border-radius: var(--radius-m);
-		margin-bottom: var(--space-24);
+		margin-bottom: var(--space-12);
 	}
 
-	.problem__delete {
-		margin-top: var(--space-32);
+	.remove-project-btn {
+		display: flex;
+		justify-content: flex-end;
+		padding-bottom: var(--space-24);
+		border-bottom: 1px dashed var(--clr-theme-scale-ntrl-60);
 	}
 </style>

gitbutler-ui/src/lib/components/RemoveProjectButton.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import Button from '$lib/components/Button.svelte';
+	import Modal from '$lib/components/Modal.svelte';
+
+	export let projectTitle: string = '#';
+	export let isDeleting = false;
+	export let onDeleteClicked: () => Promise<void>;
+
+	export function show() {
+		modal.show();
+	}
+	export function close() {
+		modal.close();
+	}
+
+	let modal: Modal;
+</script>
+
+<Button
+	color="error"
+	kind="outlined"
+	icon="bin-small"
+	iconAlign="left"
+	on:click={() => {
+		modal.show();
+	}}
+>
+	Remove this project …
+</Button>
+
+<Modal bind:this={modal} title="Remove from GitButler">
+	<div class="remove-project-description">
+		<p class="text-base-body-14">
+			Are you sure you want to remove
+			<span class="font-bold">{projectTitle}</span> from GitButler?
+		</p>
+
+		<p class="text-base-body-12 details-text">
+			When you delete your project from GitButler, your repository doesn't get deleted. It
+			just removes the project from the list, keeping your repository safe and easy to access.
+		</p>
+	</div>
+
+	<svelte:fragment slot="controls" let:close>
+		<Button
+			color="error"
+			kind="outlined"
+			iconAlign="left"
+			loading={isDeleting}
+			icon="bin-small"
+			on:click={onDeleteClicked}>Remove</Button
+		>
+		<Button on:click={close}>Cancel</Button>
+	</svelte:fragment>
+</Modal>
+
+<style lang="postcss">
+	.remove-project-description {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-8);
+	}
+
+	.details-text {
+		opacity: 0.5;
+	}
+</style>

gitbutler-ui/src/routes/[projectId]/+layout.svelte

@@ -72,7 +72,12 @@
 		/>
 	{/await}
 {:else if $branchesError$}
-	<ProblemLoadingRepo {projectService} {userService} project={$project$} error={$branchesError$} />
+	<ProblemLoadingRepo
+		{projectService}
+		{userService}
+		project={$project$}
+		error={$branchesError$}
+	/>
 {:else if !$gbBranchActive$ && $baseBranch$}
 	<NotOnGitButlerBranch
 		{userService}

gitbutler-ui/src/routes/[projectId]/settings/+page.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import Button from '$lib/components/Button.svelte';
 	import CloudForm from '$lib/components/CloudForm.svelte';
 	import DetailsForm from '$lib/components/DetailsForm.svelte';
 	import KeysForm from '$lib/components/KeysForm.svelte';
-	import Modal from '$lib/components/Modal.svelte';
 	import PreferencesForm from '$lib/components/PreferencesForm.svelte';
+	import RemoveProjectButton from '$lib/components/RemoveProjectButton.svelte';
 	import ScrollableContainer from '$lib/components/ScrollableContainer.svelte';
 	import Spacer from '$lib/components/Spacer.svelte';
 	import * as toasts from '$lib/utils/toasts';
@@ -21,7 +20,7 @@
 	$: user$ = data.user$;
 	$: cloud = data.cloud;
 
-	let deleteConfirmationModal: Modal;
+	let deleteConfirmationModal: RemoveProjectButton;
 	let isDeleting = false;
 
 	const onDeleteClicked = () =>
@@ -76,7 +75,12 @@
 					<span class="card_title text-base-16 text-semibold">Project settings</span>
 				</div>
 				<div class="card__content">
-					<CloudForm project={$project$} user={$user$} {userService} on:updated={onCloudUpdated} />
+					<CloudForm
+						project={$project$}
+						user={$user$}
+						{userService}
+						on:updated={onCloudUpdated}
+					/>
 					<Spacer />
 					<DetailsForm project={$project$} on:updated={onDetailsUpdated} />
 					<Spacer />
@@ -90,7 +94,7 @@
 							href="https://discord.gg/wDKZCPEjXC"
 							target="_blank"
 							rel="noreferrer"
-							class="flex-1 rounded border border-light-200 bg-white p-4 dark:border-dark-400 dark:bg-dark-700"
+							class="border-light-200 dark:border-dark-400 dark:bg-dark-700 flex-1 rounded border bg-white p-4"
 						>
 							<p class="mb-2 font-medium">Join our Discord</p>
 							<p class="text-light-700 dark:text-dark-200">
@@ -100,7 +104,7 @@
 						<a
 							href="mailto:hello@gitbutler.com?subject=Feedback or question!"
 							target="_blank"
-							class="flex-1 rounded border border-light-200 bg-white p-4 dark:border-dark-400 dark:bg-dark-700"
+							class="border-light-200 dark:border-dark-400 dark:bg-dark-700 flex-1 rounded border bg-white p-4"
 						>
 							<p class="mb-2 font-medium">Contact us</p>
 							<p class="text-light-700 dark:text-dark-200">
@@ -110,27 +114,18 @@
 					</div>
 				</div>
 				<div class="card__footer">
-					<Button color="error" kind="outlined" on:click={() => deleteConfirmationModal.show()}>
-						Delete project
-					</Button>
+					<RemoveProjectButton
+						bind:this={deleteConfirmationModal}
+						projectTitle={$project$?.title}
+						{isDeleting}
+						{onDeleteClicked}
+					/>
 				</div>
 			{/if}
 		</div>
 	</div>
 </ScrollableContainer>
 
-<Modal bind:this={deleteConfirmationModal} title="Delete {$project$?.title}?">
-	<p>
-		Are you sure you want to delete
-		<span class="font-bold">{$project$?.title}</span>? This can’t be undone.
-	</p>
-
-	<svelte:fragment slot="controls" let:close>
-		<Button kind="outlined" on:click={close}>Cancel</Button>
-		<Button color="error" loading={isDeleting} on:click={onDeleteClicked}>Delete project</Button>
-	</svelte:fragment>
-</Modal>
-
 <style lang="postcss">
 	.settings {
 		display: flex;

gitbutler-ui/src/styles/card.postcss

@@ -9,7 +9,7 @@
 .card__header {
 	display: flex;
 	justify-content: space-between;
-	padding: var(--space-12);
+	padding: var(--space-16);
 	gap: var(--space-8);
 	border-bottom: 1px solid var(--clr-theme-container-outline-light);
 }
@@ -27,7 +27,7 @@
 .card__footer {
 	display: flex;
 	gap: var(--space-6);
-	padding: var(--space-12);
+	padding: var(--space-16);
 	justify-content: space-between;
 	border-top: 1px solid var(--clr-theme-container-outline-light);
 }

gitbutler-ui/src/styles/text-classes.css

@@ -5,7 +5,7 @@
 	--semidold-font-weight: 600;
 	--bold-font-weight: 700;
 	--base-line-height: 120%;
-	--text-body-line-height: 140%;
+	--text-body-line-height: 150%;
 }
 
 /* text Base Classes */