Merge pull request #250 from Budibase/Panel-Titles

Panel titles updated

packages/builder/src/components/nav/BackendNav.svelte

@@ -81,12 +81,10 @@
 
   .hierarchy-title {
     align-items: center;
-    text-transform: uppercase;
-    font-size: 13px;
-    font-weight: bold;
-    opacity: 0.6;
-    letter-spacing: 1px;
+    font-size: 18px;
+    font-weight: 700;
     text-rendering: optimizeLegibility;
+    color: var(--ink);
   }
 
   .hierarchy {

packages/builder/src/components/nav/SchemaManagementDrawer.svelte

@@ -125,12 +125,10 @@
 
   .hierarchy-title {
     align-items: center;
-    text-transform: uppercase;
-    font-size: 13px;
-    font-weight: bold;
-    opacity: 0.6;
-    letter-spacing: 1px;
+    font-size: 18px;
+    font-weight: 700;
     text-rendering: optimizeLegibility;
+    color: var(--ink);
   }
 
   .hierarchy {

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

@@ -24,7 +24,7 @@
       <button
         class:selected={selected === COMPONENT_SELECTION_TAB}
         on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
-        Components
+        Add
       </button>
 
       <button
@@ -59,28 +59,22 @@
 
   .switcher {
     display: flex;
-    justify-content: space-between;
-    margin: 20px;
+    margin: 0px 20px 20px 20px;
   }
 
   .switcher > button {
-    text-rendering: optimizeLegibility;
     display: inline-block;
     border: none;
     margin: 0;
     padding: 0;
     cursor: pointer;
-    font-size: 14px;
-    text-transform: uppercase;
-    background: rgba(0, 0, 0, 0);
-    font-weight: 500;
-    color: var(--secondary40);
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--ink-lighter);
     margin-right: 20px;
-    letter-spacing: 1px;
   }
 
   .switcher > .selected {
-    color: var(--secondary100);
-    font-weight: 600;
+    color: var(--ink);
   }
 </style>

packages/builder/src/global.css

@@ -110,7 +110,7 @@ h3 {
 h4 {
     font-family: var(--fontbold);
     font-size: 18pt;
-    color: var(--secondary100);
+    color: var(--ink);
 }
 
 h5 {

packages/builder/src/pages/[application]/backend/_layout.svelte

@@ -37,4 +37,13 @@
     width: 275px;
     height: 100%;
   }
+
+@media only screen and (min-width: 1800px) {
+  .nav {
+    overflow: auto;
+    flex: 0 1 auto;
+    width: 300px;
+    height: 100%;
+  }
+}
 </style>

packages/builder/src/pages/[application]/frontend/_layout.svelte

@@ -54,9 +54,7 @@
 
     <div class="pages-list-container">
       <div class="nav-header">
-        <span class="navigator-title">Navigator</span>
-        <div class="border-line" />
-
+        <span class="navigator-title">Navigate</span>
         <span class="components-nav-page">Pages</span>
       </div>
 
@@ -131,7 +129,7 @@
     grid-template-columns: 275px 1fr 275px;
     height: 100%;
     width: 100%;
-    background: #fafafa;
+    background: var(--grey-light);
   }
 
   @media only screen and (min-width: 1800px) {
@@ -140,7 +138,7 @@
       grid-template-columns: 300px 1fr 300px;
       height: 100%;
       width: 100%;
-      background: #fafafa;
+      background: var(--grey-light);
     }
   }
 
@@ -159,7 +157,6 @@
     margin: 40px;
     background: #fff;
     border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
   }
 
   .components-pane {
@@ -171,8 +168,7 @@
 
   .components-nav-page {
     font-size: 13px;
-    color: #000333;
-    text-transform: uppercase;
+    color: var(--ink);
     padding-left: 20px;
     margin-top: 20px;
     font-weight: 600;
@@ -182,8 +178,7 @@
 
   .components-nav-header {
     font-size: 13px;
-    color: #000333;
-    text-transform: uppercase;
+    color: var(--ink);
     margin-top: 20px;
     font-weight: 600;
     opacity: 0.4;
@@ -235,13 +230,10 @@
   }
 
   .navigator-title {
-    font-size: 14px;
-    color: var(--secondary100);
-    font-weight: 600;
-    text-transform: uppercase;
+    font-size: 18px;
+    color: var(--ink);
+    font-weight: bold;
     padding: 0 20px 20px 20px;
-    line-height: 1rem !important;
-    letter-spacing: 1px;
   }
 
   .border-line {