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 01/17] 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 { From 74caf8496f2349a81d69412e22dd47f414040d21 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Tue, 17 Mar 2020 09:57:18 +0000 Subject: [PATCH 02/17] component nav tidy up --- packages/builder/src/common/PlusButton.svelte | 4 +--- packages/builder/src/common/Select.svelte | 9 ++++----- packages/builder/src/global.css | 6 +++--- .../userInterface/ComponentSelectionList.svelte | 12 +++++------- .../userInterface/ComponentsPaneSwitcher.svelte | 15 ++++++++------- 5 files changed, 21 insertions(+), 25 deletions(-) diff --git a/packages/builder/src/common/PlusButton.svelte b/packages/builder/src/common/PlusButton.svelte index 5baca63715..6e2e4cf58a 100644 --- a/packages/builder/src/common/PlusButton.svelte +++ b/packages/builder/src/common/PlusButton.svelte @@ -8,8 +8,6 @@ outline: none; border: none; border-radius: 5px; - background: rgba(249, 249, 249, 1); - min-width: 1.8rem; min-height: 1.8rem; padding-bottom: 10px; @@ -20,6 +18,6 @@ font-size: 1.2rem; font-weight: 700; - color: rgba(22, 48, 87, 1); + color: var(--secondary100); } diff --git a/packages/builder/src/common/Select.svelte b/packages/builder/src/common/Select.svelte index e360c1c4d6..de0c57fc41 100644 --- a/packages/builder/src/common/Select.svelte +++ b/packages/builder/src/common/Select.svelte @@ -23,11 +23,11 @@ } select { - height: 35px; + height: 40px; display: block; font-family: sans-serif; - font-weight: 500; - color: #163057; + font-weight: 400; + color: #000333; padding: 0 2.6em 0em 1.4em; width: 100%; max-width: 100%; @@ -36,8 +36,7 @@ -moz-appearance: none; -webkit-appearance: none; appearance: none; - background: #fff; - border: 1px solid #ccc; + background: var(--lightslate); } .arrow { diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 15df05b3dc..003294ee26 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -36,8 +36,8 @@ --white: #FFFFFF; --darkslate: #1a202c; - --slate: #a0aec0; - --lightslate: #f7fafc; + --slate: #d8d8d8; + --lightslate: #f9f9f9; --borderradius: 2px; --borderradiusall: 2px 2px 2px 2px; @@ -56,7 +56,7 @@ --quotation: var(--fontnormal) "italics" var(--darkslate) 16pt; --smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt; - --background-button: #e6eeff; + --background-button: #f9f9f9; --button-text: #0055ff; } diff --git a/packages/builder/src/userInterface/ComponentSelectionList.svelte b/packages/builder/src/userInterface/ComponentSelectionList.svelte index b123350f10..34e0ca8d33 100644 --- a/packages/builder/src/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/userInterface/ComponentSelectionList.svelte @@ -239,12 +239,12 @@ position: relative; padding: 0 15px; cursor: pointer; - border: 1px solid #ebebeb; + border: 1px solid #d8d8d8; border-radius: 2px; margin: 5px 0; height: 40px; box-sizing: border-box; - color: #163057; + color: #000333; display: flex; align-items: center; flex: 1; @@ -256,11 +256,10 @@ } .component > .name { - color: #163057; + color: #000333; display: inline-block; font-size: 12px; - font-weight: bold; - opacity: 0.6; + opacity: 0.8; } ul { @@ -279,12 +278,11 @@ background: #fafafa; padding: 10px; border-radius: 2px; - color: rgba(22, 48, 87, 0.6); + color:var(--secondary80); } .preset-menu > span { font-size: 12px; - font-weight: bold; text-transform: uppercase; margin-top: 5px; } diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte index 6cde6369ab..504ff18372 100644 --- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte @@ -54,14 +54,15 @@ height: 100%; display: flex; flex-direction: column; - padding: 2rem 0; + padding: 20px 0; } .switcher { display: flex; justify-content: space-between; - margin-bottom: 25px; - padding: 0 1.5rem; + margin-bottom: 20px; + padding: 0 20px 20px; + border-bottom: 1px solid #d8d8d8; } .switcher > button { @@ -70,15 +71,15 @@ margin: 0; padding: 0; cursor: pointer; - font-weight: 600; font-size: 0.85rem; + font-weight: 400; text-transform: uppercase; - color: #999; - background-color: rgba(0, 0, 0, 0); + color: var(--secondary60); } .switcher > .selected { - color: #333; + color: var(--secondary100); + font-weight: 500; } .panel { From 54317f3d53c1f74a22befbbb9d067cb05161edb6 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Tue, 17 Mar 2020 11:16:49 +0000 Subject: [PATCH 03/17] color change --- packages/standard-components/src/Button.svelte | 5 ++--- packages/standard-components/src/Login.svelte | 7 +++---- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte index d4bcd7b354..10f66d9311 100644 --- a/packages/standard-components/src/Button.svelte +++ b/packages/standard-components/src/Button.svelte @@ -78,13 +78,12 @@ box-sizing: border-box; border: 1px solid #ccc; border-radius: 2px; - color: #333; - background-color: #f4f4f4; + color: #000333; outline: none; } .default:active { - background-color: #ddd; + background-color: #f9f9f9; } .default:focus { diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte index b3f6f36779..501023d83e 100644 --- a/packages/standard-components/src/Login.svelte +++ b/packages/standard-components/src/Login.svelte @@ -155,16 +155,15 @@ box-sizing: border-box; border: 1px solid #ccc; border-radius: 2px; - color: #333; - background-color: #f4f4f4; + color: #000333; outline: none; } .default-button:active { - background-color: #ddd; + background-color: #f9f9f9; } .default-button:focus { - border-color: #666; + border-color: #f9f9f9; } From 217906c7df0e5f61c26db3b0a1e8754ffda62eea Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Thu, 19 Mar 2020 09:34:23 +0000 Subject: [PATCH 04/17] navigator panel touch ups the current navigator panel design contains the wrong colors, padding, etc. This resolves that. --- packages/builder/src/budibase.css | 2 +- .../ComponentsPaneSwitcher.svelte | 2 +- .../src/userInterface/PropControl.svelte | 1 + .../userInterface/UserInterfaceRoot.svelte | 38 +++++++++++-------- 4 files changed, 25 insertions(+), 18 deletions(-) diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index 582e5bff7f..7a82999241 100644 --- a/packages/builder/src/budibase.css +++ b/packages/builder/src/budibase.css @@ -59,7 +59,7 @@ cursor: pointer; padding: 0 7px 0 3px; height: 35px; - margin: 5px 0; + margin: 5px 20px 5px 0px; border-radius: 0 5px 5px 0; display: flex; align-items: center; diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte index 504ff18372..12c0206407 100644 --- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte @@ -71,7 +71,7 @@ margin: 0; padding: 0; cursor: pointer; - font-size: 0.85rem; + font-size: 14px; font-weight: 400; text-transform: uppercase; color: var(--secondary60); diff --git a/packages/builder/src/userInterface/PropControl.svelte b/packages/builder/src/userInterface/PropControl.svelte index 63bcc22550..7106245428 100644 --- a/packages/builder/src/userInterface/PropControl.svelte +++ b/packages/builder/src/userInterface/PropControl.svelte @@ -34,6 +34,7 @@ grid-template-rows: 1fr; grid-template-columns: 70px 1fr; grid-gap: 10px; + align-items: baseline; } h5 { diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte index d946712df1..8fd3039eb5 100644 --- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte @@ -43,7 +43,9 @@