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
6 years ago · bae5e11df3
10 changed files with 38 additions and 102 deletions
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@ -13,35 +13,26 @@
 <style>
  .apps-card {
    background-color: var(--white);
-    padding: 20px 20px 20px 20px;
-    max-width: 400px;
+    padding: var(--spacing-xl);
+    max-width: 300px;
    max-height: 150px;
-    border-radius: 5px;
-    border: 1px solid var(--grey-4);
-    font-family: Inter;
+    border-radius: var(--border-radius-m);
+    border: var(--border-dark);
  }

  .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);
-    color: var(--ink);
+    background-color: var(--ink);
+    color: var(--white);
+    border: 1.5px var(--ink) solid;
    width: 100%;
    justify-content: center;
-    padding: 12px 20px;
-    border-radius: 5px;
-    border: 1px var(--grey-2) solid;
-    font-size: 14px;
-    font-weight: 400;
+    padding: 8px 16px;
+    border-radius: var(--border-radius-s);
+    font-size: var(--font-size-s);
+    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-sizing: border-box;
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/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;
  }
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/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'}
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ b/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)}
--- a/packages/builder/src/components/start/Steps/User.svelte
+++ b/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>
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/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",
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@ -226,7 +226,7 @@
    position: absolute;
    bottom: 20px;
    display: grid;
-    width: 100%;
+    width: 260px;
    gap: 12px;
  }

--- a/packages/builder/src/pages/_layout.svelte
+++ b/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"
-          href="https://github.com/Budibase/budibase/issues" />
-        <Link icon={EmailIcon} title="Email" href="mailto:hi@budibase.com" />
-        <Link
-          icon={TwitterIcon}
-          title="Twitter"
-          href="https://twitter.com/budibase" />
+          title="Raise an issue"
+          href="https://github.com/Budibase/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>
--- a/packages/builder/src/pages/index.svelte
+++ b/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 {
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@ -783,9 +783,9 @@
    sirv-cli "^0.4.6"

 "@budibase/client@^0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.1.tgz#6df65bef641d956dea6d648e5dcd7e95622a24fc"
-  integrity sha512-z5CYj/4wahV9Kg7GwYi1knRZdm60uspkjOX7b3GXy85Zam1+m4ObSQ1aT6857WCXgl2+CQ3hIb2QGqSZfOTFuA==
+  version "0.1.17"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.17.tgz#9ec8848c75711751c9d088361122f181e8eb44e1"
+  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"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8"
-  integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw==
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
+  integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==

 symbol-observable@1.0.1:
  version "1.0.1"