Updates to design, removing alert.

packages/builder/src/components/backend/modals/DeleteDataConfirmationModal.svelte

@@ -171,7 +171,7 @@
   function buildMessage() {
     let message = ""
     if (isInternalTable) {
-      message = `All its data will be deleted`
+      message = `All ${sourceType} data will also be deleted`
       const viewsMessage = getViewsMessage()
       if (viewsMessage) {
         message += `, including ${viewsMessage}. `
@@ -187,40 +187,32 @@
   }
 </script>
 
-{#if sourceType}
+<ConfirmDialog
-  <ConfirmDialog
+  bind:this={confirmDeleteDialog}
-    bind:this={confirmDeleteDialog}
+  okText="Delete"
-    okText="Delete"
+  onOk={deleteSource}
-    onOk={deleteSource}
+  onCancel={hideDeleteDialog}
-    onCancel={hideDeleteDialog}
+  title={`Are you sure you want to delete ${source?.name}?`}
-    title={`Are you sure you want to delete ${source?.name}?`}
+>
-  >
+  <div class="content">
-    <div class="content">
+    {#if affectedScreens.length > 0}
       <p class="warning">
-        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        Removing this {sourceType} will break the following screens:
-        {@html buildMessage()}
+        <span class="screens">
+          {#each affectedScreens as item, idx}
+            <Link overBackground target="_blank" href={item.url}
+              >{item.text}{idx !== affectedScreens.length - 1 ? "," : ""}</Link
+            >
+          {/each}
+        </span>
       </p>
-
+    {/if}
-      {#if affectedScreens.length > 0}
+    <p class="warning">
-        <div class="affectedScreens">
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-          <InlineAlert
+      {@html buildMessage()}
-            header={`The following screens use this ${sourceType} and may no longer function as expected`}
+    </p>
-          >
+  </div>
-            <ul class="affectedScreensList">
+</ConfirmDialog>
-              {#each affectedScreens as item}
-                <li>
-                  <Link quiet overBackground target="_blank" href={item.url}
-                    >{item.text}</Link
-                  >
-                </li>
-              {/each}
-            </ul>
-          </InlineAlert>
-        </div>
-      {/if}
-    </div>
-  </ConfirmDialog>
-{/if}
 
 <style>
   .content {
@@ -233,27 +225,9 @@
     max-width: 100%;
   }
 
-  .affectedScreens {
+  .screens {
-    margin: 18px 0;
+    display: flex;
-    max-width: 100%;
+    flex-direction: row;
-    margin-bottom: 24px;
+    gap: var(--spacing-xs);
-  }
-
-  .affectedScreens :global(.spectrum-InLineAlert) {
-    max-width: 100%;
-  }
-
-  .affectedScreensList {
-    padding: 0;
-    margin-bottom: 0;
-  }
-
-  .affectedScreensList li {
-    display: block;
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-top: 4px;
   }
 </style>