From 783ab8989d5dd3ad9ccd3aecf089c7e991619688 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 6 May 2021 10:17:27 +0100
Subject: [PATCH 1/7] Add Page layout component to BBUI

---
 packages/bbui/src/Layout/Page.svelte | 23 +++++++++++++++++++++++
 packages/bbui/src/index.js           |  1 +
 2 files changed, 24 insertions(+)
 create mode 100644 packages/bbui/src/Layout/Page.svelte

diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte
new file mode 100644
index 0000000000..d8c8cbfce4
--- /dev/null
+++ b/packages/bbui/src/Layout/Page.svelte
@@ -0,0 +1,23 @@
+<script>
+  export let wide = false
+</script>
+
+<div class:wide>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: grid;
+    grid-template-columns: 1fr;
+    max-width: 80ch;
+    margin: 0 auto;
+    padding: calc(var(--spacing-xl) * 2);
+  }
+
+  .wide {
+    max-width: none;
+    margin: 0;
+    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
+  }
+</style>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index e1b68cb35f..9d47958461 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -28,6 +28,7 @@ export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
 export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
 export { default as Label } from "./Label/Label.svelte"
 export { default as Layout } from "./Layout/Layout.svelte"
+export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"

From c7ea69a383b5bc59c7f7f140a50c30921ef15762 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 6 May 2021 10:17:47 +0100
Subject: [PATCH 2/7] Update border colour definitions to match designs

---
 packages/builder/src/global.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 298513bd23..726f422a48 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -13,8 +13,8 @@ html, body {
 body {
     --background: var(--spectrum-alias-background-color-primary);
     --background-alt: var(--spectrum-alias-background-color-secondary);
-    --border-light: 1px solid var(--spectrum-global-color-gray-200);
-    --border-dark: 1px solid var(--spectrum-global-color-gray-300);
+    --border-light: 1px solid var(--spectrum-global-color-gray-300);
+    --border-dark: 1px solid var(--spectrum-global-color-gray-400);
     --ink: var(--spectrum-alias-text-color);
     --grey-1: var(--spectrum-global-color-gray-100);
     --grey-2: var(--spectrum-global-color-gray-200);

From 1a33ad48929d9c3df8a459bf0349f20c6345015c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 6 May 2021 10:18:25 +0100
Subject: [PATCH 3/7] Update core layout to allow full width pages and match
 designs

---
 .../builder/src/pages/portal/_layout.svelte   | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/builder/src/pages/portal/_layout.svelte b/packages/builder/src/pages/portal/_layout.svelte
index e26148b666..028f04285e 100644
--- a/packages/builder/src/pages/portal/_layout.svelte
+++ b/packages/builder/src/pages/portal/_layout.svelte
@@ -23,7 +23,7 @@
   onMount(getInfo)
 
   let menu = [
-    { title: "Apps", href: "/portal/" },
+    { title: "Apps", href: "/portal/apps" },
     { title: "Drafts", href: "/portal/drafts" },
     { title: "Users", href: "/portal/users", heading: "Manage" },
     { title: "Groups", href: "/portal/groups" },
@@ -36,15 +36,15 @@
 </script>
 
 <div class="container">
-  <Layout>
-    <div class="nav">
+  <div class="nav">
+    <Layout paddingX="L" paddingY="L">
       <div class="branding">
         <div class="name">
           <img
-            src={$organisation?.logoUrl || "https://via.placeholder.com/50"}
+            src={$organisation?.logoUrl || "https://i.imgur.com/ZKyklgF.png"}
             alt="Logotype"
           />
-          <span>{$organisation?.company}</span>
+          <span>{$organisation?.company || "Budibase"}</span>
         </div>
         <div class="onboarding">
           <ProgressCircle size="S" value={onBoardingProgress} />
@@ -59,17 +59,17 @@
           {/each}
         </Navigation>
       </div>
-    </div>
-  </Layout>
+    </Layout>
+  </div>
   <div class="main">
     <div class="toolbar">
-      <Search />
+      <Search placeholder="Global search" />
       <div class="avatar">
         <Avatar size="M" name="John Doe" />
         <Icon size="XL" name="ChevronDown" />
       </div>
     </div>
-    <div class="content">
+    <div>
       <slot />
     </div>
   </div>
@@ -81,10 +81,13 @@
     display: grid;
     grid-template-columns: 250px 1fr;
   }
+  .nav {
+    background: var(--background);
+    border-right: var(--border-light);
+  }
   .main {
     display: grid;
     grid-template-rows: auto 1fr;
-    border-left: 2px solid var(--spectrum-alias-background-color-primary);
   }
   .branding {
     display: grid;
@@ -92,7 +95,6 @@
     grid-template-columns: auto auto;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--spacing-xl);
   }
   .name {
     display: grid;
@@ -100,13 +102,6 @@
     grid-gap: var(--spacing-m);
     align-items: center;
   }
-  .content {
-    display: grid;
-    padding: calc(var(--spacing-xl) * 2) var(--spacing-m) var(--spacing-m)
-      var(--spacing-m);
-    max-width: 80ch;
-    margin: 0 auto;
-  }
   .avatar {
     display: grid;
     grid-template-columns: auto auto;
@@ -118,18 +113,20 @@
     filter: brightness(110%);
   }
   .toolbar {
-    border-bottom: 2px solid var(--spectrum-alias-background-color-primary);
+    background: var(--background);
+    border-bottom: var(--border-light);
     display: grid;
     grid-template-columns: 250px auto;
     justify-content: space-between;
     padding: var(--spacing-m) calc(var(--spacing-xl) * 2);
   }
   img {
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    height: 28px;
   }
   span {
     overflow: hidden;
     text-overflow: ellipsis;
+    font-weight: 500;
   }
 </style>

From e1b32848ba68808d89c4d38586bb83bc5d92ea4f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 6 May 2021 10:18:41 +0100
Subject: [PATCH 4/7] Add default portal redirect

---
 packages/builder/src/pages/portal/index.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/builder/src/pages/portal/index.svelte b/packages/builder/src/pages/portal/index.svelte
index e69de29bb2..3d74e8c6fa 100644
--- a/packages/builder/src/pages/portal/index.svelte
+++ b/packages/builder/src/pages/portal/index.svelte
@@ -0,0 +1,4 @@
+<script>
+  import { goto } from "@roxi/routify"
+  $goto("./apps")
+</script>

From d004d507f5c2ad49b9b99dc1fdb49dd5994fc164 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 6 May 2021 10:22:17 +0100
Subject: [PATCH 5/7] Update existing pages to use Page layout component

---
 packages/builder/src/pages/portal/oauth/index.svelte      | 5 +++--
 packages/builder/src/pages/portal/settings/_layout.svelte | 7 +++++++
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 packages/builder/src/pages/portal/settings/_layout.svelte

diff --git a/packages/builder/src/pages/portal/oauth/index.svelte b/packages/builder/src/pages/portal/oauth/index.svelte
index d4e5332d0d..45c9761d38 100644
--- a/packages/builder/src/pages/portal/oauth/index.svelte
+++ b/packages/builder/src/pages/portal/oauth/index.svelte
@@ -9,6 +9,7 @@
     Layout,
     Input,
     Body,
+    Page,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
   import api from "builderStore/api"
@@ -58,7 +59,7 @@
   })
 </script>
 
-<section>
+<Page>
   <header>
     <Heading size="M">OAuth</Heading>
     <Body size="S">
@@ -88,7 +89,7 @@
     </div>
     <Divider />
   {/if}
-</section>
+</Page>
 
 <style>
   .config-form {
diff --git a/packages/builder/src/pages/portal/settings/_layout.svelte b/packages/builder/src/pages/portal/settings/_layout.svelte
new file mode 100644
index 0000000000..f9c2067a94
--- /dev/null
+++ b/packages/builder/src/pages/portal/settings/_layout.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { Page } from "@budibase/bbui"
+</script>
+
+<Page>
+  <slot />
+</Page>

From c8ecc38bfbf1961bef958bf9cd3ec65d3aee0a7e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 6 May 2021 10:22:36 +0100
Subject: [PATCH 6/7] Add skeleton for apps page as example of full width page

---
 .../src/pages/portal/apps/_layout.svelte      |  7 +++++
 .../src/pages/portal/apps/index.svelte        | 27 +++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 packages/builder/src/pages/portal/apps/_layout.svelte
 create mode 100644 packages/builder/src/pages/portal/apps/index.svelte

diff --git a/packages/builder/src/pages/portal/apps/_layout.svelte b/packages/builder/src/pages/portal/apps/_layout.svelte
new file mode 100644
index 0000000000..c87ab149ba
--- /dev/null
+++ b/packages/builder/src/pages/portal/apps/_layout.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { Page } from "@budibase/bbui"
+</script>
+
+<Page wide>
+  <slot />
+</Page>
diff --git a/packages/builder/src/pages/portal/apps/index.svelte b/packages/builder/src/pages/portal/apps/index.svelte
new file mode 100644
index 0000000000..6a006ed831
--- /dev/null
+++ b/packages/builder/src/pages/portal/apps/index.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { Heading, Layout } from "@budibase/bbui"
+</script>
+
+<Layout noPadding>
+  <div>
+    <Heading>Apps</Heading>
+  </div>
+  <div class="appList">
+    {#each new Array(10) as _}
+      <div class="app" />
+    {/each}
+  </div>
+</Layout>
+
+<style>
+  .appList {
+    display: grid;
+    grid-gap: 50px;
+    grid-template-columns: repeat(auto-fill, 300px);
+  }
+  .app {
+    height: 130px;
+    border-radius: 4px;
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+</style>

From df43d2efb267ee7a9935013b84db8dcc77640465 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 6 May 2021 10:49:04 +0100
Subject: [PATCH 7/7] Update avatar to solid background

---
 packages/bbui/src/Avatar/Avatar.svelte | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/bbui/src/Avatar/Avatar.svelte b/packages/bbui/src/Avatar/Avatar.svelte
index 1b2310b61f..7a6ad5f004 100644
--- a/packages/bbui/src/Avatar/Avatar.svelte
+++ b/packages/bbui/src/Avatar/Avatar.svelte
@@ -45,12 +45,7 @@
     display: grid;
     place-items: center;
     font-weight: 500;
-    background: rgb(63, 94, 251);
-    background: linear-gradient(
-      155deg,
-      rgba(63, 94, 251, 1) 0%,
-      rgba(53, 199, 86, 1) 47%
-    );
+    background: #3aab87;
     border-radius: 50%;
     overflow: hidden;
     user-select: none;