From 7fc487b6fc84cf87b48bc587f8c1c921f4b31e44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 22 Apr 2021 14:38:35 +0200
Subject: [PATCH] converts Create Datasource modal

---
 .../TableIntegrationMenu/index.svelte         | 31 +++++++------------
 .../modals/CreateDatasourceModal.svelte       |  4 +--
 2 files changed, 13 insertions(+), 22 deletions(-)
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
index 1b72507b63..ac93b8461f 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { Body } from "@budibase/bbui"
   import { onMount } from "svelte"
   import api from "builderStore/api"
   import ICONS from "../icons"
@@ -41,19 +42,15 @@
         on:click={() => selectIntegration(integrationType)}>
         <svelte:component
           this={ICONS[integrationType]}
-          height="100"
-          width="100" />
-        <span>{integrationType}</span>
+          height="50"
+          width="50"/>
+        <Body xs>{integrationType}</Body>
       </div>
     {/each}
   </div>
 </section>
 
 <style>
-  section {
-    display: grid;
-  }
-
   .integration-list {
     display: grid;
     grid-template-columns: repeat( auto-fit, minmax(150px, 1fr));
@@ -61,23 +58,17 @@
   }
 
   .integration {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    padding: 5px;
+    display: grid;
+    background: var(--background-alt);
+    place-items: center;
+    grid-gap: 10px;
+    padding: 10px;
     transition: 0.3s all;
-    border-radius: var(--border-radius-s);
-    height: 75px;
-  }
-
-  span {
-    font-size: var(--font-size-xs);
-    margin-top: var(--spacing-m);
-    margin-bottom: var(--spacing-xs);
+    border-radius: var(--spectrum-alias-item-rounded-border-radius-s);
   }
 
   .integration:hover,
   .selected {
-    background-color: var(--grey-3);
+    background: var(--spectrum-alias-background-color-tertiary);
   }
 </style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 9fb1118249..8f5d4012fc 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -2,7 +2,7 @@
   import { goto } from "@roxi/routify"
   import { datasources } from "stores/backend"
   import { notifications } from "@budibase/bbui"
-  import { Input, Heading, ModalContent } from "@budibase/bbui"
+  import { Input, Label, ModalContent } from "@budibase/bbui"
   import TableIntegrationMenu from "../TableIntegrationMenu/index.svelte"
   import analytics from "analytics"
 
@@ -51,6 +51,6 @@
     on:input={checkValid}
     bind:value={name}
     {error} />
-  <Heading h2 xxs>Source</Heading>
+  <Label>Datasource Type</Label>
   <TableIntegrationMenu bind:integration />
 </ModalContent>
