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

@@ -61,6 +61,7 @@
     font-weight: 700;
     color: var(--ink-lighter);
     margin-right: 20px;
+    background: none;
   }
 
   .switcher > .selected {

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 {

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>

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);
   }