From 97adabcaa836f5093c3b3b8a9b67afea7fc4ae6d 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 e20b65c13b3c9d108ecef5c36fada9bfe36e2859 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 @@