From c469d765c5e991083e7c861926f4d182237ddde5 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 @@ {/if} - + 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 @@ 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 {