Merge pull request #194 from Budibase/page-layout-nav-redesigned

Changes to page layout in navbar

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 {

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;

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;

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

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;

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

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

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;

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

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

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

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;
   } */

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 {

packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte

@@ -95,6 +95,7 @@
     height: 35px;
     align-items: center;
     font-weight: 400;
+    font-size: 13px;
   }
 
   .item button {

packages/builder/src/components/userInterface/EditComponentProps.svelte

@@ -85,6 +85,6 @@
     background: none;
     border: none;
     border-radius: 5px;
-    padding: 12px;
+    padding: 13px;
   }
 </style>

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>

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;

packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte

@@ -139,7 +139,7 @@
   }
 
   span {
-    font-size: 12px;
+    font-size: 13px;
     margin-bottom: 5px;
   }
 </style>

packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte

@@ -68,7 +68,7 @@
   }
 
   span {
-    font-size: 12px;
+    font-size: 13px;
     margin-bottom: 5px;
   }
 </style>

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

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) {

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>

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;

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;