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/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 8e72a17c54..c85e23403c 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -60,28 +60,22 @@ .switcher { display: flex; - justify-content: space-between; - margin: 20px; + margin: 0px 20px 20px 20px; } .switcher > button { - text-rendering: optimizeLegibility; display: inline-block; border: none; margin: 0; padding: 0; cursor: pointer; - font-size: 14px; - text-transform: uppercase; - background: rgba(0, 0, 0, 0); - font-weight: 500; - color: var(--secondary40); + font-size: 18px; + font-weight: 700; + color: var(--ink-lighter); margin-right: 20px; - letter-spacing: 1px; } .switcher > .selected { - color: var(--secondary100); - font-weight: 600; + color: var(--ink); } diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index fde574de48..3ad5851157 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -110,7 +110,7 @@ h3 { h4 { font-family: var(--fontbold); font-size: 18pt; - color: var(--secondary100); + color: var(--ink); } h5 { diff --git a/packages/builder/src/pages/[application]/_layout.svelte b/packages/builder/src/pages/[application]/_layout.svelte index 905910f7f5..5de5e3379b 100644 --- a/packages/builder/src/pages/[application]/_layout.svelte +++ b/packages/builder/src/pages/[application]/_layout.svelte @@ -32,7 +32,8 @@ 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/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