global ui changes

Changes include: Label font weights Secondary color Icon background colors Positioning of icons
7 years ago · 150a919c6c
12 changed files with 72 additions and 48 deletions
--- 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;
 }
--- 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 {
--- 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 {
--- 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 {
--- 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 {
--- 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>
--- 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;
  }
--- 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 {
--- 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>
--- 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;
  }
--- 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);
--- 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 {