Merge pull request #1451 from Budibase/layout-tweaks

Layout tweaks

packages/bbui/src/Avatar/Avatar.svelte

@@ -45,12 +45,7 @@
     display: grid;
     place-items: center;
     font-weight: 500;
-    background: rgb(63, 94, 251);
+    background: #3aab87;
-    background: linear-gradient(
-      155deg,
-      rgba(63, 94, 251, 1) 0%,
-      rgba(53, 199, 86, 1) 47%
-    );
     border-radius: 50%;
     overflow: hidden;
     user-select: none;

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>

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"

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-light: 1px solid var(--spectrum-global-color-gray-300);
-    --border-dark: 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);

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;
+    width: 28px;
-    height: 32px;
+    height: 28px;
   }
   span {
     overflow: hidden;
     text-overflow: ellipsis;
+    font-weight: 500;
   }
 </style>

packages/builder/src/pages/portal/apps/_layout.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { Page } from "@budibase/bbui"
+</script>
+
+<Page wide>
+  <slot />
+</Page>

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>

packages/builder/src/pages/portal/index.svelte

@@ -0,0 +1,4 @@
+<script>
+  import { goto } from "@roxi/routify"
+  $goto("./apps")
+</script>

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 {

packages/builder/src/pages/portal/settings/_layout.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { Page } from "@budibase/bbui"
+</script>
+
+<Page>
+  <slot />
+</Page>