diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index 30fb9fd02b..7a82999241 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; @@ -58,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; @@ -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/common/ActionButton.svelte b/packages/builder/src/common/ActionButton.svelte index e1230692d1..f4f13c0757 100644 --- a/packages/builder/src/common/ActionButton.svelte +++ b/packages/builder/src/common/ActionButton.svelte @@ -2,6 +2,7 @@ export let disabled = false export let hidden = false export let primary = true + export let cancel = false export let alert = false export let warning = false @@ -12,6 +13,7 @@ class:hidden class:primary class:alert + class:cancel class:warning {disabled}> @@ -19,8 +21,8 @@ diff --git a/packages/builder/src/common/ConfirmDialog.svelte b/packages/builder/src/common/ConfirmDialog.svelte index 5d1002c483..8b69a120ad 100644 --- a/packages/builder/src/common/ConfirmDialog.svelte +++ b/packages/builder/src/common/ConfirmDialog.svelte @@ -41,13 +41,26 @@

{title}

- {body} + {body}
+ + 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/database/ActionsHeader.svelte b/packages/builder/src/database/ActionsHeader.svelte index 71e3e8abdc..8bec64e7f1 100644 --- a/packages/builder/src/database/ActionsHeader.svelte +++ b/packages/builder/src/database/ActionsHeader.svelte @@ -58,6 +58,7 @@ padding: 1.5rem; width: 100%; align-items: right; + box-sizing: border-box; } .actions-modal-body { diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 745dee014c..a05adfc7c9 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -1,21 +1,23 @@ @import "./budibase.css"; :root { - --primary100: #173157FF; - --primary75: #454CA0BF; - --primary50: #454CA080; - --primary25: #454CA040; - --primary10: #454CA01A; - --primary5: #454ca00c; - --primarydark: #3F448A; + --primary100: #0055ff; + --primary80: rgba(0, 85, 255, 0.8); + --primary60: #rgba(0, 85, 255, 0.6); + --primary40: #rgba(0, 85, 255, 0.4); + --primary20: #rgba(0, 85, 255, 0.2); + --primary10: #rgba(0, 85, 255, 0.1); + --primary5: #rgba(0, 85, 255, 0.05); + --primarydark: #0044cc; - --secondary100:#828fa5; - --secondary75: #162B4DBF; - --secondary50: #162B4D80; - --secondary25: #162B4D40; - --secondary10: #162B4D1A; - --secondary5:#fff; - --secondarydark: #3F448A; + --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: #00021a; --tertiary: #F2F5F7; @@ -35,8 +37,8 @@ --white: #FFFFFF; --darkslate: #1a202c; - --slate: #a0aec0; - --lightslate: #f7fafc; + --slate: #d8d8d8; + --lightslate: #f9f9f9; --borderradius: 2px; --borderradiusall: 2px 2px 2px 2px; @@ -55,13 +57,13 @@ --quotation: var(--fontnormal) "italics" var(--darkslate) 16pt; --smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt; - --background-button: #e6eeff; + --background-button: #f9f9f9; --button-text: #0055ff; } html, body { font-family: var(--fontnormal); - color: var(--secondary100); + color: var(--secondary80); padding: 0; margin: 0; height:100%; @@ -83,7 +85,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/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/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..12c0206407 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/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; } diff --git a/packages/builder/src/userInterface/PropControl.svelte b/packages/builder/src/userInterface/PropControl.svelte index aabd245ac2..7106245428 100644 --- a/packages/builder/src/userInterface/PropControl.svelte +++ b/packages/builder/src/userInterface/PropControl.svelte @@ -34,14 +34,15 @@ grid-template-rows: 1fr; grid-template-columns: 70px 1fr; grid-gap: 10px; + align-items: baseline; } 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..8fd3039eb5 100644 --- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte @@ -43,7 +43,9 @@