ux fixes

5 years ago · ee367a42a6
2 changed files with 19 additions and 10 deletions
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@ -1,5 +1,5 @@
 <script>
-  import { ModalContent, Modal, Body, Layout, Label } from "@budibase/bbui"
+  import { ModalContent, Modal, Body, Layout, Detail } from "@budibase/bbui"
  import { onMount } from "svelte"
  import ICONS from "../icons"
  import api from "builderStore/api"
@ -66,7 +66,7 @@
 <Modal bind:this={modal}>
  <ModalContent
    disabled={!Object.keys(integration).length}
-    title="Add Data"
+    title="Data"
    confirmText="Continue"
    cancelText="Start from scratch"
    size="M"
@ -74,12 +74,11 @@
      chooseNextModal()
    }}
  >
-    <Body size="XS"
-      >All apps need data. You can connect to a data source below, or add data
-      to your app using Budibase's built-in database - it's simple!
-    </Body>
-
    <Layout noPadding>
+      <Body size="XS"
+        >All apps need data. You can connect to a data source below, or add data
+        to your app using Budibase's built-in database.
+      </Body>
      <div
        class:selected={integration.type === INTERNAL}
        on:click={() => selectIntegration(INTERNAL)}
@ -92,8 +91,12 @@
          >
        </div>
      </div>
-      <Label size="S">Connect to data source</Label>
+    </Layout>

+    <Layout gap="XS" noPadding>
+      <div class="title-spacing">
+        <Detail size="S">Connect to data source</Detail>
+      </div>
      <div class="item-list">
        {#each Object.entries(integrations).filter(([key]) => key !== INTERNAL) as [integrationType, schema]}
          <div
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
@ -1,6 +1,6 @@
 <script>
  import { goto } from "@roxi/routify"
-  import { ModalContent, notifications } from "@budibase/bbui"
+  import { ModalContent, notifications, Body, Layout } from "@budibase/bbui"
  import analytics, { Events } from "analytics"
  import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
  import { datasources, tables } from "stores/backend"
@ -57,7 +57,7 @@
 </script>

 <ModalContent
-  title="Add Data"
+  title={`Connect to ${IntegrationNames[integration.type]}`}
  onConfirm={() => saveDatasource()}
  confirmText={integration.plus
    ? "Fetch tables from database"
@ -65,6 +65,12 @@
  cancelText="Back"
  size="M"
 >
+  <Layout noPadding>
+    <Body size="XS"
+      >Connect your database to Budibase using the config below.
+    </Body>
+  </Layout>
+
  <IntegrationConfigForm
    schema={integration.schema}
    bind:integration={integration.config}