Home page UI design

The majority of HTML and CSS is complete.

Still to be done:
- Activate the create new web app button
- Activate the settings nav item
- Date modified
- Ability to rename web app and provide a description (and an auto screenshot is generated down the line)

packages/builder/src/components/common/Icons/Apps.svelte

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M7 11.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0 10a4.5 4.5 0 1 1 0-9 4.5
+    4.5 0 0 1 0 9zm10-10a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0 10a4.5 4.5 0 1 1
+    0-9 4.5 4.5 0 0 1 0 9z"
+    fill="rgba(128,129,146,1)" />
+</svg>

packages/builder/src/components/common/Icons/Bug.svelte

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M5.07 16A7.06 7.06 0 0 1 5
+    15v-1H3v-2h2v-1c0-.34.024-.673.07-1H3V8h2.674a7.03 7.03 0 0 1
+    2.84-3.072l-1.05-1.05L8.88 2.465l1.683 1.684a7.03 7.03 0 0 1 2.876
+    0l1.683-1.684 1.415 1.415-1.05 1.05A7.03 7.03 0 0 1 18.326
+    8H21v2h-2.07c.046.327.07.66.07 1v1h2v2h-2v1c0 .34-.024.673-.07
+    1H21v2h-2.674a7 7 0 0 1-12.652 0H3v-2h2.07zM9 10v2h6v-2H9zm0 4v2h6v-2H9z"
+    fill="rgba(128,129,146,1)" />
+</svg>

packages/builder/src/components/common/Icons/Community.svelte

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M12 11a5 5 0 0 1 5 5v6H7v-6a5 5 0 0 1 5-5zm-6.712 3.006a6.983 6.983 0 0
+    0-.28 1.65L5 16v6H2v-4.5a3.5 3.5 0 0 1 3.119-3.48l.17-.014zm13.424 0A3.501
+    3.501 0 0 1 22 17.5V22h-3v-6c0-.693-.1-1.362-.288-1.994zM5.5 8a2.5 2.5 0 1 1
+    0 5 2.5 2.5 0 0 1 0-5zm13 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM12 2a4 4 0
+    1 1 0 8 4 4 0 0 1 0-8z"
+    fill="rgba(128,129,146,1)" />
+</svg>

packages/builder/src/components/common/Icons/Contribution.svelte

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M14.121 10.48a1 1 0 0 0-1.414 0l-.707.706a2 2 0 1
+    1-2.828-2.828l5.63-5.632a6.5 6.5 0 0 1 6.377 10.568l-2.108
+    2.135-4.95-4.95zM3.161 4.468a6.503 6.503 0 0 1 8.009-.938L7.757 6.944a4 4 0
+    0 0 5.513 5.794l.144-.137 4.243 4.242-4.243 4.243a2 2 0 0 1-2.828 0L3.16
+    13.66a6.5 6.5 0 0 1 0-9.192z"
+    fill="rgba(128,129,146,1)" />
+</svg>

packages/builder/src/components/common/Icons/Documentation.svelte

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1
+    1zM8 7v2h8V7H8zm0 4v2h8v-2H8zm0 4v2h5v-2H8z"
+    fill="rgba(128,129,146,1)" />
+</svg>

packages/builder/src/components/common/Icons/Email.svelte

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1
+    1-1zm9.06 8.683L5.648 6.238 4.353 7.762l7.72 6.555
+    7.581-6.56-1.308-1.513-6.285 5.439z"
+    fill="rgba(128,129,146,1)" />
+</svg>

packages/builder/src/components/common/Icons/Hosting.svelte

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M7 20.981a6.5 6.5 0 0 1-2.936-12 8.001 8.001 0 0 1 15.872 0 6.5 6.5 0 0
+    1-2.936 12V21H7v-.019zM13 13h3l-4-5-4 5h3v4h2v-4z"
+    fill="rgba(128,129,146,1)" />
+</svg>

packages/builder/src/components/common/Icons/Tutorials.svelte

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M13 16.938V19h5v2H6v-2h5v-2.062A8.001 8.001 0 0 1 4 9V3h16v6a8.001 8.001
+    0 0 1-7 7.938zM1 5h2v4H1V5zm20 0h2v4h-2V5z"
+    fill="rgba(128,129,146,1)" />
+</svg>

packages/builder/src/components/common/Icons/Twitter.svelte

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6
+    4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874
+    0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86
+    3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21
+    4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191
+    1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9
+    0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"
+    fill="rgba(128,129,146,1)" />
+</svg>

packages/builder/src/components/common/Icons/Updates.svelte

@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
+    10zm4.82-4.924A7 7 0 0 0 9.032 5.658l.975 1.755A5 5 0 0 1 17 12h-3l2.82
+    5.076zm-1.852 1.266l-.975-1.755A5 5 0 0 1 7 12h3L7.18 6.924a7 7 0 0 0 7.788
+    11.418z"
+    fill="rgba(128,129,146,1)" />
+</svg>

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"

packages/builder/src/components/start/AppList.svelte

@@ -1,19 +1,27 @@
 <script>
   import Button from "components/common/Button.svelte"
   export let apps
+
+function myFunction() {
+  var x = new Date(document.lastModified);
+  document.getElementById("demo").innerHTML = x;
+}
 </script>
 
 <div class="root">
   <div class="inner">
-    <img
-      src="/_builder/assets/budibase-logo.png"
-      class="logo"
-      alt="budibase logo" />
     <div>
       <div>
-        <h4 style="margin-bottom: 20px">Choose an Application</h4>
+        <h2 class="app-section-title">Your Web Apps</h2>
         {#each apps as app}
-          <a href={`/_builder/${app._id}`} class="app-link">{app.name}</a>
+        <div class="apps-card">
+            <h3 class="app-title">{app.name}</h3>
+            <p class="app-desc">A minimalist CRM which removes the noise and allows you to focus on your business. </p>
+            <div class="card-footer">
+              <div class="modified-date">Last Edited - 25th May 2020</div>
+              <a href={`/_builder/${app._id}`} class="app-button">Open Web App</a>
+            </div>
+          </div>
         {/each}
       </div>
     </div>
@@ -22,31 +30,66 @@
 
 <style>
   .root {
-    position: fixed;
+    margin: 80px 80px;
-    margin: 0 auto;
-    text-align: center;
-    top: 20%;
-    /*color: #333333;
-    background-color: #fdfdfd;*/
-    width: 100%;
   }
 
-  .inner {
+  .app-section-title {
-    display: inline-block;
+    font-size: 24px;
-    margin: auto;
+    color: var(--ink);
   }
 
-  .logo {
+  .apps {
-    width: 300px;
+    display: flex;
-    margin-bottom: 40px;
+    flex-wrap: wrap;
+    gap: 40px;
+  }
+  .apps-card {
+    background-color: var(--white);
+    padding: 40px;
+    max-width: 400px;
+    max-height: 150px;
+    border-radius: 5px;
+    border: 1px solid var(--grey-dark);
   }
 
-  .root :global(.option) {
+  .app-button {
-    width: 250px;
+    background-color: var(--white);
+    color: var(--ink);
+    padding: 12px 20px;
+    border-radius: 5px;
+    border: 1px var(--grey) solid;
+    font-size: 14px;
+    font-weight: 400;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-sizing: border-box;
   }
 
-  .app-link {
+  .app-button:hover {
-    margin-top: 10px;
+    background-color: var(--grey-light);
-    display: block;
+    text-decoration: none;
+  }
+
+  .app-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--ink);
+    text-transform: capitalize;
+  }
+
+  .app-desc {
+    color: var(--ink-light);
+  }
+
+  .modified-date {
+    font-size: 14px;
+    color: var(--ink-light);
+  }
+
+  .card-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline; 
+    justify-content: space-between;
   }
 </style>

packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte

@@ -50,12 +50,8 @@
 </div>
 
 <style>
-  .root {
+
-    height: 100%;
+
-    display: flex;
-    flex-direction: column;
-    padding: 20px 0;
-  }
 
   .switcher {
     display: flex;

packages/builder/src/pages/[application]/_layout.svelte

@@ -32,7 +32,8 @@
       <button class="home-logo">
         <img
           src="/_builder/assets/bb-logo.svg"
-          alt="budibase icon" />
+          alt="budibase icon" 
+          on:click={() => $goto(`/`)}>
       </button>
 
       <!-- This gets all indexable subroutes and sticks them in the top nav. -->

packages/builder/src/pages/[application]/frontend/_layout.svelte

@@ -131,7 +131,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 +140,7 @@
       grid-template-columns: 300px 1fr 300px;
       height: 100%;
       width: 100%;
-      background: #fafafa;
+      background: var(--grey-light);
     }
   }
 

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()
@@ -17,9 +31,109 @@
       throw new Error(json)
     }
   }
+
 </script>
 
-<main>
+<div class="root">
+  <div class="ui-nav">
+    <div class="home-logo">
+      <img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
+    </div>
+
+    <div class="nav-section">
+      <div class="nav-section-title">Build</div>
+      <div class="nav-item-home">
+        <span class="nav-item-icon">
+          <AppsIcon />
+        </span>
+        <div class="nav-item-title">Apps</div>
+      </div>
+      <div class="nav-item">
+        <span class="nav-item-icon">
+          <SettingsIcon />
+        </span>
+        <div class="nav-item-title">Settings</div>
+      </div>
+      <a href="https://budibase.con/login" target="_blank" class="nav-item"> 
+        <span class="nav-item-icon">
+          <UpdatesIcon />
+        </span>
+        <div class="nav-item-title">Updates</div>
+      </a>
+      <a href="https://budibase.con/login" target="_blank" class="nav-item"> 
+        <span class="nav-item-icon">
+          <HostingIcon />
+        </span>
+        <div class="nav-item-title">Hosting</div>
+      </a>
+    </div>
+
+    <div class="nav-section">
+      <div class="nav-section-title">Learn</div>
+        <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
+        <span class="nav-item-icon">
+          <DocumentationIcon />
+        </span>
+        <div class="nav-item-title">Documentation</div>
+      </a>
+      <a href="https://docs.budibase.com/tutorial/quick-start" target="_blank" class="nav-item">        
+      <span class="nav-item-icon">
+          <TutorialsIcon />
+        </span>
+        <div class="nav-item-title">Tutorials</div>
+      </a>
+      <a href="https://forum.budibase.com/" target="_blank" class="nav-item"> 
+        <span class="nav-item-icon">
+          <CommunityIcon />
+        </span>
+        <div class="nav-item-title">Community</div>
+      </a>
+    </div>
+
+    <div class="nav-section">
+      <div class="nav-section-title">Contact</div>
+      <a href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md" target="_blank" class="nav-item"> 
+        <span class="nav-item-icon">
+          <ContributionIcon />
+        </span>
+        <div class="nav-item-title">Contribute to our product</div>
+      </a>
+      <a href="https://github.com/Budibase/budibase/issues" target="_blank" class="nav-item"> 
+        <span class="nav-item-icon">
+          <BugIcon />
+        </span>
+        <div class="nav-item-title">Report bug</div>
+      </a>
+      <a href="mailto:support@budibase.com" target="_blank" class="nav-item"> 
+        <span class="nav-item-icon">
+          <EmailIcon />
+        </span>
+        <div class="nav-item-title">Email</div>
+      </a>
+      <a href="https://twitter.com/budibase" target="_blank" class="nav-item"> 
+        <span class="nav-item-icon">
+          <TwitterIcon />
+        </span>
+        <div class="nav-item-title">Twitter</div>
+      </a>
+    </div>
+  </div>
+
+  <div class="main">
+  <div class="welcome">Welcome to Budibase</div>
+    <div class="banner">
+      <div class="banner-content">
+        <div class="banner-header">
+         Every accomplishment starts with a decision to try.   
+        </div>
+        <button class="banner-button" type="button"><i class="ri-add-circle-fill"></i>
+            Create New Web App
+        </button>
+      </div>
+      <div class="banner-image">
+        <img src="/_builder/assets/banner-image.png" alt="Bannerimage" />
+     </div>
+    </div>
   {#await promise}
     <div class="spinner-container">
       <Spinner />
@@ -29,13 +143,142 @@
   {:catch err}
     <h1 style="color:red">{err}</h1>
   {/await}
-</main>
+  </div>  
+</div>
 
 <style>
-  main {
+  .root {
+    display: grid;
+    grid-template-columns: 275px 1fr;
     height: 100%;
     width: 100%;
-    font-family: "Roboto", Helvetica, Arial, sans-serif;
+    background: var(--grey-light);
+  }
+
+  @media only screen and (min-width: 1800px) {
+    .root {
+      display: grid;
+      grid-template-columns: 300px 1fr;
+      height: 100%;
+      width: 100%;
+      background: var(--grey-light);
+    }
+  }
+
+  .main {
+    grid-column: 2;
+  }
+
+  .ui-nav {
+    grid-column: 1;
+    background-color: var(--white);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--grey-dark)
+  }
+
+  .home-logo {
+    cursor: pointer;
+    height: 40px;
+    margin-bottom: 20px;
+  }
+
+  .home-logo img {
+    height: 40px;
+  }
+
+  .nav-section {
+    margin: 20px 0px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav-section-title {
+    font-size: 20px;
+    color: var(--ink);
+    font-weight: 700;
+    margin-bottom: 12px;
+  }
+
+  .nav-item {
+    cursor: pointer;
+    margin: 0px 0px 4px 0px;
+    padding: 0px 0px 0px 12px;
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .nav-item-home {
+    cursor: pointer;
+    margin: 0px 0px 4px 0px;
+    padding: 0px 0px 0px 12px;
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: var(--blue-light);
+  }
+
+  .nav-item:hover {
+    background-color: var(--grey-light);
+    border-radius: 3px;
+  }
+
+  .nav-item::selection {
+    background-color: var(--blue-light);
+    border-radius: 3px;
+  }
+
+  .nav-item-title {
+    font-size: 14px;
+    color: var(--ink);
+    font-weight: 500;
+    margin-left: 12px;
+  }
+
+  .nav-item-icon {
+    color: var(--ink-light);
+  }
+
+  .welcome {
+    margin: 60px 80px 0px 80px;
+    font-size: 42px;
+    color: var(--ink);
+    font-weight: 900;
+  }
+
+  .banner {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
+    margin: 20px 80px 40px 80px;
+    background-image: linear-gradient(-45deg, #7F9CEB, #1D2F77);
+    border-radius: 10px;
+    max-height: 280px;
+  }
+
+  .banner-content {
+    padding: 80px;
+  }
+  
+  .banner-header {
+    font-size: 36px;
+    color: var(--white);
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+
+  .banner-image {
+    z-index: 1;
+  }
+
+  .banner-image img {
+    max-height: 400px;
   }
 
   .spinner-container {
@@ -45,4 +288,28 @@
     align-items: center;
     justify-content: center;
   }
+
+  .banner-button {
+    background-color: var(--white);
+    color: var(--ink);
+    padding: 12px 20px;
+    border-radius: 5px;
+    border: 0px transparent solid;
+    font-size: 16px;
+    font-weight: 400;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-sizing: border-box;
+    align-items: center;
+    display: flex;
+  }
+  
+  .ri-add-circle-fill {
+    margin-right: 4px;
+    font-size: 24px;
+  }
+
+  .banner-button:hover {
+    background-color: var(--grey);
+  }
 </style>