style: Improved onboarding page styling and ux

src/lib/components/Button.svelte

@@ -9,6 +9,7 @@
 
 	export let disabled: boolean = false;
 	export let focusOnMount: boolean = false;
+	export let focusedChild = false;
 	export let type: 'primary' | 'secondary' | 'primary-dark' = 'primary';
 	export let confirmDanger = false;
 	export let action: (() => Promise<any>) | null = null;
@@ -62,6 +63,7 @@
 		on:clickOrSelect={handleClickOrSelect}
 		on:enter
 		{focusOnMount}
+		{focusedChild}
 	>
 		<div
 			class={classNames({

src/lib/pages/OnboardingPage.svelte

@@ -60,18 +60,18 @@
 				Looks like this is a new account. This setup will get you started with connecting your
 				services to get most out of Reiverr.
 			</div>
-			<Container direction="horizontal" class="flex space-x-4">
+			<Container direction="horizontal" class="flex space-x-4 *:flex-1">
 				<Button type="primary-dark" on:clickOrSelect={() => sessions.removeSession()}
 					>Log Out</Button
 				>
-				<div class="flex-1">
+				<Button
-					<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
+					focusOnMount
-						Next
+					type="primary-dark"
-						<div class="absolute inset-y-0 right-0 flex items-center justify-center">
+					on:clickOrSelect={() => tab.next()}
-							<ArrowRight size={24} />
+					iconAbsolute={ArrowRight}
-						</div>
+				>
-					</Button>
+					Next
-				</div>
+				</Button>
 			</Container>
 		</Tab>
 
@@ -97,13 +97,12 @@
 				{/if}
 				<Container direction="horizontal" class="flex space-x-4 *:flex-1 mt-4">
 					<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
-					<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
+					<Button focusedChild type="primary-dark" on:clickOrSelect={() => tab.next()}>
 						{#if connected}
 							Next
 						{:else}
 							Skip
 						{/if}
-						<ArrowRight size={19} slot="icon-absolute" />
 					</Button>
 				</Container>
 			</TmdbIntegration>
@@ -160,7 +159,7 @@
 				<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
 					<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
 					{#if empty || unchanged}
-						<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
+						<Button focusedChild type="primary-dark" on:clickOrSelect={() => tab.next()}>
 							{empty ? 'Skip' : 'Next'}
 						</Button>
 					{:else}
@@ -233,7 +232,7 @@
 				<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
 					<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
 					{#if empty || unchanged}
-						<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
+						<Button focusedChild type="primary-dark" on:clickOrSelect={() => tab.next()}>
 							{empty ? 'Skip' : 'Next'}
 						</Button>
 					{:else}
@@ -257,7 +256,7 @@
 				<Container direction="horizontal" class="grid grid-cols-2 gap-4 mt-4">
 					<Button type="primary-dark" on:clickOrSelect={() => tab.previous()}>Back</Button>
 					{#if empty || unchanged}
-						<Button type="primary-dark" on:clickOrSelect={() => tab.next()}>
+						<Button focusedChild type="primary-dark" on:clickOrSelect={() => tab.next()}>
 							{empty ? 'Skip' : 'Next'}
 						</Button>
 					{:else}
@@ -278,16 +277,21 @@
 				<CheckCircled size={64} />
 			</div>
 			<h1 class="header2 text-center w-full">All Set!</h1>
-			<div class="header1 mb-8 text-center">Reiverr is now ready to use.</div>
+			<div class="body mb-8 text-center">Reiverr is now ready to use.</div>
 
 			<Container direction="horizontal" class="inline-flex space-x-4 w-full">
-				<Button type="primary-dark" on:clickOrSelect={() => tab.previous()} icon={ArrowLeft}
+				<Button type="primary-dark" on:clickOrSelect={() => tab.previous()} icon={ArrowLeft}>
-					>Back</Button
+					Back
-				>
+				</Button>
 				<div class="flex-1">
-					<Button type="primary-dark" on:clickOrSelect={finalizeSetup} iconAbsolute={ArrowRight}
+					<Button
-						>Done</Button
+						focusedChild
+						type="primary-dark"
+						on:clickOrSelect={finalizeSetup}
+						iconAbsolute={ArrowRight}
 					>
+						Done
+					</Button>
 				</div>
 			</Container>
 		</Tab>

src/lib/selectable.ts

@@ -580,6 +580,20 @@ export class Selectable {
 			console.error('No html element found for', this);
 			return;
 		}
+
+		if (this.makeFocusedChild) {
+			// eslint-disable-next-line @typescript-eslint/no-this-alias
+			let el: Selectable = this;
+			let parent = el.parent;
+
+			while (parent && !get(parent.hasFocusWithin)) {
+				console.log('setting parent focusIndex', parent, parent.children.indexOf(el));
+				parent.focusIndex.update((prev) => parent?.children?.indexOf(el) || prev);
+
+				el = parent;
+				parent = el.parent;
+			}
+		}
 	}
 
 	_unmountContainer() {
@@ -744,18 +758,6 @@ export class Selectable {
 		this.children.splice(index, 0, child);
 		child.parent = this;
 
-		if (child.makeFocusedChild) {
-			let el = child;
-			let parent = el.parent;
-
-			while (parent && !get(parent.hasFocusWithin)) {
-				parent.focusIndex.update((prev) => parent?.children?.indexOf(el) || prev);
-
-				el = parent;
-				parent = el.parent;
-			}
-		}
-
 		return childToFocus;
 	}