From b99b5fa7b1e56f2cebad29e284947dc0de269c26 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 2 Apr 2020 17:11:38 +0100
Subject: [PATCH] Changes to page layout in navbar

Also changed 12px fonts to 13px fonts
---
 packages/builder/src/budibase.css             |  4 ++--
 .../components/common/AppNotification.svelte  |  2 +-
 .../common/Inputs/InputGroup.svelte           |  2 +-
 .../components/database/DatabaseRoot.svelte   |  2 +-
 .../src/components/nav/BackendNav.svelte      |  2 +-
 .../src/components/nav/DatabasesList.svelte   |  4 ++--
 .../src/components/nav/HierarchyRow.svelte    |  2 +-
 .../nav/SchemaManagementDrawer.svelte         |  2 +-
 .../src/components/nav/UsersList.svelte       |  2 +-
 .../userInterface/CodeEditor.svelte           |  4 ++--
 .../ComponentPropertiesPanel.svelte           |  4 ++--
 .../ComponentSelectionList.svelte             |  6 ++---
 .../userInterface/ComponentsHierarchy.svelte  |  3 ++-
 .../ComponentsHierarchyChildren.svelte        |  1 +
 .../userInterface/EditComponentProps.svelte   |  2 +-
 .../EventsEditor/EventEditorModal.svelte      |  2 +-
 .../EventsEditor/EventsEditor.svelte          |  2 +-
 .../EventsEditor/HandlerSelector.svelte       |  2 +-
 .../EventsEditor/StateBindingCascader.svelte  |  2 +-
 .../userInterface/LayoutEditor.svelte         |  6 ++---
 .../userInterface/PageLayout.svelte           | 24 +++++++++++++++----
 .../userInterface/PropControl.svelte          |  4 ++--
 .../StateBindingOptions.svelte                |  2 +-
 .../userInterface/UserInterfaceRoot.svelte    |  4 ++--
 24 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index fce34b256e..48b6d2d7f3 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -37,7 +37,7 @@
 
 .budibase__label--medium {
     font-weight: 500;
-    font-size: 12px;
+    font-size: 13px;
     opacity: 0.6;
     text-transform: uppercase;
 }
@@ -64,7 +64,7 @@
     display: flex;
     align-items: baseline;
     font-weight: 500;
-    font-size: 12px;
+    font-size: 13px;
 }
 
 .budibase__nav-item.selected {
diff --git a/packages/builder/src/components/common/AppNotification.svelte b/packages/builder/src/components/common/AppNotification.svelte
index 59e6730857..fdd0de8f4a 100644
--- a/packages/builder/src/components/common/AppNotification.svelte
+++ b/packages/builder/src/components/common/AppNotification.svelte
@@ -63,7 +63,7 @@
   }
 
   :global(.refresh-page-button) {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 600;
     border-radius: 5px;
     border: none;
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index aec6bcc297..078edea28f 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -30,7 +30,7 @@
 
   input {
     width: 83px;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #163057;
     opacity: 0.7;
diff --git a/packages/builder/src/components/database/DatabaseRoot.svelte b/packages/builder/src/components/database/DatabaseRoot.svelte
index d1cd745742..98100e884a 100644
--- a/packages/builder/src/components/database/DatabaseRoot.svelte
+++ b/packages/builder/src/components/database/DatabaseRoot.svelte
@@ -94,7 +94,7 @@
 
   .breadcrumb {
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 500;
     color: var(--secondary60);
   }
diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte
index 458e5c67df..9542771725 100644
--- a/packages/builder/src/components/nav/BackendNav.svelte
+++ b/packages/builder/src/components/nav/BackendNav.svelte
@@ -63,7 +63,7 @@
   .hierarchy-title {
     align-items: center;
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: bold;
     opacity: 0.6;
     letter-spacing: 1px;
diff --git a/packages/builder/src/components/nav/DatabasesList.svelte b/packages/builder/src/components/nav/DatabasesList.svelte
index a9b8800dad..3a44a7f4db 100644
--- a/packages/builder/src/components/nav/DatabasesList.svelte
+++ b/packages/builder/src/components/nav/DatabasesList.svelte
@@ -57,7 +57,7 @@
 
 <style>
   .root {
-    font-size: 12px;
+    font-size: 13px;
     color: var(--secondary100);
     position: relative;
     padding-left: 20px;
@@ -85,7 +85,7 @@
     padding: 0;
     border: none;
     font-family: Roboto;
-    font-size: 12px;
+    font-size: 13px;
     outline: none;
     cursor: pointer;
     background: rgba(0, 0, 0, 0);
diff --git a/packages/builder/src/components/nav/HierarchyRow.svelte b/packages/builder/src/components/nav/HierarchyRow.svelte
index 45811c5ca5..06f864d61e 100644
--- a/packages/builder/src/components/nav/HierarchyRow.svelte
+++ b/packages/builder/src/components/nav/HierarchyRow.svelte
@@ -52,7 +52,7 @@
 
 <style>
   .hierarchy-item {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 400;
     margin-bottom: 10px;
   }
diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
index 90ba653e9b..40b1d2dee4 100644
--- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
+++ b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
@@ -68,7 +68,7 @@
   .hierarchy-title {
     align-items: center;
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: bold;
     opacity: 0.6;
     letter-spacing: 1px;
diff --git a/packages/builder/src/components/nav/UsersList.svelte b/packages/builder/src/components/nav/UsersList.svelte
index 1caabf8a2a..1ea129e7c4 100644
--- a/packages/builder/src/components/nav/UsersList.svelte
+++ b/packages/builder/src/components/nav/UsersList.svelte
@@ -68,7 +68,7 @@
     padding: 0;
     border: none;
     font-family: Roboto;
-    font-size: 0.8rem;
+    font-size: 13px;
     outline: none;
     cursor: pointer;
     background: rgba(0, 0, 0, 0);
diff --git a/packages/builder/src/components/userInterface/CodeEditor.svelte b/packages/builder/src/components/userInterface/CodeEditor.svelte
index 7f6bc9c297..668a05bbee 100644
--- a/packages/builder/src/components/userInterface/CodeEditor.svelte
+++ b/packages/builder/src/components/userInterface/CodeEditor.svelte
@@ -86,14 +86,14 @@
 <style>
   h3 {
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #8997ab;
     margin-bottom: 10px;
   }
 
   p {
-    font-size: 12px;
+    font-size: 13px;
     color: #333;
     margin-top: 0;
   }
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index b9af0888d5..b953217f4d 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -120,11 +120,11 @@
 
   .detail-prop label {
     word-wrap: break-word;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #163057;
     opacity: 0.6;
-    padding-top: 12px;
+    padding-top: 13px;
     margin-bottom: 0;
   }
 
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 0ba617c32f..dab98f9173 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -258,7 +258,7 @@
   .component > .name {
     color: #000333;
     display: inline-block;
-    font-size: 12px;
+    font-size: 13px;
     opacity: 0.8;
   }
 
@@ -282,7 +282,7 @@
   }
 
   .preset-menu > span {
-    font-size: 12px;
+    font-size: 13px;
     text-transform: uppercase;
     margin-top: 5px;
   }
@@ -308,7 +308,7 @@
     background: none;
     border: none;
     border-radius: 5px;
-    padding: 12px;
+    padding: 13px;
     outline: none;
     cursor: pointer;
   } */
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 945d956c04..2df4f8feef 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -98,12 +98,13 @@
 <style>
   .root {
     font-weight: 400;
-    color: #333;
+    color: #000333;
   }
 
   .title {
     margin-left: 10px;
     margin-top: 2px;
+    font-size: 13px;
   }
 
   .icon {
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index d62886ac55..f1d72da457 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -95,6 +95,7 @@
     height: 35px;
     align-items: center;
     font-weight: 400;
+    font-size: 13px;
   }
 
   .item button {
diff --git a/packages/builder/src/components/userInterface/EditComponentProps.svelte b/packages/builder/src/components/userInterface/EditComponentProps.svelte
index f193d7cd55..775957c64b 100644
--- a/packages/builder/src/components/userInterface/EditComponentProps.svelte
+++ b/packages/builder/src/components/userInterface/EditComponentProps.svelte
@@ -85,6 +85,6 @@
     background: none;
     border: none;
     border-radius: 5px;
-    padding: 12px;
+    padding: 13px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index de5f0dd883..d579248ddf 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -160,7 +160,7 @@
 
   a {
     color: rgba(22, 48, 87, 0.6);
-    font-size: 12px;
+    font-size: 13px;
     margin-top: 0;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
index d4c31ae2c0..cb9ede73c3 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@@ -88,7 +88,7 @@
 <style>
   h3 {
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #8997ab;
     margin-bottom: 10px;
diff --git a/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte b/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
index dacdf60681..bcfb757937 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
@@ -139,7 +139,7 @@
   }
 
   span {
-    font-size: 12px;
+    font-size: 13px;
     margin-bottom: 5px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
index fdadc20a67..46801e2723 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
@@ -68,7 +68,7 @@
   }
 
   span {
-    font-size: 12px;
+    font-size: 13px;
     margin-bottom: 5px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/LayoutEditor.svelte b/packages/builder/src/components/userInterface/LayoutEditor.svelte
index 4ded376d47..0f3efaec0a 100644
--- a/packages/builder/src/components/userInterface/LayoutEditor.svelte
+++ b/packages/builder/src/components/userInterface/LayoutEditor.svelte
@@ -131,7 +131,7 @@
 <style>
   h3 {
     text-transform: uppercase;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 700;
     color: #000333;
     opacity: 0.6;
@@ -149,11 +149,11 @@
   }
 
   h5 {
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 400;
     color: #000333;
     opacity: 0.8;
-    padding-top: 12px;
+    padding-top: 13px;
     margin-bottom: 0;
   }
 
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index 7e854939f7..56d8cf8a2e 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -50,7 +50,8 @@
   }
 </script>
 
-<div>
+<div class="pagelayoutSection">
+  <div class="components-nav-page">Page Layout</div>
   <div
     class="budibase__nav-item root"
     class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
@@ -88,12 +89,27 @@
   onOk={() => store.deleteComponent(componentToDelete)} />
 
 <style>
+.components-nav-page {
+  font-size: 13px;
+  color: #000333;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+  padding-left: 20px;
+  font-weight: 600;
+  opacity: 0.4;
+  letter-spacing: 1px;
+}
+
+
+.pagelayoutSection {
+  margin: 20px 0px 20px 0px;
+}
   .root {
-    
+
   }
   .title {
     margin-left: 10px;
-    margin-top: 2px;
+    font-size: 13px;
   }
 
   .icon {
@@ -101,7 +117,7 @@
     transition: 0.2s;
     width: 20px;
     margin-top: 2px;
-    color: #333;
+    color: #000333;
   }
 
   .icon:nth-of-type(2) {
diff --git a/packages/builder/src/components/userInterface/PropControl.svelte b/packages/builder/src/components/userInterface/PropControl.svelte
index 7106245428..62a0ba6103 100644
--- a/packages/builder/src/components/userInterface/PropControl.svelte
+++ b/packages/builder/src/components/userInterface/PropControl.svelte
@@ -39,11 +39,11 @@
 
   h5 {
     word-wrap: break-word;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 400;
     color: #000333;
     opacity: 0.8;
-    padding-top: 12px;
+    padding-top: 13px;
     margin-bottom: 0;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte b/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte
index bd35366929..06f8289a34 100644
--- a/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte
+++ b/packages/builder/src/components/userInterface/PropertyCascader/StateBindingOptions.svelte
@@ -45,7 +45,7 @@
 
   .name {
     color: rgba(22, 48, 87, 0.6);
-    font-size: 12px;
+    font-size: 13px;
     font-weight: bold;
     text-transform: uppercase;
     margin-top: 5px;
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index 266772517d..549573a121 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -157,7 +157,7 @@
   }
 
   .components-nav-page {
-    font-size: 12px;
+    font-size: 13px;
     color: #000333;
     text-transform: uppercase;
     padding-left: 20px;
@@ -168,7 +168,7 @@
   }
 
   .components-nav-header {
-    font-size: 12px;
+    font-size: 13px;
     color: #000333;
     text-transform: uppercase;
     margin-top: 20px;