Tidy ups and welcome screen made less busy

Comment today from the demo was the welcome screen was a little busy in re to the links on the left hand panel

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,15 +43,15 @@
   .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-s);
-    font-size: 14px;
+    font-weight: 500;
-    font-weight: 400;
     cursor: pointer;
     transition: all 0.2s;
     box-sizing: border-box;

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

@@ -25,7 +25,7 @@
 <style>
   .apps {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     grid-gap: 20px 40px;
     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

@@ -433,7 +433,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: [
               {
@@ -527,35 +527,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 medium 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 {

packages/builder/yarn.lock

@@ -783,9 +783,9 @@
     sirv-cli "^0.4.6"
 
 "@budibase/client@^0.1.1":
-  version "0.1.1"
+  version "0.1.17"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.1.tgz#6df65bef641d956dea6d648e5dcd7e95622a24fc"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.17.tgz#9ec8848c75711751c9d088361122f181e8eb44e1"
-  integrity sha512-z5CYj/4wahV9Kg7GwYi1knRZdm60uspkjOX7b3GXy85Zam1+m4ObSQ1aT6857WCXgl2+CQ3hIb2QGqSZfOTFuA==
+  integrity sha512-6O9iWHkpIWksUMm+/ysN/Yb8QufF3FE4CfxCEFUVWaeYqyIXZifiqZxeAR380JIqwxjHltSC/23wgCWzhhiMUw==
   dependencies:
     "@nx-js/compiler-util" "^2.0.0"
     bcryptjs "^2.4.3"
@@ -7775,9 +7775,9 @@ svelte@3.23.x:
   integrity sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw==
 
 svelte@^3.9.2:
-  version "3.24.0"
+  version "3.24.1"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
-  integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw==
+  integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==
 
 symbol-observable@1.0.1:
   version "1.0.1"