From b9a2d967659661b181921e4d7b09463bdc88445f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 25 Apr 2022 14:58:41 +0100
Subject: [PATCH] Make publish button CTA and tidy up alignment

---
 .../src/components/deploy/DeployModal.svelte  | 54 +++++++++----------
 .../design/AppPanel/AppPanel.svelte           |  2 +-
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/packages/builder/src/components/deploy/DeployModal.svelte b/packages/builder/src/components/deploy/DeployModal.svelte
index ffda399440..338a76e470 100644
--- a/packages/builder/src/components/deploy/DeployModal.svelte
+++ b/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}>
-    <ModalContent
-      confirmText="Done"
-      cancelText="View App"
-      onCancel={viewApp}
-      dataCy={"deploy-app-success-modal"}
-    >
-      <div slot="header" class="app-published-header">
-        <svg
-          width="26px"
-          height="26px"
-          class="spectrum-Icon success-icon"
-          focusable="false"
-        >
-          <use xlink:href="#spectrum-icon-18-GlobeCheck" />
-        </svg>
-        <span class="app-published-header-text">App Published!</span>
-      </div>
-      <CopyInput
-        value={publishedUrl}
-        label="You can view your app at:"
-        dataCy="deployed-app-url"
-      />
-    </ModalContent>
-  </Modal>
-</span>
+<Modal bind:this={publishCompleteModal}>
+  <ModalContent
+    confirmText="Done"
+    cancelText="View App"
+    onCancel={viewApp}
+    dataCy={"deploy-app-success-modal"}
+  >
+    <div slot="header" class="app-published-header">
+      <svg
+        width="26px"
+        height="26px"
+        class="spectrum-Icon success-icon"
+        focusable="false"
+      >
+        <use xlink:href="#spectrum-icon-18-GlobeCheck" />
+      </svg>
+      <span class="app-published-header-text">App Published!</span>
+    </div>
+    <CopyInput
+      value={publishedUrl}
+      label="You can view your app at:"
+      dataCy="deployed-app-url"
+    />
+  </ModalContent>
+</Modal>
 
 <style>
   .app-published-header {
diff --git a/packages/builder/src/components/design/AppPanel/AppPanel.svelte b/packages/builder/src/components/design/AppPanel/AppPanel.svelte
index 6d5e70b5a1..d34835b43a 100644
--- a/packages/builder/src/components/design/AppPanel/AppPanel.svelte
+++ b/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;