From 03d6a75af8fc62e3723f7acad2b7db9d80eb1acf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 22 Jul 2022 12:04:20 +0100
Subject: [PATCH] Replace preview icon with button

---
 .../components/deploy/DeployNavigation.svelte | 16 +++++++++++++++-
 .../builder/app/[application]/_layout.svelte  | 19 ++++++++-----------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/deploy/DeployNavigation.svelte b/packages/builder/src/components/deploy/DeployNavigation.svelte
index d12b31beaf..676d7a5b7f 100644
--- a/packages/builder/src/components/deploy/DeployNavigation.svelte
+++ b/packages/builder/src/components/deploy/DeployNavigation.svelte
@@ -56,6 +56,10 @@
     }
   }
 
+  const previewApp = () => {
+    window.open(`/${application}`)
+  }
+
   const viewApp = () => {
     analytics.captureEvent(Events.APP_VIEW_PUBLISHED, {
       appId: selectedApp.appId,
@@ -174,7 +178,10 @@
   Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
 </ConfirmDialog>
 
-<DeployModal onOk={completePublish} />
+<div class="buttons">
+  <Button on:click={previewApp} newStyles secondary>Preview</Button>
+  <DeployModal onOk={completePublish} />
+</div>
 
 <style>
   .publish-popover-actions :global([data-cy="publish-popover-action"]) {
@@ -183,4 +190,11 @@
   :global([data-cy="publish-popover-menu"]) {
     padding: 10px;
   }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index df84277142..54b685f541 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -1,7 +1,14 @@
 <script>
   import { store, automationStore } from "builderStore"
   import { roles, flags } from "stores/backend"
-  import { Icon, Tabs, Tab, Heading, notifications } from "@budibase/bbui"
+  import {
+    Icon,
+    Tabs,
+    Tab,
+    Heading,
+    notifications,
+    Button,
+  } from "@budibase/bbui"
   import RevertModal from "components/deploy/RevertModal.svelte"
   import VersionModal from "components/deploy/VersionModal.svelte"
   import DeployNavigation from "components/deploy/DeployNavigation.svelte"
@@ -23,10 +30,6 @@
     $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
   )
 
-  const previewApp = () => {
-    window.open(`/${application}`)
-  }
-
   async function getPackage() {
     try {
       store.actions.reset()
@@ -110,12 +113,6 @@
       <div class="toprightnav">
         <VersionModal />
         <RevertModal />
-        <Icon
-          name="Visibility"
-          tooltip="Open app preview"
-          hoverable
-          on:click={previewApp}
-        />
         <DeployNavigation {application} />
       </div>
     </div>