Merge pull request #19047 from Stropdasman/switch-save-to-new-action-button

Switch Save button to ActionButton to fix icon spacing in query editor

Author: melohagan

packages/builder/src/components/integration/QueryViewer.svelte

@@ -2,15 +2,13 @@
   import { goto as gotoStore } from "@roxi/routify"
   import { datasources, integrations, queries } from "@/stores/builder"
   import {
-    Icon,
     Select,
     Input,
     Label,
     notifications,
     Heading,
     Body,
     Divider,
-    Button,
     ActionButton,
     Checkbox,
   } from "@budibase/bbui"
@@ -259,7 +257,8 @@
           Run query
         </ActionButton>
         <div class="tooltip" title="Run your query to enable saving">
-          <Button
+          <ActionButton
+            icon="floppy-disk"
             on:click={async () => {
               const response = await saveQuery()
 
@@ -277,11 +276,9 @@
               nameError ||
               rows.length === 0
             )}
-            overBackground
           >
-            <Icon size="S" name="floppy-disk" />
             Save
-          </Button>
+          </ActionButton>
         </div>
       </div>
     </div>
@@ -524,21 +521,21 @@
     color: var(--ink);
   }
 
-  .controls :global(.is-disabled) {
+  .controls :global(.disabled) {
     pointer-events: none;
     background-color: transparent;
     color: var(--grey-3);
   }
 
+  .controls :global(.disabled i) {
+    color: var(--grey-3);
+  }
+
   .controls :global(span) {
     display: flex;
     align-items: center;
   }
 
-  .controls :global(.icon) {
-    margin-right: 8px;
-  }
-
   .configField {
     display: grid;
     grid-template-columns: 20% 1fr;