From 1b34bc8e81475972cdcfe54a6a336947f3b86897 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 26 Jul 2022 11:37:27 +0100
Subject: [PATCH] Update device preview picker to be quiet

---
 packages/bbui/src/ActionButton/ActionButton.svelte         | 7 +++++++
 .../[screenId]/_components/DevicePreviewSelect.svelte      | 5 ++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 53ba6c7e51..cfc810807e 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -84,6 +84,7 @@
   }
   :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
     margin-left: 0;
+    transition: color ease-out 130ms;
   }
   .is-selected:not(.spectrum-ActionButton--emphasized) {
     background: var(--spectrum-global-color-gray-300);
@@ -92,4 +93,10 @@
     padding: 0;
     min-width: 0;
   }
+  .spectrum-ActionButton--quiet {
+    padding: 0 8px;
+  }
+  .is-selected:not(.emphasized) .spectrum-Icon {
+    color: var(--spectrum-global-color-gray-900);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
index 9f9447daee..870f801336 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
@@ -3,18 +3,21 @@
   import { store } from "builderStore"
 </script>
 
-<ActionGroup compact>
+<ActionGroup compact quiet>
   <ActionButton
+    quiet
     icon="DeviceDesktop"
     selected={$store.previewDevice === "desktop"}
     on:click={() => store.actions.preview.setDevice("desktop")}
   />
   <ActionButton
+    quiet
     icon="DeviceTablet"
     selected={$store.previewDevice === "tablet"}
     on:click={() => store.actions.preview.setDevice("tablet")}
   />
   <ActionButton
+    quiet
     icon="DevicePhone"
     selected={$store.previewDevice === "mobile"}
     on:click={() => store.actions.preview.setDevice("mobile")}