Codereview: header and icon to props

packages/ui/src/lib/components/Link.svelte

@@ -27,7 +27,7 @@
 		{href}
 		{target}
 		{rel}
-		class="link inline-flex w-fit cursor-pointer items-center gap-1 whitespace-nowrap hover:underline hover:ease-in {role} {classes}"
+		class="link inline-flex cursor-pointer items-center justify-center gap-1 whitespace-nowrap hover:underline hover:ease-in {role} {classes}"
 		bind:this={element}
 		class:disabled
 		on:click={(e) => {

packages/ui/src/lib/components/Modal.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import Overlay from './Overlay.svelte';
+	import Icon from '$lib/icons/Icon.svelte';
+	import type iconsJson from '$lib/icons/icons.json';
 
 	export function show(newItem?: any) {
 		item = newItem;
@@ -11,20 +13,22 @@
 	}
 
 	export let width: 'default' | 'small' | 'large' = 'default';
+	export let title: string;
+	export let icon: keyof typeof iconsJson | undefined = undefined;
 
 	let item: any;
 	let modal: Overlay;
 </script>
 
 <Overlay bind:this={modal} let:close on:close {width}>
-	{#if $$slots.title}
+	{#if title}
 		<div class="modal__header">
 			<div class="modal__header__content" class:adjust-header={$$slots.header_controls}>
-				{#if $$slots.icon}
-					<slot name="icon" />
+				{#if icon}
+					<Icon name={icon} />
 				{/if}
 				<h2 class="text-base-14 text-semibold">
-					<slot name="title" />
+					{title}
 				</h2>
 			</div>
 			{#if $$slots.header_controls}

packages/ui/src/lib/components/Overlay.svelte

@@ -42,6 +42,7 @@
 
 <style lang="postcss">
 	.dialog-overlay {
+		display: flex;
 		flex-direction: column;
 		position: relative;
 		max-height: calc(100vh - 5rem);

packages/ui/src/routes/LinkProjectModal.svelte

@@ -65,8 +65,7 @@
 	}
 </script>
 
-<Modal bind:this={modal}>
-	<svelte:fragment slot="title">GitButler Cloud</svelte:fragment>
+<Modal bind:this={modal} title="GitButler Cloud">
 	{#await Promise.all([cloudProjects])}
 		<IconLoading class="m-auto animate-spin" />
 	{:then}

packages/ui/src/routes/ShareIssueModal.svelte

@@ -79,8 +79,7 @@
 	};
 </script>
 
-<Modal bind:this={modal} on:close={onClose}>
-	<svelte:fragment slot="title">Share debug data with GitButler team for review</svelte:fragment>
+<Modal bind:this={modal} on:close={onClose} title="Share debug data with GitButler team for review">
 	<div class="flex flex-col gap-4">
 		<p class="text-color-3">
 			If you are having trouble, please share your project and logs with the Gitbutler team. We will

packages/ui/src/routes/[projectId]/base/BaseBranch.svelte

@@ -70,8 +70,7 @@
 	</div>
 </div>
 
-<Modal width="small" bind:this={updateTargetModal}>
-	<svelte:fragment slot="title">Merge Upstream Work</svelte:fragment>
+<Modal width="small" bind:this={updateTargetModal} title="Merge Upstream Work">
 	<div class="flex flex-col space-y-4">
 		<p class="text-blue-600">You are about to merge upstream work from your base branch.</p>
 		<p class="font-bold">What will this do?</p>

packages/ui/src/routes/[projectId]/components/BranchLanePopupMenu.svelte

@@ -64,8 +64,7 @@
 	</PopupMenuItem>
 </PopupMenu>
 
-<Modal width="small" bind:this={deleteBranchModal} let:item={branch}>
-	<svelte:fragment slot="title">Delete branch</svelte:fragment>
+<Modal width="small" title="Delete branch" bind:this={deleteBranchModal} let:item={branch}>
 	<div>
 		Deleting <code>{branch.name}</code> cannot be undone.
 	</div>

packages/ui/src/routes/[projectId]/components/CommitCard.svelte

@@ -95,15 +95,7 @@
 	</div>
 </div>
 
-<Modal width="large" bind:this={previewCommitModal}>
-	<svelte:fragment slot="icon">
-		<Icon name="commit" />
-	</svelte:fragment>
-
-	<svelte:fragment slot="title">
-		{commit.description}
-	</svelte:fragment>
-
+<Modal width="large" bind:this={previewCommitModal} icon="commit" title={commit.description}>
 	<svelte:fragment slot="header_controls">
 		{#if commitUrl}
 			<Button

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

@@ -111,8 +111,7 @@
 	</div>
 </ScrollableContainer>
 
-<Modal bind:this={deleteConfirmationModal}>
-	<svelte:fragment slot="title">Delete {$project$?.title}?</svelte:fragment>
+<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.

packages/ui/src/routes/[projectId]/stashed/[branchId]/+page.svelte

@@ -98,8 +98,7 @@
 	{/if}
 </div>
 
-<Modal width="small" bind:this={applyConflictedModal}>
-	<svelte:fragment slot="title">Merge conflicts</svelte:fragment>
+<Modal width="small" title="Merge conflicts" bind:this={applyConflictedModal}>
 	<p>Applying this branch will introduce merge conflicts.</p>
 	<svelte:fragment slot="controls" let:item let:close>
 		<Button kind="outlined" on:click={close}>Cancel</Button>
@@ -116,8 +115,7 @@
 	</svelte:fragment>
 </Modal>
 
-<Modal width="small" bind:this={deleteBranchModal} let:item>
-	<svelte:fragment slot="title">Delete branch</svelte:fragment>
+<Modal width="small" title="Delete branch" bind:this={deleteBranchModal} let:item>
 	<div>
 		Deleting <code>{item.name}</code> cannot be undone.
 	</div>

packages/ui/src/routes/components/GithubIntegration.svelte

@@ -66,8 +66,11 @@
 	</div>
 {/if}
 
-<Modal on:close={() => gitHubOauthCheckStatus(deviceCode)} bind:this={gitHubOauthModal}>
-	<svelte:fragment slot="title">Authenticate with GitHub</svelte:fragment>
+<Modal
+	on:close={() => gitHubOauthCheckStatus(deviceCode)}
+	bind:this={gitHubOauthModal}
+	title="Authenticate with GitHub"
+>
 	<div class="flex flex-col gap-4">
 		<div class="flex items-center gap-2">
 			<span class="flex-grow">1️⃣ Copy the following verification code: </span>

packages/ui/src/routes/settings/+page.svelte

@@ -394,8 +394,7 @@
 			</div>
 		</div>
 
-		<Modal bind:this={deleteConfirmationModal}>
-			<svelte:fragment slot="title">Delete all local data?</svelte:fragment>
+		<Modal bind:this={deleteConfirmationModal} title="Delete all local data?">
 			<p>Are you sure you want to delete all local data? This can’t be undone.</p>
 
 			<svelte:fragment slot="controls" let:close>