feat(web): update confirm to use modal component

Signed-off-by: Jordan Shatford <[email protected]>

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

@@ -3,14 +3,6 @@
 
 	const confirmClasses = tv({
 		slots: {
-			outerDivClass: 'fixed inset-0 z-50 overflow-y-auto',
-			backgroundOuterDivClass:
-				'flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0',
-			backgroundTransitionDivClass:
-				'fixed inset-0 cursor-pointer bg-zinc-800 bg-opacity-75 transition-opacity',
-			trickCenteringSpanClass: 'hidden sm:inline-block sm:h-screen sm:align-middle',
-			contentDivClass:
-				'inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all dark:bg-zinc-900 sm:my-8 sm:w-full sm:max-w-lg sm:align-middle',
 			mainDivClass: 'px-4 pb-4 pt-5 sm:p-6 sm:pb-4',
 			mainDivInnerClass: 'sm:flex sm:items-start',
 			iconDivClass:
@@ -49,13 +41,10 @@
 </script>
 
 <script lang="ts">
-	import { fly, fade } from 'svelte/transition';
 	import { Button } from '../index';
 	import { Icon } from '../icons';
 	import { toIcon } from '../utilities';
-
-	let className: string = '';
-	export { className as class };
+	import { Modal } from '../index';
 
 	export let variant: ConfirmVariants['variant'] = 'info';
 	export let title: string = 'Confirm?';
@@ -66,11 +55,6 @@
 	const icon = toIcon(variant);
 
 	const {
-		outerDivClass,
-		backgroundOuterDivClass,
-		backgroundTransitionDivClass,
-		trickCenteringSpanClass,
-		contentDivClass,
 		mainDivClass,
 		mainDivInnerClass,
 		iconDivClass,
@@ -102,50 +86,26 @@
 
 <slot {confirm} />
 
-{#if showDialog}
-	<div class={outerDivClass()} aria-labelledby="modal-title" role="dialog" aria-modal="true">
-		<div class={backgroundOuterDivClass()}>
-			<div
-				class={backgroundTransitionDivClass()}
-				aria-hidden="true"
-				on:click={() => (showDialog = false)}
-				in:fade={{ duration: 300 }}
-				out:fade={{ delay: 200, duration: 200 }}
-			/>
-			<!-- This element is to trick the browser into centering the modal contents. -->
-			<span class={trickCenteringSpanClass()} aria-hidden="true">&#8203;</span>
-			<div
-				{...$$restProps}
-				class={contentDivClass({ class: className })}
-				in:fly={{ y: -10, delay: 200, duration: 200 }}
-				out:fly={{ y: -10, duration: 200 }}
-			>
-				<div class={mainDivClass()}>
-					<div class={mainDivInnerClass()}>
-						{#if icon}
-							<div class={iconDivClass()}>
-								<Icon src={icon} theme="solid" class={iconClass()} />
-							</div>
-						{/if}
-						<div class={textDivClass()}>
-							<h3 class={titleClass()} id="modal-title">
-								{title}
-							</h3>
-							<div class={descriptionClass()}>{description}</div>
-						</div>
-					</div>
-				</div>
-				<div class={footerDivClass()}>
-					<Button {variant} class={confirmButtonClass()} on:click={callFunction}
-						>{confirmText}</Button
-					>
-					<Button
-						variant="secondary"
-						class={cancelButtonClass()}
-						on:click={() => (showDialog = false)}>{cancelText}</Button
-					>
+<Modal {...$$restProps} bind:show={showDialog}>
+	<div class={mainDivClass()}>
+		<div class={mainDivInnerClass()}>
+			{#if icon}
+				<div class={iconDivClass()}>
+					<Icon src={icon} theme="solid" class={iconClass()} />
 				</div>
+			{/if}
+			<div class={textDivClass()}>
+				<h3 class={titleClass()} id="modal-title">
+					{title}
+				</h3>
+				<div class={descriptionClass()}>{description}</div>
 			</div>
 		</div>
 	</div>
-{/if}
+	<div class={footerDivClass()}>
+		<Button {variant} class={confirmButtonClass()} on:click={callFunction}>{confirmText}</Button>
+		<Button variant="secondary" class={cancelButtonClass()} on:click={() => (showDialog = false)}
+			>{cancelText}</Button
+		>
+	</div>
+</Modal>