Merge pull request #529 from Budibase/Tidy-ups-and-implementing-new-BBUI-vars

Tidy ups and welcome screen made less busy

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

@@ -13,35 +13,26 @@
 <style>
   .apps-card {
     background-color: var(--white);
-    padding: 20px 20px 20px 20px;
+    padding: var(--spacing-xl);
-    max-width: 400px;
+    max-width: 300px;
     max-height: 150px;
-    border-radius: 5px;
+    border-radius: var(--border-radius-m);
-    border: 1px solid var(--grey-4);
+    border: var(--border-dark);
-    font-family: Inter;
   }
 
   .app-button:hover {
-    background-color: var(--grey-1);
+    background-color: var(--white);
+    color: var(--black);
     text-decoration: none;
   }
 
   .app-title {
-    font-size: 18px;
+    font-size: var(--font-size-l);
     font-weight: 600;
     color: var(--ink);
     text-transform: capitalize;
   }
 
-  .app-desc {
-    color: var(--grey-7);
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   .card-footer {
     display: flex;
     flex-direction: row;
@@ -52,17 +43,18 @@
   .app-button {
     align-items: center;
     display: flex;
-    background-color: var(--white);
+    background-color: var(--ink);
-    color: var(--ink);
+    color: var(--white);
+    border: 1.5px var(--ink) solid;
     width: 100%;
     justify-content: center;
-    padding: 12px 20px;
+    padding: 8px 16px;
-    border-radius: 5px;
+    border-radius: var(--border-radius-s);
-    border: 1px var(--grey-2) solid;
+    font-size: var(--font-size-xs);
-    font-size: 14px;
+    font-weight: 500;
-    font-weight: 400;
     cursor: pointer;
     transition: all 0.2s;
     box-sizing: border-box;
+    font-family: var(--font-sans);
   }
 </style>

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

@@ -25,8 +25,8 @@
 <style>
   .apps {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    grid-gap: 20px 40px;
+    grid-gap: var(--layout-m);
     justify-content: start;
   }
 

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

@@ -208,16 +208,17 @@
     </div>
     <div class="footer">
       {#if $createAppStore.currentStep > 0}
-        <Button secondary on:click={back}>Back</Button>
+        <Button medium secondary on:click={back}>Back</Button>
       {/if}
       {#if $createAppStore.currentStep < steps.length - 1}
-        <Button secondary on:click={next} disabled={!currentStepIsValid}>
+        <Button medium blue on:click={next} disabled={!currentStepIsValid}>
           Next
         </Button>
       {/if}
       {#if $createAppStore.currentStep === steps.length - 1}
         <Button
-          secondary
+          medium
+          blue
           on:click={signUp}
           disabled={!fullFormIsValid || submitting}>
           {submitting ? 'Loading...' : 'Submit'}

packages/builder/src/components/start/Steps/Info.svelte

@@ -5,7 +5,7 @@
   let blurred = { appName: false }
 </script>
 
-<h2>Create your first web app</h2>
+<h2>Create your web app</h2>
 <div class="container">
   <Input
     on:input={() => (blurred.appName = true)}

packages/builder/src/components/start/Steps/User.svelte

@@ -21,7 +21,7 @@
     placeholder="Password"
     type="pasword"
     error={blurred.password && validationErrors.password} />
-  <Select name="accessLevelId">
+  <Select secondary name="accessLevelId">
     <option value="ADMIN">Admin</option>
     <option value="POWER_USER">Power User</option>
   </Select>

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -601,7 +601,7 @@ export default {
           name: "Donut Chart",
           _component: "@budibase/standard-components/donut",
           description: "Donut chart",
-          icon: "ri-pie-chart-fill",
+          icon: "ri-pie-chart-line",
           properties: {
             settings: [
               {
@@ -695,35 +695,6 @@ export default {
           },
           children: [],
         },
-        {
-          name: "Data List",
-          _component: "@budibase/standard-components/datalist",
-          description: "Shiny list",
-          icon: "ri-file-list-fill",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Table", key: "model", control: ModelSelect }],
-          },
-          children: [],
-        },
-        {
-          name: "List",
-          _component: "@budibase/standard-components/list",
-          description: "Renders all children once per record, of a given table",
-          icon: "ri-file-list-fill",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Table", key: "model", control: ModelSelect }],
-          },
-          children: [
-            {
-              _component: "@budibase/standard-components/heading",
-              name: "Headline",
-              description: "A component for displaying heading text",
-              icon: "ri-heading",
-            },
-          ],
-        },
         // {
         //  name: "Data List",
         //  _component: "@budibase/standard-components/datalist",

packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte

@@ -226,7 +226,7 @@
     position: absolute;
     bottom: 20px;
     display: grid;
-    width: 100%;
+    width: 260px;
     gap: 12px;
   }
 

packages/builder/src/pages/_layout.svelte

@@ -2,17 +2,11 @@
   import Modal from "svelte-simple-modal"
   import { Home as Link } from "@budibase/bbui"
   import {
-    SettingsIcon,
     AppsIcon,
-    UpdatesIcon,
     HostingIcon,
     DocumentationIcon,
-    TutorialsIcon,
     CommunityIcon,
-    ContributionIcon,
     BugIcon,
-    EmailIcon,
-    TwitterIcon,
   } from "components/common/Icons/"
 </script>
 
@@ -24,16 +18,11 @@
       </div>
 
       <div class="nav-section">
-        <div class="nav-section-title">Build</div>
         <Link icon={AppsIcon} title="Apps" href="/" active />
         <Link
           icon={HostingIcon}
           title="Hosting"
           href="https://portal.budi.live/" />
-      </div>
-
-      <div class="nav-section">
-        <div class="nav-section-title">Learn</div>
         <Link
           icon={DocumentationIcon}
           title="Documentation"
@@ -42,23 +31,11 @@
           icon={CommunityIcon}
           title="Community"
           href="https://forum.budibase.com/" />
-      </div>
 
-      <div class="nav-section">
-        <div class="nav-section-title">Contact</div>
-        <Link
-          icon={ContributionIcon}
-          title="Contribute"
-          href="https://github.com/Budibase/budibase" />
         <Link
           icon={BugIcon}
-          title="Report bug"
+          title="Raise an issue"
-          href="https://github.com/Budibase/budibase/issues" />
+          href="https://github.com/Budibase/budibase" />
-        <Link icon={EmailIcon} title="Email" href="mailto:hi@budibase.com" />
-        <Link
-          icon={TwitterIcon}
-          title="Twitter"
-          href="https://twitter.com/budibase" />
       </div>
     </div>
 
@@ -88,6 +65,7 @@
     padding: 20px;
     display: flex;
     flex-direction: column;
+    border-right: var(--border-light);
   }
 
   .home-logo {
@@ -105,11 +83,4 @@
     display: flex;
     flex-direction: column;
   }
-
-  .nav-section-title {
-    font-size: 20px;
-    color: var(--ink);
-    font-weight: 600;
-    margin-bottom: 12px;
-  }
 </style>

packages/builder/src/pages/index.svelte

@@ -66,7 +66,9 @@
 
 <div class="header">
   <div class="welcome">Welcome to the Budibase Beta</div>
-  <Button purple large on:click={showCreateAppModal}>Create New Web App</Button>
+  <Button primary purple on:click={showCreateAppModal}>
+    Create New Web App
+  </Button>
 </div>
 
 <div class="banner">
@@ -95,9 +97,9 @@
   }
 
   .welcome {
-    font-size: 42px;
+    font-size: var(--font-size-3xl);
     color: var(--ink);
-    font-weight: 700;
+    font-weight: 600;
   }
 
   .banner {
@@ -108,7 +110,7 @@
     text-align: center;
     color: white;
     margin: 20px 80px 40px 80px;
-    border-radius: 10px;
+    border-radius: 16px;
   }
 
   .banner img {