Update calculate popover

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>
+    <Label>The</Label>
-    <Select secondary thin bind:value={view.calculation}>
+    <Select
-      <option value={''}>Choose an option</option>
+      bind:value={view.calculation}
-      {#each CALCULATIONS as calculation}
+      options={CALCULATIONS}
-        <option value={calculation.key}>{calculation.name}</option>
+      getOptionLabel={x => x.name}
-      {/each}
+      getOptionValue={x => x.key} />
-    </Select>
     {#if view.calculation}
-      <p>of</p>
+      <Label>Of</Label>
-      <Select secondary thin bind:value={view.field}>
+      <Select bind:value={view.field} options={fields} />
-        <option value={''}>You must choose an option</option>
-        {#each fields as field}
-          <option value={field}>{field}</option>
-        {/each}
-      </Select>
     {/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>