Merge pull request #155 from Budibase/global-ui-changes

global ui changes

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

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 {

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 {

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 {

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 {

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>

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

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 {

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>

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

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

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 {