From 3e2fcf2f7689c053a553c2c767d5c7be5c801b29 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 21 Apr 2023 10:38:07 +0100
Subject: [PATCH] Make delete rows button more prominent

---
 .../grid/controls/DeleteButton.svelte         | 30 +++++++------------
 .../src/components/grid/stores/ui.js          |  6 +++-
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/controls/DeleteButton.svelte b/packages/frontend-core/src/components/grid/controls/DeleteButton.svelte
index 9380228f2c..53e0c46883 100644
--- a/packages/frontend-core/src/components/grid/controls/DeleteButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/DeleteButton.svelte
@@ -1,10 +1,5 @@
 <script>
-  import {
-    Modal,
-    ModalContent,
-    ActionButton,
-    notifications,
-  } from "@budibase/bbui"
+  import { Modal, ModalContent, Button, notifications } from "@budibase/bbui"
   import { getContext } from "svelte"
 
   const { selectedRows, rows, config } = getContext("grid")
@@ -32,14 +27,15 @@
 
 {#if selectedRowCount}
   <div class="delete-button" data-ignore-click-outside="true">
-    <ActionButton
+    <Button
       icon="Delete"
-      size="S"
+      size="M"
       on:click={modal.show}
       disabled={!$config.allowEditRows}
+      cta
     >
       Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
-    </ActionButton>
+    </Button>
   </div>
 {/if}
 
@@ -57,16 +53,12 @@
 </Modal>
 
 <style>
-  .delete-button :global(.spectrum-ActionButton:not(:disabled) *) {
-    color: var(--spectrum-global-color-red-400);
-  }
-  .delete-button :global(.spectrum-ActionButton:not(:disabled)) {
+  .delete-button :global(.spectrum-Button:not(:disabled)) {
+    background-color: var(--spectrum-global-color-red-400);
     border-color: var(--spectrum-global-color-red-400);
   }
-  /*.delete-button.disabled :global(.spectrum-ActionButton *) {*/
-  /*  color: var(--spectrum-global-color-gray-600);*/
-  /*}*/
-  /*.delete-button.disabled :global(.spectrum-ActionButton) {*/
-  /*  border-color: var(--spectrum-global-color-gray-400);*/
-  /*}*/
+  .delete-button :global(.spectrum-Button:not(:disabled):hover) {
+    background-color: var(--spectrum-global-color-red-500);
+    border-color: var(--spectrum-global-color-red-500);
+  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
index 197b3f80d2..cb7504b32e 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/packages/frontend-core/src/components/grid/stores/ui.js
@@ -1,4 +1,5 @@
 import { writable, get, derived } from "svelte/store"
+import { tick } from "svelte"
 import {
   DefaultRowHeight,
   LargeRowHeight,
@@ -101,7 +102,10 @@ export const initialise = context => {
   } = context
 
   // Ensure we clear invalid rows from state if they disappear
-  rows.subscribe(() => {
+  rows.subscribe(async () => {
+    // We tick here to ensure other derived stores have properly updated.
+    // We depend on the row lookup map which is a derived store,
+    await tick()
     const $focusedCellId = get(focusedCellId)
     const $selectedRows = get(selectedRows)
     const $hoveredRowId = get(hoveredRowId)