From c1af7a7d9394a042034b56ed0241b67c41566da8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:46:11 +0200
Subject: [PATCH] Fix editor

---
 .../components/integration/QueryEditor.svelte |  1 +
 .../components/integration/QueryViewer.svelte | 56 +++++++++----------
 2 files changed, 29 insertions(+), 28 deletions(-)
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index 2bfa9009e2..d2dd1c2015 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -166,6 +166,7 @@
 
 {#if label}
   <Label small>{label}</Label>
+  <Spacer medium />
 {/if}
 <div style={`--code-mirror-height: ${editorHeight}px`}>
   <textarea tabindex="0" bind:this={refs.editor} readonly {value} />
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 956ab1b158..9b8bdaf4fe 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -4,6 +4,7 @@
     Icon,
     Select,
     Button,
+    ButtonGroup,
     Body,
     Label,
     Layout,
@@ -149,29 +150,26 @@
     </div>
     <div class="viewer-controls">
       <Heading s>Results</Heading>
-      <div class="button-container">
+      <ButtonGroup>
         <Button
-          secondary
-          thin
+          cta
           disabled={data.length === 0 || !query.name}
           on:click={saveQuery}
         >
           Save Query
         </Button>
-        <Spacer medium />
-        <Button thin secondary on:click={previewQuery}>Run Query</Button>
-      </div>
+        <Button secondary on:click={previewQuery}>Run Query</Button>
+      </ButtonGroup>
     </div>
-      <Body s>
-        Below, you can preview the results from your query and change the
-        schema.
-      </Body>
-      <section class="viewer">
-        {#if data}
-          <Tabs selected="JSON">
-            <Tab title="JSON">
-              <pre
-                class="preview">
+    <Body s>
+      Below, you can preview the results from your query and change the schema.
+    </Body>
+    <section class="viewer">
+      {#if data}
+        <Tabs selected="JSON">
+          <Tab title="JSON">
+            <pre
+              class="preview">
                 <!-- prettier-ignore -->
                 {#if !data[0]}
                   Please run your query to fetch some data.
@@ -179,25 +177,27 @@
                   {JSON.stringify(data[0], undefined, 2)}
                 {/if}
               </pre>
-            </Tab>
-            <Tab title="Schema">
+          </Tab>
+          <Tab title="Schema">
+            <Layout gap="S">
               {#each fields as field, idx}
-                <Spacer small />
                 <div class="field">
                   <Input placeholder="Field Name" bind:value={field.name} />
                   <Select bind:value={field.type} options={typeOptions} />
                   <Icon name="bleClose" on:click={() => deleteField(idx)} />
                 </div>
               {/each}
-              <Spacer extraLarge />
-              <Button thin secondary on:click={newField}>Add Field</Button>
-            </Tab>
-            <Tab title="Preview">
-              <ExternalDataSourceTable {query} {data} />
-            </Tab>
-          </Tabs>
-        {/if}
-      </section>
+              <div>
+                <Button secondary on:click={newField}>Add Field</Button>
+              </div>
+            </Layout>
+          </Tab>
+          <Tab title="Preview">
+            <ExternalDataSourceTable {query} {data} />
+          </Tab>
+        </Tabs>
+      {/if}
+    </section>
   {/if}
 </Layout>
 
