Sync with Server

src/components/Modal/index.svelte

@@ -2,10 +2,11 @@
   import { afterUpdate } from 'svelte';
   import CloseButton from '../Buttons/Close/index.svelte';
 
-  export let open;
-  export let onClose;
-  export let modalHeading;
-  export let width;
+  export let open = false;
+  export let onClose = () => {};
+  export let modalHeading = '';
+  export let width = '';
+  export let containerClass = '';
 
   afterUpdate(() => {
     if (open) {
@@ -21,7 +22,9 @@
     class="dialog fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50 bg-gray-100 bg-opacity-50"
   >
     <div aria-hidden="true" class="backdrop" />
-    <div class="bg-white mx-auto {width} shadow-lg p-5 pt-2 rounded-md">
+    <div
+      class="container bg-white mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
+    >
       <div class="flex items-center justify-between mb-4">
         <h3 class="text-xl m-0">
           {modalHeading}
@@ -29,7 +32,7 @@
         <CloseButton onClick={onClose} contained={true} />
       </div>
 
-      <div class="body h-4/5 overflow-y-auto">
+      <div class="body h-4/5 overflow-y-auto {containerClass}">
         <slot />
       </div>
     </div>
@@ -40,6 +43,10 @@
   .dialog {
     background-color: rgba(0, 0, 0, 0.5);
   }
+
+  .container {
+    max-width: 1000px;
+  }
   .body {
     max-height: 60vh;
   }