Update group by popover

packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte

@@ -56,7 +56,7 @@
   </div>
   <div class="footer">
     <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={saveView} disabled={!view.field}>Save</Button>
+    <Button cta on:click={saveView} disabled={!view.field}>Save</Button>
   </div>
 </div>
 

packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte

@@ -162,7 +162,7 @@
     </div>
     <div class="buttons">
       <Button secondary on:click={onClosed}>Cancel</Button>
-      <Button primary on:click={saveView}>Save</Button>
+      <Button cta on:click={saveView}>Save</Button>
     </div>
   </div>
 </div>

packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte

@@ -22,26 +22,20 @@
 </script>
 
 <div class="actions">
-  <h5>Group</h5>
+  <h5>Group By</h5>
-  <div class="input-group-row">
+  <Select bind:value={view.groupBy} options={fields} />
-    <p>By</p>
-    <Select secondary thin bind:value={view.groupBy}>
-      <option value="">Choose an option</option>
-      {#each fields as field}
-        <option value={field}>{field}</option>
-      {/each}
-    </Select>
-  </div>
   <div class="footer">
     <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={saveView}>Save</Button>
+    <Button cta on:click={saveView}>Save</Button>
   </div>
 </div>
 
 <style>
   .actions {
     display: grid;
+    width: 200px;
     grid-gap: var(--spacing-xl);
+    padding: var(--spacing-xl);
   }
 
   h5 {