convert delete modal to new type

packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte

@@ -33,6 +33,17 @@
     )
   }
 
+  const deleteRecord = async row => {
+    open(
+      DeleteRecordModal,
+      {
+        onClosed: close,
+        record: await selectRecord(row),
+      },
+      { styleContent: { padding: "0" } }
+    )
+  }
+
   async function selectRecord(record) {
     return await api.loadRecord(record.key, {
       appname: $store.appname,
@@ -154,8 +165,7 @@
                   <li>
                     <div
                       on:click={() => {
-                        selectRecord(row)
+                        deleteRecord(row)
-                        backendUiStore.actions.modals.show('DELETE_RECORD')
                       }}>
                       Delete
                     </div>

packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte

@@ -4,26 +4,25 @@
   import * as api from "../api"
 
   export let record
+  export let onClosed
 
   $: currentAppInfo = {
     appname: $store.appname,
     instanceId: $backendUiStore.selectedDatabase.id,
   }
-
-  function onClosed() {
-    backendUiStore.actions.modals.hide()
-  }
 </script>
 
 <section>
-  <heading>
+  <div class="content">
-    <i class="ri-information-line alert" />
+    <heading>
-    <h4 class="budibase__title--4">Delete Record</h4>
+      <i class="ri-information-line alert" />
-  </heading>
+      <h4 class="budibase__title--4">Delete Record</h4>
-  <p>
+    </heading>
-    Are you sure you want to delete this record? All of your data will be
+    <p>
-    permanently removed. This action cannot be undone.
+      Are you sure you want to delete this record? All of your data will be
-  </p>
+      permanently removed. This action cannot be undone.
+    </p>
+  </div>
   <div class="modal-actions">
     <ActionButton on:click={onClosed}>Cancel</ActionButton>
     <ActionButton
@@ -47,18 +46,17 @@
 
   .modal-actions {
     padding: 10px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
     background: #fafafa;
     border-top: 1px solid #ccc;
-    width: 100%;
   }
 
   heading {
     display: flex;
     align-items: center;
   }
+  .content {
+    padding: 30px;
+  }
 
   h4 {
     margin: 0 0 0 10px;

packages/builder/src/pages/[application]/backend/_layout.svelte

@@ -28,25 +28,17 @@
     backendUiStore.actions.modals.hide()
   }
 
-  $: recordOpen = $backendUiStore.visibleModal === "RECORD"
   $: modelOpen = $backendUiStore.visibleModal === "MODEL"
   $: viewOpen = $backendUiStore.visibleModal === "VIEW"
-  $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
 </script>
 
 <!-- <Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
-  {#if recordOpen}
-    <CreateEditRecordModal record={selectedRecord} {onClosed} />
-  {/if}
   {#if modelOpen}
     <CreateEditModelModal {onClosed} />
   {/if}
   {#if viewOpen}
     <CreateEditViewModal {onClosed} />
   {/if}
-  {#if deleteRecordOpen}
-    <DeleteRecordModal record={selectedRecord} {onClosed} />
-  {/if}
 </Modal> -->
 
 <div class="root">