From 5e98c3e9cb5d6458a8082799e3affce9798f81e0 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Sat, 23 May 2020 09:49:25 +0100 Subject: [PATCH 1/5] Top nav redesign New BB logo added, and sizing changed. Nav items margin changed to reflect designs Nav items color changed to reflect new simplified color scheme Bottom border added Nav background color changed *Global styles is a work in progress. --- packages/builder/assets/bb-logo.svg | 31 +++++++++++++++++++ packages/builder/src/global.css | 19 ++++++++++-- .../src/pages/[application]/_layout.svelte | 26 +++++++++------- packages/server/builder/assets/bb-logo.svg | 31 +++++++++++++++++++ 4 files changed, 93 insertions(+), 14 deletions(-) create mode 100644 packages/builder/assets/bb-logo.svg create mode 100644 packages/server/builder/assets/bb-logo.svg diff --git a/packages/builder/assets/bb-logo.svg b/packages/builder/assets/bb-logo.svg new file mode 100644 index 0000000000..7d115faefc --- /dev/null +++ b/packages/builder/assets/bb-logo.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 999415931a..fde574de48 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -1,5 +1,20 @@ :root { + + --white: #FFFFFF; + + --blue: #0055ff; + --blue-light: #F1F4FC; + --blue-dark: #2F4C9B; + + --ink: #393C44; + --ink-light: #808192; + --ink-lighter: #ADAEC4; + + --grey: #F2F2F2; + --grey-light: #FBFBFB; + --grey-dark: #E6E6E6; + --primary100: #0055ff; --primary80: rgba(0, 85, 255, 0.8); --primary60: #rgba(0, 85, 255, 0.6); @@ -9,7 +24,7 @@ --primary5: #rgba(0, 85, 255, 0.05); --primarydark: #0044cc; - --secondary100:#000333; + --secondary100:#393C44; --secondary80: rgba(0, 3, 51, 0.8); --secondary60: rgba(0, 3, 51, 0.6); --secondary40: rgba(0, 3, 51, 0.4); @@ -34,7 +49,7 @@ --deletion10: #F2545B1A; --deletiondark: #CF4046; - --white: #FFFFFF; + --darkslate: #1a202c; --slate: #d8d8d8; --lightslate: #f9f9f9; diff --git a/packages/builder/src/pages/[application]/_layout.svelte b/packages/builder/src/pages/[application]/_layout.svelte index 02f4e9884d..905910f7f5 100644 --- a/packages/builder/src/pages/[application]/_layout.svelte +++ b/packages/builder/src/pages/[application]/_layout.svelte @@ -31,7 +31,7 @@
@@ -85,13 +85,14 @@ .top-nav { flex: 0 0 auto; - height: 48px; - background: #0d203b; + height: 60px; + background: #fff; padding: 0px 20px 0 20px; display: flex; box-sizing: border-box; justify-content: space-between; align-items: center; + border-bottom: 1px solid var(--grey); } .content > div { @@ -110,8 +111,8 @@ .topnavitem { cursor: pointer; - color: rgb(255, 255, 255, 0.6); - margin: 0px 10px; + color: var(--ink-lighter); + margin: 0px 00px 0px 20px; padding-top: 4px; font-weight: 500; font-size: 1rem; @@ -121,19 +122,19 @@ } .topnavitem:hover { - color: rgb(255, 255, 255, 0.8); + color: var(--ink-light); font-weight: 500; } .active { - color: white; - font-weight: 600; + color: var(--ink); + font-weight: 500; } .topnavitemright { cursor: pointer; - color: rgb(255, 255, 255, 0.6); - margin: 0px 5px; + color: var(--ink-light); + margin: 0px 20px 0px 0px; padding-top: 4px; font-weight: 500; font-size: 1rem; @@ -155,7 +156,8 @@ cursor: pointer; outline: none; height: 40px; - padding: 8px 10px 8px 0; + padding: 0px 10px 8px 0; + align-items: center; } .home-logo:hover { @@ -167,7 +169,7 @@ } .home-logo img { - height: 100%; + height: 40px; } span:first-letter { text-transform: capitalize; diff --git a/packages/server/builder/assets/bb-logo.svg b/packages/server/builder/assets/bb-logo.svg new file mode 100644 index 0000000000..7d115faefc --- /dev/null +++ b/packages/server/builder/assets/bb-logo.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + From 8afaf98df3b4a3e68c380f64b488e835a3e4c0c6 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Sat, 23 May 2020 13:00:38 +0100 Subject: [PATCH 2/5] Panel titles updated Panel titles updated to represent designs Further work is required to use global styles to control this --- .../src/components/nav/BackendNav.svelte | 8 +++---- .../nav/SchemaManagementDrawer.svelte | 8 +++---- .../ComponentsPaneSwitcher.svelte | 18 +++++--------- packages/builder/src/global.css | 2 +- .../[application]/backend/_layout.svelte | 9 +++++++ .../[application]/frontend/_layout.svelte | 24 +++++++------------ 6 files changed, 30 insertions(+), 39 deletions(-) diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte index 64812353fd..8a7fd6bb90 100644 --- a/packages/builder/src/components/nav/BackendNav.svelte +++ b/packages/builder/src/components/nav/BackendNav.svelte @@ -81,12 +81,10 @@ .hierarchy-title { align-items: center; - text-transform: uppercase; - font-size: 13px; - font-weight: bold; - opacity: 0.6; - letter-spacing: 1px; + font-size: 18px; + font-weight: 700; text-rendering: optimizeLegibility; + color: var(--ink); } .hierarchy { diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte index 7d678c9104..cc9e5d86a7 100644 --- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte +++ b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte @@ -125,12 +125,10 @@ .hierarchy-title { align-items: center; - text-transform: uppercase; - font-size: 13px; - font-weight: bold; - opacity: 0.6; - letter-spacing: 1px; + font-size: 18px; + font-weight: 700; text-rendering: optimizeLegibility; + color: var(--ink); } .hierarchy { diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index 9ca5b1e122..1c7e2e8693 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -24,7 +24,7 @@
+ - {#await promise} - - {:then result} - - {:catch err} -

{err}

- {/await} - + {#await promise} + + {:then result} + + {:catch err} +

{err}

+ {/await} + diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index f31a0b2d0d..48ea302c33 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -50,9 +50,6 @@