Changes to page layout in navbar

Also changed 12px fonts to 13px fonts
6 years ago · b99b5fa7b1
24 changed files with 54 additions and 36 deletions
--- 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 {
--- 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;
--- 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;
--- 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);
  }
--- 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;
--- 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);
--- 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;
  }
--- 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;
--- 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);
--- 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;
  }
--- 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;
  }

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

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