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