From 4ef1d9453a45c4767b4720706a1ddae2ded3b52f Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 1 Jun 2020 22:16:12 +0100
Subject: [PATCH 1/2] Frontend navigation panel tidy up

- Additional margin around button
- icon added to 'create screen' button
- screen font weight reduced
---
 packages/builder/src/components/common/Switcher.svelte |  1 +
 .../userInterface/ComponentsHierarchy.svelte           |  2 +-
 .../userInterface/FrontendNavigatePane.svelte          | 10 ++++++++--
 .../src/components/userInterface/PageLayout.svelte     |  8 ++------
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte
index b1c84e6eac..0253a7f9d3 100644
--- a/packages/builder/src/components/common/Switcher.svelte
+++ b/packages/builder/src/components/common/Switcher.svelte
@@ -61,6 +61,7 @@
     font-weight: 700;
     color: var(--ink-lighter);
     margin-right: 20px;
+    background: none;
   }
 
   .switcher > .selected {
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 7a2e38d3d2..041377aedc 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -80,7 +80,7 @@
     margin-left: 10px;
     margin-top: 2px;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
   }
 
   .icon {
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 86804885ff..f567766b50 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -14,7 +14,7 @@
 
 <PagesList />
 
-<button class="newscreen" on:click={newScreen}>Create New Screen</button>
+<button class="newscreen" on:click={newScreen}><i class="icon ri-add-circle-fill"></i>Create New Screen</button>
 
 <PageLayout layout={$store.pages[$store.currentPageName]} />
 
@@ -31,7 +31,7 @@
     border-radius: 3px;
     width: 100%;
     padding: 8px 16px;
-    margin: 12px 0px;
+    margin: 20px 0px 12px 0px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -45,4 +45,10 @@
   .newscreen:hover {
     background: var(--grey-light);
   }
+
+  .icon {
+    color: var(--ink);
+    font-size: 16px;
+    margin-right: 4px;
+  }
 </style>
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 093dd12e4e..d63f8f7dc1 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -40,7 +40,7 @@
   }
 </script>
 
-<div class="pagelayoutSection">
+
   <div
     class="budibase__nav-item root"
     class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
@@ -60,17 +60,13 @@
       components={_layout.component.props._children}
       currentComponent={$store.currentComponentInfo} />
   {/if}
-</div>
 
 <style>
-  .pagelayoutSection {
-    margin: 20px 0px 0px 0px;
-  }
 
   .title {
     margin-left: 10px;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
     color: var(--ink);
   }
 

From 1555bc52259718b1422ccc1168483ae364c0e2e2 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 1 Jun 2020 22:16:55 +0100
Subject: [PATCH 2/2] formatting

---
 .../ComponentDropdownMenu.svelte              | 60 +++++++++++++++----
 .../userInterface/FrontendNavigatePane.svelte |  5 +-
 .../userInterface/PageLayout.svelte           | 38 ++++++------
 3 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index a4e8a1f7b3..b7cb74fb3c 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -1,4 +1,4 @@
- <script>
+<script>
   import { MoreIcon } from "components/common/Icons"
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/store"
@@ -155,16 +155,52 @@
     <MoreIcon />
   </button>
   <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
-    <li class="item" on:click={() => confirmDeleteDialog.show()}><i class="icon ri-delete-bin-2-line"></i>Delete</li>
-    <li class="item" on:click={moveUpComponent}><i class="icon ri-arrow-up-line"></i>Move up</li>
-    <li class="item" on:click={moveDownComponent}><i class="icon ri-arrow-down-line"></i>Move down</li>
-    <li class="item" on:click={copyComponent}><i class="icon ri-repeat-one-line"></i>Duplicate</li>
-    <li class="item" on:click={() => storeComponentForCopy(true)}><i class="icon ri-scissors-cut-line"></i>Cut</li>
-    <li class="item" on:click={() => storeComponentForCopy(false)}><i class="icon ri-file-copy-line"></i>Copy</li>
-    <hr class="hr-style">
-    <li class="item" class:disabled={noPaste} on:click={() => pasteComponent('above')}><i class="icon ri-insert-row-top"></i>Paste above</li>
-    <li class="item" class:disabled={noPaste} on:click={() => pasteComponent('below')}><i class="icon ri-insert-row-bottom"></i>Paste below</li>
-    <li class="item" class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent('inside')}><i class="icon ri-insert-column-right"></i>Paste inside</li>
+    <li class="item" on:click={() => confirmDeleteDialog.show()}>
+      <i class="icon ri-delete-bin-2-line" />
+      Delete
+    </li>
+    <li class="item" on:click={moveUpComponent}>
+      <i class="icon ri-arrow-up-line" />
+      Move up
+    </li>
+    <li class="item" on:click={moveDownComponent}>
+      <i class="icon ri-arrow-down-line" />
+      Move down
+    </li>
+    <li class="item" on:click={copyComponent}>
+      <i class="icon ri-repeat-one-line" />
+      Duplicate
+    </li>
+    <li class="item" on:click={() => storeComponentForCopy(true)}>
+      <i class="icon ri-scissors-cut-line" />
+      Cut
+    </li>
+    <li class="item" on:click={() => storeComponentForCopy(false)}>
+      <i class="icon ri-file-copy-line" />
+      Copy
+    </li>
+    <hr class="hr-style" />
+    <li
+      class="item"
+      class:disabled={noPaste}
+      on:click={() => pasteComponent('above')}>
+      <i class="icon ri-insert-row-top" />
+      Paste above
+    </li>
+    <li
+      class="item"
+      class:disabled={noPaste}
+      on:click={() => pasteComponent('below')}>
+      <i class="icon ri-insert-row-bottom" />
+      Paste below
+    </li>
+    <li
+      class="item"
+      class:disabled={noPaste || noChildrenAllowed}
+      on:click={() => pasteComponent('inside')}>
+      <i class="icon ri-insert-column-right" />
+      Paste inside
+    </li>
   </ul>
 </div>
 
@@ -235,6 +271,6 @@
 
   .hr-style {
     margin: 8px 0;
-    color: var(--grey-dark)
+    color: var(--grey-dark);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index f567766b50..59fc13bcd1 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
@@ -14,7 +14,10 @@
 
 <PagesList />
 
-<button class="newscreen" on:click={newScreen}><i class="icon ri-add-circle-fill"></i>Create New Screen</button>
+<button class="newscreen" on:click={newScreen}>
+  <i class="icon ri-add-circle-fill" />
+  Create New Screen
+</button>
 
 <PageLayout layout={$store.pages[$store.currentPageName]} />
 
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index d63f8f7dc1..c2ad4b590b 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -40,29 +40,27 @@
   }
 </script>
 
+<div
+  class="budibase__nav-item root"
+  class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
+  on:click|stopPropagation={setCurrentScreenToLayout}>
+  <span
+    class="icon"
+    class:rotate={$store.currentPreviewItem.name !== _layout.title}>
+    <ArrowDownIcon />
+  </span>
+  <i class="ri-layout-3-fill icon-big" />
+  <span class="title">Master Screen</span>
+</div>
 
-  <div
-    class="budibase__nav-item root"
-    class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
-    on:click|stopPropagation={setCurrentScreenToLayout}>
-    <span
-      class="icon"
-      class:rotate={$store.currentPreviewItem.name !== _layout.title}>
-      <ArrowDownIcon />
-    </span>
-    <i class="ri-layout-3-fill icon-big" />
-    <span class="title">Master Screen</span>
-  </div>
-
-  {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
-    <ComponentsHierarchyChildren
-      thisComponent={_layout.component.props}
-      components={_layout.component.props._children}
-      currentComponent={$store.currentComponentInfo} />
-  {/if}
+{#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
+  <ComponentsHierarchyChildren
+    thisComponent={_layout.component.props}
+    components={_layout.component.props._children}
+    currentComponent={$store.currentComponentInfo} />
+{/if}
 
 <style>
-
   .title {
     margin-left: 10px;
     font-size: 14px;