Make publish button CTA and tidy up alignment

packages/builder/src/components/deploy/DeployModal.svelte

@@ -58,7 +58,7 @@
   }
 </script>
 
-<Button secondary on:click={publishModal.show}>Publish</Button>
+<Button cta on:click={publishModal.show}>Publish</Button>
 <Modal bind:this={feedbackModal}>
   <ModalContent
     title="Enjoying Budibase?"
@@ -96,33 +96,31 @@
 </Modal>
 
 <!-- Publish complete -->
-<span class="publish-modal-wrap">
+<Modal bind:this={publishCompleteModal}>
-  <Modal bind:this={publishCompleteModal}>
+  <ModalContent
-    <ModalContent
+    confirmText="Done"
-      confirmText="Done"
+    cancelText="View App"
-      cancelText="View App"
+    onCancel={viewApp}
-      onCancel={viewApp}
+    dataCy={"deploy-app-success-modal"}
-      dataCy={"deploy-app-success-modal"}
+  >
-    >
+    <div slot="header" class="app-published-header">
-      <div slot="header" class="app-published-header">
+      <svg
-        <svg
+        width="26px"
-          width="26px"
+        height="26px"
-          height="26px"
+        class="spectrum-Icon success-icon"
-          class="spectrum-Icon success-icon"
+        focusable="false"
-          focusable="false"
+      >
-        >
+        <use xlink:href="#spectrum-icon-18-GlobeCheck" />
-          <use xlink:href="#spectrum-icon-18-GlobeCheck" />
+      </svg>
-        </svg>
+      <span class="app-published-header-text">App Published!</span>
-        <span class="app-published-header-text">App Published!</span>
+    </div>
-      </div>
+    <CopyInput
-      <CopyInput
+      value={publishedUrl}
-        value={publishedUrl}
+      label="You can view your app at:"
-        label="You can view your app at:"
+      dataCy="deployed-app-url"
-        dataCy="deployed-app-url"
+    />
-      />
+  </ModalContent>
-    </ModalContent>
+</Modal>
-  </Modal>
-</span>
 
 <style>
   .app-published-header {

packages/builder/src/components/design/AppPanel/AppPanel.svelte

@@ -35,7 +35,7 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-m);
-    padding: var(--spacing-l) 24px;
+    padding: var(--spacing-l) var(--spacing-xl);
   }
   .header {
     display: flex;