2.1.0-alpha.0

src/lib/components/Dialog/UpdateDialog.svelte

@@ -1,44 +1,48 @@
 <script lang="ts">
-	import Dialog from './Dialog.svelte';
-	import Container from '../Container.svelte';
-	import Button from '../Button.svelte';
-	import { PLATFORM_WEB } from '../../constants';
 	import { ExternalLink, InfoCircled } from 'radix-icons-svelte';
-	import { modalStack } from '../Modal/modal.store';
+	import { PLATFORM_WEB } from '../../constants';
 	import { localSettings } from '../../stores/localstorage.store';
+	import Button from '../Button.svelte';
+	import Container from '../Container.svelte';
+	import Dialog from './Dialog.svelte';
 
 	export let version: string;
 
 	function disableUpdateChecking() {
 		localSettings.update((s) => ({ ...s, checkForUpdates: false, skippedVersion: version }));
-		modalStack.closeTopmost();
 	}
 
 	function dismiss() {
 		localSettings.update((s) => ({ ...s, skippedVersion: version }));
-		modalStack.closeTopmost();
 	}
 </script>
 
-<Dialog>
+<Dialog let:close on:close={dismiss} size="dynamic">
 	<div class="flex items-center justify-center text-secondary-500 mb-4">
 		<InfoCircled size={64} />
 	</div>
 	<h1 class="h3 text-center">Update Available</h1>
 	<div class="body mb-8 text-center">Reiverr {version} is now available.</div>
-	<Container class="space-y-4">
-		<Button type="primary-dark" on:clickOrSelect={dismiss}>Dismiss</Button>
+	<Container class="flex space-x-4" direction="horizontal">
+		<Button
+			type="primary-dark"
+			on:clickOrSelect={() => {
+				disableUpdateChecking();
+				close();
+			}}
+		>
+			Disable Update Checking
+		</Button>
 		{#if PLATFORM_WEB}
 			<Button
 				type="primary-dark"
 				iconAfter={ExternalLink}
 				on:clickOrSelect={() => window.open('https://github.com/aleksilassila/reiverr/releases')}
+				focusOnMount
+				focusedChild
 			>
 				Open Releases
 			</Button>
 		{/if}
-		<Button type="primary-dark" on:clickOrSelect={disableUpdateChecking}>
-			Disable Update Checking
-		</Button>
 	</Container>
 </Dialog>