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 @@ + + + + + + + + + + + + + +