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 000000000..7d115faef --- /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 999415931..fde574de4 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 02f4e9884..905910f7f 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 000000000..7d115faef --- /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 64812353f..8a7fd6bb9 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 7d678c910..cc9e5d86a 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 9ca5b1e12..1c7e2e869 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 f31a0b2d0..48ea302c3 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -50,9 +50,6 @@