feat: Add to sonarr dialog, reworked requests

src/lib/components/Dialog/ConfirmDialog.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Container from '../../../Container.svelte';
 	import Button from '../Button.svelte';
-	import Modal from '../Modal/Modal.svelte';
 	import { modalStack } from '../Modal/modal.store';
 	import Dialog from './Dialog.svelte';
 
@@ -27,20 +26,15 @@
 	}
 </script>
 
-<Dialog {modalId}>
-	<div class="text-2xl font-semibold tracking-wide mb-2 text-secondary-100">
+<Dialog>
+	<div class="header2 mb-4">
 		<slot name="header" />
 	</div>
 	<div class="font-medium text-secondary-300 mb-8">
 		<slot />
 	</div>
-	<Container direction="horizontal" class="flex">
-		<Button
-			type="secondary"
-			disabled={fetching}
-			on:clickOrSelect={() => handleAction(confirm)}
-			class="mr-4"
-		>
+	<Container class="flex flex-col space-y-4">
+		<Button type="secondary" disabled={fetching} on:clickOrSelect={() => handleAction(confirm)}>
 			Confirm
 		</Button>
 		<Button type="secondary" disabled={fetching} on:clickOrSelect={() => handleAction(cancel)}

src/lib/components/Dialog/Dialog.svelte

@@ -1,11 +1,25 @@
 <script lang="ts">
 	import Modal from '../Modal/Modal.svelte';
+	import classNames from 'classnames';
+	import { fade } from 'svelte/transition';
+
+	export let size: 'sm' | 'full' = 'sm';
 </script>
 
-<Modal>
-	<div class="h-full flex items-center justify-center bg-secondary-950/75 py-20">
+<Modal on:back>
+	<div
+		class="h-full flex items-center justify-center bg-primary-900/75 py-20 px-32"
+		transition:fade={{ duration: 100 }}
+	>
 		<div
-			class="flex-1 bg-secondary-900 rounded-2xl max-w-lg p-10 overflow-y-auto min-h-0 max-h-full scrollbar-hide"
+			class={classNames(
+				'flex-1 bg-primary-800 rounded-2xl p-10 relative shadow-xl flex flex-col',
+				{
+					'max-w-lg min-h-0 overflow-y-auto scrollbar-hide': size === 'sm',
+					'h-full overflow-hidden': size === 'full'
+				},
+				$$restProps.class
+			)}
 		>
 			<slot />
 		</div>

src/lib/components/Dialog/FullScreenDialog.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import Modal from '../Modal/Modal.svelte';
+	import classNames from 'classnames';
+	import { fade } from 'svelte/transition';
+</script>
+
+<Modal on:back>
+	<div
+		class="h-full flex items-center justify-center bg-primary-900/75 py-20 px-32"
+		transition:fade={{ duration: 100 }}
+	>
+		<div
+			class={classNames(
+				'flex-1 bg-primary-800 rounded-2xl p-10 overflow-y-auto min-h-0 max-h-full scrollbar-hide relative shadow-xl',
+				$$restProps.class
+			)}
+		>
+			<slot />
+		</div>
+	</div>
+</Modal>