From a207137c928ac4233cc255a33999812954d96d85 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 10 May 2021 12:06:31 +0100
Subject: [PATCH] editor styling

---
 packages/bbui/src/Typography/Body.svelte               |  8 ++++++--
 .../src/components/integration/QueryEditor.svelte      |  4 ++--
 packages/builder/src/pages/app/portal/_layout.svelte   |  7 ++++++-
 .../builder/src/pages/app/portal/email/index.svelte    | 10 +++++++++-
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/bbui/src/Typography/Body.svelte b/packages/bbui/src/Typography/Body.svelte
index a45c6278a8..2879e73097 100644
--- a/packages/bbui/src/Typography/Body.svelte
+++ b/packages/bbui/src/Typography/Body.svelte
@@ -9,12 +9,16 @@
 <p
   class:noPadding
   class="spectrum-Body spectrum-Body--size{size}"
-  class:spectrum-Body--serif={serif}
->
+  class:spectrum-Body--serif={serif}>
   <slot />
 </p>
 
 <style>
+  p {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
   .noPadding {
     padding: 0;
     margin: 0;
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index 47f47c0fc1..b06f56fcf9 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -117,7 +117,7 @@
       readOnly,
       autoCloseBrackets: true,
       autoCloseTags: true,
-      theme: $themeStore.darkMode ? THEMES.DARK : THEMES.LIGHT,
+      theme: THEMES.DARK,
     }
 
     if (!tab)
@@ -132,7 +132,7 @@
 
     if (destroyed) return
 
-    CodeMirror.commands.autocomplete = function (cm) {
+    CodeMirror.commands.autocomplete = function(cm) {
       CodeMirror.showHint(cm, CodeMirror.hint.javascript)
     }
 
diff --git a/packages/builder/src/pages/app/portal/_layout.svelte b/packages/builder/src/pages/app/portal/_layout.svelte
index 2c80768e7a..518e1ecb24 100644
--- a/packages/builder/src/pages/app/portal/_layout.svelte
+++ b/packages/builder/src/pages/app/portal/_layout.svelte
@@ -89,7 +89,7 @@
         <MenuItem icon="LogOut" on:click={auth.logout}>Log out</MenuItem>
       </ActionMenu>
     </div>
-    <div>
+    <div class="content">
       <slot />
     </div>
   </div>
@@ -156,4 +156,9 @@
     text-overflow: ellipsis;
     font-weight: 500;
   }
+
+  .content {
+    height: 100vh;
+    overflow-y: auto;
+  }
 </style>
diff --git a/packages/builder/src/pages/app/portal/email/index.svelte b/packages/builder/src/pages/app/portal/email/index.svelte
index 5ec74a159c..c4c15c5287 100644
--- a/packages/builder/src/pages/app/portal/email/index.svelte
+++ b/packages/builder/src/pages/app/portal/email/index.svelte
@@ -13,6 +13,7 @@
     Select,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
+  import Editor from "components/integration/QueryEditor.svelte"
   import api from "builderStore/api"
 
   const ConfigTypes = {
@@ -156,7 +157,14 @@
         <Button cta on:click={saveTemplate}>Save</Button>
       </div>
       {#if selectedTemplate}
-        <TextArea bind:value={selectedTemplate.contents} />
+        {#key templateIdx}
+          <Editor
+            mode="handlebars"
+            on:change={e => {
+              selectedTemplate.contents = e.detail.value
+            }}
+            value={selectedTemplate.contents} />
+          {/key}
       {/if}
     </div>
   {/if}