diff --git a/packages/builder/assets/banner-image.png b/packages/builder/assets/banner-image.png new file mode 100644 index 0000000000..3531495668 Binary files /dev/null and b/packages/builder/assets/banner-image.png differ 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/components/common/Icons/Apps.svelte b/packages/builder/src/components/common/Icons/Apps.svelte new file mode 100644 index 0000000000..270acefe8b --- /dev/null +++ b/packages/builder/src/components/common/Icons/Apps.svelte @@ -0,0 +1,12 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Bug.svelte b/packages/builder/src/components/common/Icons/Bug.svelte new file mode 100644 index 0000000000..027c4c4b70 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Bug.svelte @@ -0,0 +1,15 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Community.svelte b/packages/builder/src/components/common/Icons/Community.svelte new file mode 100644 index 0000000000..ca4b8792c9 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Community.svelte @@ -0,0 +1,14 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Contribution.svelte b/packages/builder/src/components/common/Icons/Contribution.svelte new file mode 100644 index 0000000000..faa7560167 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Contribution.svelte @@ -0,0 +1,14 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Documentation.svelte b/packages/builder/src/components/common/Icons/Documentation.svelte new file mode 100644 index 0000000000..56481ab385 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Documentation.svelte @@ -0,0 +1,11 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Email.svelte b/packages/builder/src/components/common/Icons/Email.svelte new file mode 100644 index 0000000000..8a88818192 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Email.svelte @@ -0,0 +1,12 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Hosting.svelte b/packages/builder/src/components/common/Icons/Hosting.svelte new file mode 100644 index 0000000000..9511e4fe3c --- /dev/null +++ b/packages/builder/src/components/common/Icons/Hosting.svelte @@ -0,0 +1,11 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Tutorials.svelte b/packages/builder/src/components/common/Icons/Tutorials.svelte new file mode 100644 index 0000000000..169d6a8d45 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Tutorials.svelte @@ -0,0 +1,11 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Twitter.svelte b/packages/builder/src/components/common/Icons/Twitter.svelte new file mode 100644 index 0000000000..eaac6dc86b --- /dev/null +++ b/packages/builder/src/components/common/Icons/Twitter.svelte @@ -0,0 +1,16 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Updates.svelte b/packages/builder/src/components/common/Icons/Updates.svelte new file mode 100644 index 0000000000..b25555094d --- /dev/null +++ b/packages/builder/src/components/common/Icons/Updates.svelte @@ -0,0 +1,13 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/index.js b/packages/builder/src/components/common/Icons/index.js index fae247b311..c7e4da29da 100644 --- a/packages/builder/src/components/common/Icons/index.js +++ b/packages/builder/src/components/common/Icons/index.js @@ -19,3 +19,13 @@ export { default as AddIcon } from "./Add.svelte" export { default as JavaScriptIcon } from "./JavaScript.svelte" export { default as PreviewIcon } from "./Preview.svelte" export { default as SettingsIcon } from "./Settings.svelte" +export { default as AppsIcon } from "./Apps.svelte" +export { default as UpdatesIcon } from "./Updates.svelte" +export { default as HostingIcon } from "./Hosting.svelte" +export { default as DocumentationIcon } from "./Documentation.svelte" +export { default as TutorialsIcon } from "./Tutorials.svelte" +export { default as CommunityIcon } from "./Community.svelte" +export { default as ContributionIcon } from "./Contribution.svelte" +export { default as BugIcon } from "./Bug.svelte" +export { default as EmailIcon } from "./Email.svelte" +export { default as TwitterIcon } from "./Twitter.svelte" 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/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte index 6aa23c2e31..22ba16c45d 100644 --- a/packages/builder/src/components/start/AppList.svelte +++ b/packages/builder/src/components/start/AppList.svelte @@ -1,19 +1,32 @@
-
-

Choose an Application

+
Your Web Apps
{#each apps as app} - {app.name} +
+

{app.name}

+

+ A minimalist CRM which removes the noise and allows you to focus + on your business. +

+
+
Last Edited - 25th May 2020
+ + Open Web App + +
+
{/each}
@@ -22,31 +35,68 @@ diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index 9ca5b1e122..217f30298f 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -24,7 +24,7 @@ @@ -85,13 +86,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 +112,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 +123,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 +157,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 +170,7 @@ } .home-logo img { - height: 100%; + height: 40px; } span:first-letter { text-transform: capitalize; diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte index 153226dc5a..4a4a715534 100644 --- a/packages/builder/src/pages/[application]/backend/_layout.svelte +++ b/packages/builder/src/pages/[application]/backend/_layout.svelte @@ -37,4 +37,13 @@ width: 275px; height: 100%; } + +@media only screen and (min-width: 1800px) { + .nav { + overflow: auto; + flex: 0 1 auto; + width: 300px; + height: 100%; + } +} diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 67cffb9577..df9762fb07 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -54,9 +54,7 @@
- Navigator -
- + Navigate Pages
@@ -131,7 +129,7 @@ grid-template-columns: 275px 1fr 275px; height: 100%; width: 100%; - background: #fafafa; + background: var(--grey-light); } @media only screen and (min-width: 1800px) { @@ -140,7 +138,7 @@ grid-template-columns: 300px 1fr 300px; height: 100%; width: 100%; - background: #fafafa; + background: var(--grey-light); } } @@ -159,7 +157,6 @@ margin: 40px; background: #fff; border-radius: 5px; - box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05); } .components-pane { @@ -171,8 +168,7 @@ .components-nav-page { font-size: 13px; - color: #000333; - text-transform: uppercase; + color: var(--ink); padding-left: 20px; margin-top: 20px; font-weight: 600; @@ -182,8 +178,7 @@ .components-nav-header { font-size: 13px; - color: #000333; - text-transform: uppercase; + color: var(--ink); margin-top: 20px; font-weight: 600; opacity: 0.4; @@ -235,13 +230,10 @@ } .navigator-title { - font-size: 14px; - color: var(--secondary100); - font-weight: 600; - text-transform: uppercase; + font-size: 18px; + color: var(--ink); + font-weight: bold; padding: 0 20px 20px 20px; - line-height: 1rem !important; - letter-spacing: 1px; } .border-line { diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte index 7c1fc5920e..cf9aa87bb3 100644 --- a/packages/builder/src/pages/index.svelte +++ b/packages/builder/src/pages/index.svelte @@ -2,7 +2,21 @@ import { store } from "builderStore" import AppList from "components/start/AppList.svelte" import { onMount } from "svelte" + import ActionButton from "components/common/ActionButton.svelte" import IconButton from "components/common/IconButton.svelte" + import { + SettingsIcon, + AppsIcon, + UpdatesIcon, + HostingIcon, + DocumentationIcon, + TutorialsIcon, + CommunityIcon, + ContributionIcon, + BugIcon, + EmailIcon, + TwitterIcon, + } from "components/common/Icons/" import Spinner from "components/common/Spinner.svelte" let promise = getApps() @@ -19,23 +33,275 @@ } -
- {#await promise} -
+ +
+
Build
+
+ + + +
Apps
+
+
+ + + +
Settings
+
+ + + + +
Updates
+ + + + + +
Hosting
+ +
+ +
+
Learn
+ + + + +
Documentation
+ + + + + +
Tutorials
+ + + + + +
Community
+ +
+ +
+
Contact
+ + + + +
Contribute to our product
+ + + + + +
Report bug
+ + + + + +
Email
+ + + + + +
Twitter
+ +
+
+ +
+
Welcome to Budibase
+ + {#await promise} + + {:then result} + + {:catch err} +

{err}

+ {/await} +
+
diff --git a/packages/server/builder/assets/10-1.png b/packages/server/builder/assets/10-1.png new file mode 100644 index 0000000000..3531495668 Binary files /dev/null and b/packages/server/builder/assets/10-1.png differ diff --git a/packages/server/builder/assets/banner-image.png b/packages/server/builder/assets/banner-image.png new file mode 100644 index 0000000000..3531495668 Binary files /dev/null and b/packages/server/builder/assets/banner-image.png differ 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 @@ + + + + + + + + + + + + + + diff --git a/packages/server/builder/assets/space.jpeg b/packages/server/builder/assets/space.jpeg new file mode 100644 index 0000000000..427aeb13c7 Binary files /dev/null and b/packages/server/builder/assets/space.jpeg differ diff --git a/packages/server/builder/assets/space.jpg b/packages/server/builder/assets/space.jpg new file mode 100644 index 0000000000..6fbde46033 Binary files /dev/null and b/packages/server/builder/assets/space.jpg differ