Layout Preferences Dialog

src/lib/components/Interaction/Interaction.svelte

@@ -14,8 +14,6 @@
 		showPlayerScoreDetails: { player: Player; score: PlayerScore };
 		preferenceClicked: void;
 	}>();
-
-	let boardHint: boolean = true;
 </script>
 
 <div class="interaction-area global-container-bg">

src/lib/components/Preference/PreferenceDialog.svelte

@@ -1,14 +1,30 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	// import { createEventDispatcher } from 'svelte';
 	import Preference from './Preference.svelte';
 	export let dialog: HTMLDialogElement;
 
-	const dispatch = createEventDispatcher<{}>();
+	// const dispatch = createEventDispatcher<{}>();
 </script>
 
-<dialog bind:this={dialog}>
-	<h2>Preference</h2>
+<!-- https://svelte.dev/repl/885653f873284f7880490dcdd1200238?version=3.48.0 -->
+
+<dialog bind:this={dialog} class="global-subcontainer-bg">
+	<div class="title">
+		<span>Preferences</span>
+		<button class="rounded-xl h-6 w-6 bg-red-600 border-2" on:click={() => dialog.close()} />
+	</div>
 	<Preference />
 </dialog>
 
-<!-- https://svelte.dev/repl/885653f873284f7880490dcdd1200238?version=3.48.0 -->
+<style lang="postcss">
+	dialog {
+		@apply w-9/12 large:w-5/12 h-5/6 large:h-3/6;
+		@apply p-4 rounded-xl;
+		@apply dark:text-platinum-800 text-rich_black-100;
+	}
+
+	.title {
+		@apply text-xl;
+		@apply flex gap-4 justify-between items-center;
+	}
+</style>