refac: collection styling

src/lib/components/common/Drawer.svelte

@@ -6,23 +6,11 @@
 	const dispatch = createEventDispatcher();
 
 	export let show = false;
-	export let size = 'md';
+	export let className = '';
 
 	let modalElement = null;
 	let mounted = false;
 
-	const sizeToWidth = (size) => {
-		if (size === 'xs') {
-			return 'w-[16rem]';
-		} else if (size === 'sm') {
-			return 'w-[30rem]';
-		} else if (size === 'md') {
-			return 'w-[48rem]';
-		} else {
-			return 'w-[56rem]';
-		}
-	};
-
 	const handleKeyDown = (event: KeyboardEvent) => {
 		if (event.key === 'Escape' && isTopModal()) {
 			console.log('Escape');
@@ -76,7 +64,7 @@
 	}}
 >
 	<div
-		class=" mt-auto max-w-full w-full bg-gray-50 dark:bg-gray-900 max-h-[100dvh] overflow-y-auto scrollbar-hidden"
+		class=" mt-auto max-w-full w-full bg-gray-50 dark:bg-gray-900 dark:text-gray-100 {className} max-h-[100dvh] overflow-y-auto scrollbar-hidden"
 		on:mousedown={(e) => {
 			e.stopPropagation();
 		}}

src/lib/components/common/Modal.svelte

@@ -6,11 +6,15 @@
 
 	export let show = true;
 	export let size = 'md';
+	export let className = 'bg-gray-50 dark:bg-gray-900  rounded-2xl';
 
 	let modalElement = null;
 	let mounted = false;
 
 	const sizeToWidth = (size) => {
+		if (size === 'full') {
+			return 'w-full';
+		}
 		if (size === 'xs') {
 			return 'w-[16rem]';
 		} else if (size === 'sm') {
@@ -68,9 +72,9 @@
 		}}
 	>
 		<div
-			class=" m-auto rounded-2xl max-w-full {sizeToWidth(
-				size
-			)} mx-2 bg-gray-50 dark:bg-gray-900 shadow-3xl max-h-[100dvh] overflow-y-auto scrollbar-hidden"
+			class=" m-auto max-w-full {sizeToWidth(size)} {size !== 'full'
+				? 'mx-2'
+				: ''} shadow-3xl max-h-[100dvh] overflow-y-auto scrollbar-hidden {className}"
 			in:flyAndScale
 			on:mousedown={(e) => {
 				e.stopPropagation();