From 7ee4a373206bef7fe4885edb74eaa122c18da257 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 20 Apr 2021 12:34:10 +0100
Subject: [PATCH] Update calculate popover

---
 .../popovers/CalculatePopover.svelte          | 33 +++++++------------
 1 file changed, 11 insertions(+), 22 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
index a28cc523c5..8344242b7c 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
@@ -1,8 +1,6 @@
 <script>
-  import { Button, Select } from "@budibase/bbui"
-
+  import { Button, Select, Label, notifications } from "@budibase/bbui"
   import { tables, views } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
   import analytics from "analytics"
 
   const CALCULATIONS = [
@@ -45,21 +43,15 @@
 <div class="actions">
   <h5>Calculate</h5>
   <div class="input-group-row">
-    <p>The</p>
-    <Select secondary thin bind:value={view.calculation}>
-      <option value={''}>Choose an option</option>
-      {#each CALCULATIONS as calculation}
-        <option value={calculation.key}>{calculation.name}</option>
-      {/each}
-    </Select>
+    <Label>The</Label>
+    <Select
+      bind:value={view.calculation}
+      options={CALCULATIONS}
+      getOptionLabel={x => x.name}
+      getOptionValue={x => x.key} />
     {#if view.calculation}
-      <p>of</p>
-      <Select secondary thin bind:value={view.field}>
-        <option value={''}>You must choose an option</option>
-        {#each fields as field}
-          <option value={field}>{field}</option>
-        {/each}
-      </Select>
+      <Label>Of</Label>
+      <Select bind:value={view.field} options={fields} />
     {/if}
   </div>
   <div class="footer">
@@ -70,8 +62,10 @@
 
 <style>
   .actions {
+    width: 200px;
     display: grid;
     grid-gap: var(--spacing-xl);
+    padding: var(--spacing-xl);
   }
 
   h5 {
@@ -91,9 +85,4 @@
     gap: var(--spacing-s);
     align-items: center;
   }
-
-  p {
-    margin: 0;
-    font-size: var(--font-size-xs);
-  }
 </style>