From 1c149d7d5c1b11152e668b661023e04886dcfe4e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Oct 2020 18:12:40 +0100
Subject: [PATCH] Move large create screen button to icon

---
 .../userInterface/FrontendNavigatePane.svelte | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 651cc5c6ac..cf53af2dd5 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -4,20 +4,41 @@
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
   import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
-  import { Button, Spacer, Modal, Heading } from "@budibase/bbui"
+  import { Modal } from "@budibase/bbui"
 
   let modal
 </script>
 
-<Heading small>Screens</Heading>
+<div class="title">
+  <h1>Screens</h1>
+  <i on:click={modal.show} class="ri-add-circle-fill" />
+</div>
 <PagesList />
-
-<Button primary wide on:click={modal.show}>Create New Screen</Button>
 <div class="nav-items-container">
   <PageLayout layout={$store.pages[$store.currentPageName]} />
   <ComponentsHierarchy screens={$store.screens} />
 </div>
-
 <Modal bind:this={modal}>
   <NewScreenModal />
 </Modal>
+
+<style>
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .title h1 {
+    font-size: var(--font-size-m);
+    font-weight: 500;
+    margin: 0;
+  }
+  .title i {
+    font-size: 20px;
+  }
+  .title i:hover {
+    cursor: pointer;
+    color: var(--blue);
+  }
+</style>