From e20b65c13b3c9d108ecef5c36fada9bfe36e2859 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Sat, 23 May 2020 13:00:38 +0100
Subject: [PATCH] Panel titles updated

Panel titles updated to represent designs
Further work is required to use global styles to control this
---
 .../src/components/nav/BackendNav.svelte      |  8 +++----
 .../nav/SchemaManagementDrawer.svelte         |  8 +++----
 .../ComponentsPaneSwitcher.svelte             | 18 +++++---------
 packages/builder/src/global.css               |  2 +-
 .../[application]/backend/_layout.svelte      |  9 +++++++
 .../[application]/frontend/_layout.svelte     | 24 +++++++------------
 6 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte
index 64812353fd..8a7fd6bb90 100644
--- a/packages/builder/src/components/nav/BackendNav.svelte
+++ b/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 {
diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
index 7d678c9104..cc9e5d86a7 100644
--- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte
+++ b/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 {
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
index 9ca5b1e122..1c7e2e8693 100644
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ b/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>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index fde574de48..3ad5851157 100644
--- a/packages/builder/src/global.css
+++ b/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 {
diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte
index 153226dc5a..4a4a715534 100644
--- a/packages/builder/src/pages/[application]/backend/_layout.svelte
+++ b/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>
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 67cffb9577..df9762fb07 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/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 {