From ed6f7699f028a7a427511fd4ac1ac70f76efd62b Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Fri, 19 Jun 2020 15:50:39 +0200
Subject: [PATCH] adds integration design

---
 .../components/settings/Integration.svelte    | 56 +++++++++++++++++++
 .../settings/tabs/Integrations.svelte         | 46 ++++++++++++++-
 2 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/src/components/settings/Integration.svelte

diff --git a/packages/builder/src/components/settings/Integration.svelte b/packages/builder/src/components/settings/Integration.svelte
new file mode 100644
index 0000000000..69cfe6241f
--- /dev/null
+++ b/packages/builder/src/components/settings/Integration.svelte
@@ -0,0 +1,56 @@
+<script>
+  import { Button } from "@budibase/bbui"
+  export let remove = false
+</script>
+
+<div class="container">
+  <div class="content">
+    <div class="img">
+      <img src="https://picsum.photos/60/60" alt="zoom" />
+    </div>
+    <div class="body">
+      <div class="title">Zoom</div>
+      <div class="description">
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit
+      </div>
+    </div>
+  </div>
+  <div class="footer">
+    <Button wide error={remove} secondary={!remove} on:click>
+      <span>{remove ? 'Remove' : 'Add'}</span>
+    </Button>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    padding: 12px;
+    background: var(--light-grey);
+    grid-gap: 20px;
+  }
+  span {
+    font-size: 12px;
+    font-weight: bold;
+  }
+  .content {
+    display: grid;
+    grid-gap: 12px;
+    grid-template-columns: 60px auto;
+  }
+  .title {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .description {
+    font-size: 12px;
+  }
+  .img {
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  img {
+    height: 60px;
+    width: 60px;
+  }
+</style>
diff --git a/packages/builder/src/components/settings/tabs/Integrations.svelte b/packages/builder/src/components/settings/tabs/Integrations.svelte
index 9e932e2e89..419aed17ef 100644
--- a/packages/builder/src/components/settings/tabs/Integrations.svelte
+++ b/packages/builder/src/components/settings/tabs/Integrations.svelte
@@ -1 +1,45 @@
-Integrations
+<script>
+  import Integration from "../Integration.svelte"
+</script>
+
+<div class="container">
+  <div class="title">Your Integrations</div>
+  <div class="integrations">
+    <Integration remove />
+    <Integration remove />
+    <Integration remove />
+    <Integration remove />
+  </div>
+  <div class="apps">Recommended apps</div>
+  <div class="integrations">
+    <Integration />
+    <Integration />
+    <Integration />
+    <Integration />
+  </div>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: 16px;
+  }
+  .integrations {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
+  }
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .apps {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .background {
+    border-radius: 5px;
+    background-color: var(--light-grey);
+    padding: 12px 12px 18px 12px;
+  }
+</style>