From 150a919c6c88223ed09d02238f0fb4f907649f30 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 16 Mar 2020 18:18:42 +0000
Subject: [PATCH] global ui changes

Changes include:
Label font weights
Secondary color
Icon background colors
Positioning of icons
---
 packages/builder/src/budibase.css             |  7 ++---
 packages/builder/src/global.css               | 17 ++++++------
 packages/builder/src/nav/BackendNav.svelte    |  2 +-
 .../ComponentPropertiesPanel.svelte           | 27 +++++++++++++------
 .../ComponentsHierarchyChildren.svelte        |  2 +-
 .../ComponentsPaneSwitcher.svelte             |  4 +--
 .../src/userInterface/LayoutEditor.svelte     | 13 ++++-----
 .../LayoutTemplateControls.svelte             | 10 +++----
 .../src/userInterface/PagesList.svelte        |  4 +--
 .../src/userInterface/PropControl.svelte      |  6 ++---
 .../PropertyCascader/PropertyCascader.svelte  |  4 +--
 .../userInterface/UserInterfaceRoot.svelte    | 24 ++++++++++++-----
 12 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 30fb9fd02b..582e5bff7f 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -1,7 +1,8 @@
 /* Budibase Component Styles */
 .header {
     font-size: 0.75rem;
-    color: #999;
+    color: #000333;
+    opacity: 0.4;
     text-transform: uppercase;
     margin-top: 1rem;
     font-weight: 500;
@@ -68,7 +69,7 @@
 
 .budibase__nav-item.selected {
     color: var(--button-text);
-    background: var(--background-button) !important;
+    background: #fafafa !important;
 }
 
 .budibase__nav-item:hover {
@@ -82,7 +83,7 @@
     border: 1px solid #DBDBDB;
     text-align: left;
     letter-spacing: 0.7px;
-    color: #163057;
+    color: #000333;
     font-size: 16px;
     padding-left: 5px;
 }
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 745dee014c..15df05b3dc 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -9,12 +9,13 @@
     --primary5: #454ca00c;
     --primarydark: #3F448A;
 
-    --secondary100:#828fa5;
-    --secondary75: #162B4DBF;
-    --secondary50: #162B4D80;
-    --secondary25: #162B4D40;
-    --secondary10: #162B4D1A;
-    --secondary5:#fff;
+    --secondary100:#000333;
+    --secondary80: rgba(0, 3, 51, 0.8);
+    --secondary60: rgba(0, 3, 51, 0.6);
+    --secondary40: rgba(0, 3, 51, 0.4);
+    --secondary20: rgba(0, 3, 51, 0.2);
+    --secondary10: rgba(0, 3, 51, 0.1);
+    --secondary5: rgba(0, 3, 51, 0.05);
     --secondarydark: #3F448A;
 
     --tertiary: #F2F5F7;
@@ -61,7 +62,7 @@
 
 html, body {
     font-family: var(--fontnormal);
-    color: var(--secondary100);
+    color: var(--secondary80);
     padding: 0;
     margin: 0;
     height:100%;
@@ -83,7 +84,7 @@ h2 {
 h3 {
     font-family: var(--fontbold);
     font-size: 24pt;
-    color: var(--darkslate);
+    color: var(--secondary60);
 }
 
 h4 {
diff --git a/packages/builder/src/nav/BackendNav.svelte b/packages/builder/src/nav/BackendNav.svelte
index 1da512d4eb..6956a8e2d8 100644
--- a/packages/builder/src/nav/BackendNav.svelte
+++ b/packages/builder/src/nav/BackendNav.svelte
@@ -99,7 +99,7 @@
     flex-direction: column;
     max-height: 100%;
     height: 100%;
-    background-color: var(--secondary5);
+    background-color: var(--white);
   }
 
   .nav-group-header {
diff --git a/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte
index 4fa7b092bd..4e8f5a40f8 100644
--- a/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/userInterface/ComponentPropertiesPanel.svelte
@@ -162,38 +162,49 @@
   .component-props-container {
     margin-top: 10px;
     flex: 1 1 auto;
-    overflow-y: auto;
   }
 
   ul {
     list-style: none;
     display: flex;
+    justify-content: space-between;
     padding: 0;
   }
 
   li {
-    margin-right: 20px;
     background: none;
-    border-radius: 5px;
+    border-radius: 3px;
     width: 48px;
     height: 48px;
   }
 
+
+
   li button {
-    width: 100%;
-    height: 100%;
+    width: 48px;
+    height: 48px;
     background: none;
     border: none;
-    border-radius: 5px;
-    padding: 12px;
+    border-radius: 3px;
+    padding: 7px;
     outline: none;
     cursor: pointer;
     position: relative;
   }
 
+  li:nth-last-child(1) {
+    margin-right: 0px;
+    background: none;
+    border-radius: 3px;
+    width: 48px;
+    height: 48px;
+  }
+
   .selected {
     color: var(--button-text);
-    background: var(--background-button) !important;
+    background: #f9f9f9 !important;
+    width: 48px;
+    height: 48px;
   }
 
   .button-indicator {
diff --git a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
index 8a168ec11e..d62886ac55 100644
--- a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
@@ -94,7 +94,7 @@
     border-radius: 3px;
     height: 35px;
     align-items: center;
-    font-weight: normal;
+    font-weight: 400;
   }
 
   .item button {
diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
index d7abe25b6d..6cde6369ab 100644
--- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte
@@ -46,7 +46,7 @@
 
     </div>
   {/if}
-
+ 
 </div>
 
 <style>
@@ -85,6 +85,6 @@
     flex: 1 1 auto;
     height: 0px;
     overflow-y: auto;
-    padding: 0 1.5rem 1.5rem 1.5rem;
+    padding: 0 20px 40px 20px;
   }
 </style>
diff --git a/packages/builder/src/userInterface/LayoutEditor.svelte b/packages/builder/src/userInterface/LayoutEditor.svelte
index 44ae3c0d40..f48c1f3c77 100644
--- a/packages/builder/src/userInterface/LayoutEditor.svelte
+++ b/packages/builder/src/userInterface/LayoutEditor.svelte
@@ -136,7 +136,8 @@
     text-transform: uppercase;
     font-size: 12px;
     font-weight: 700;
-    color: #8997ab;
+    color: #000333;
+    opacity: 0.6;
     margin-bottom: 10px;
   }
 
@@ -144,16 +145,16 @@
     text-transform: uppercase;
     font-size: 10px;
     font-weight: 700;
-    color: #163057;
-    opacity: 0.3;
+    color: #000333;
+    opacity: 0.4;
     margin-bottom: 15px;
   }
 
   h5 {
     font-size: 12px;
-    font-weight: 700;
-    color: #163057;
-    opacity: 0.6;
+    font-weight: 400;
+    color: #000333;
+    opacity: 0.8;
     padding-top: 12px;
     margin-bottom: 0;
   }
diff --git a/packages/builder/src/userInterface/LayoutTemplateControls.svelte b/packages/builder/src/userInterface/LayoutTemplateControls.svelte
index 21c375abcc..dc1395bf0e 100644
--- a/packages/builder/src/userInterface/LayoutTemplateControls.svelte
+++ b/packages/builder/src/userInterface/LayoutTemplateControls.svelte
@@ -51,26 +51,26 @@
 <style>
   .selected {
     color: var(--button-text);
-    background: var(--background-button);
+    background: #f9f9f9;
+    opacity: 1;
   }
 
   button {
     cursor: pointer;
     outline: none;
     border: none;
-    border-radius: 5px;
-    background: rgba(249, 249, 249, 1);
+    border-radius: 3px;
 
     min-width: 1.6rem;
     min-height: 1.6rem;
 
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
 
     font-size: 1.2rem;
     font-weight: 500;
-    color: rgba(22, 48, 87, 1);
+    color: #000333;
   }
 
   .inputs {
diff --git a/packages/builder/src/userInterface/PagesList.svelte b/packages/builder/src/userInterface/PagesList.svelte
index 64322e48af..1c57a00c41 100644
--- a/packages/builder/src/userInterface/PagesList.svelte
+++ b/packages/builder/src/userInterface/PagesList.svelte
@@ -46,7 +46,7 @@
   .root {
     padding-bottom: 10px;
     font-size: 0.9rem;
-    color: var(--secondary50);
+    color: #000333;
     font-weight: bold;
     position: relative;
     padding-left: 1.8rem;
@@ -79,6 +79,6 @@
   .icon {
     display: inline-block;
     width: 14px;
-    color: #333;
+    color: #000333;
   }
 </style>
diff --git a/packages/builder/src/userInterface/PropControl.svelte b/packages/builder/src/userInterface/PropControl.svelte
index aabd245ac2..63bcc22550 100644
--- a/packages/builder/src/userInterface/PropControl.svelte
+++ b/packages/builder/src/userInterface/PropControl.svelte
@@ -39,9 +39,9 @@
   h5 {
     word-wrap: break-word;
     font-size: 12px;
-    font-weight: 700;
-    color: #163057;
-    opacity: 0.6;
+    font-weight: 400;
+    color: #000333;
+    opacity: 0.8;
     padding-top: 12px;
     margin-bottom: 0;
   }
diff --git a/packages/builder/src/userInterface/PropertyCascader/PropertyCascader.svelte b/packages/builder/src/userInterface/PropertyCascader/PropertyCascader.svelte
index 27f76b9356..4b51cab58b 100644
--- a/packages/builder/src/userInterface/PropertyCascader/PropertyCascader.svelte
+++ b/packages/builder/src/userInterface/PropertyCascader/PropertyCascader.svelte
@@ -91,9 +91,7 @@
     cursor: pointer;
     outline: none;
     border: none;
-    border-radius: 5px;
-    background: rgba(249, 249, 249, 1);
-
+    border-radius: 3px;
     font-size: 1.6rem;
     font-weight: 700;
     color: rgba(22, 48, 87, 1);
diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
index 18ad131923..d946712df1 100644
--- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte
@@ -108,17 +108,28 @@
     padding: 0;
   }
 
+
+.root {
+  display: grid;
+  grid-template-columns: 275px 1fr 275px;
+  height: 100%;
+  width: 100%;
+  background: #fafafa;
+}
+
+@media only screen and (min-width: 1800px) {
   .root {
     display: grid;
-    grid-template-columns: 290px 1fr 350px;
+    grid-template-columns: 300px 1fr 300px;
     height: 100%;
     width: 100%;
     background: #fafafa;
   }
+}
 
   .ui-nav {
     grid-column: 1;
-    background-color: var(--secondary5);
+    background-color: var(--white);
     height: calc(100vh - 49px);
     padding: 0;
     overflow: hidden;
@@ -136,17 +147,18 @@
 
   .components-pane {
     grid-column: 3;
-    background-color: var(--secondary5);
+    background-color: var(--white);
     min-height: 0px;
     overflow-y: hidden;
   }
 
   .components-nav-header {
-    font-size: 0.75rem;
-    color: #999;
+    font-size: 12px;
+    color: #000333;
     text-transform: uppercase;
     margin-top: 1rem;
-    font-weight: 500;
+    font-weight: 700;
+    opacity: 0.6;
   }
 
   .nav-group-header {