From 5c0849cc616c802d65797b3a8b4d3a5209b78005 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 27 Jul 2022 13:03:16 +0100
Subject: [PATCH] Update new component panel styles to only use border when
 focused via keyboard, but background colour when hovering

---
 .../new/_components/NewComponentPanel.svelte              | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
index 840e3a3bcf..8c62750b95 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
@@ -237,23 +237,23 @@
     margin-top: var(--spacing-xs);
   }
   .component {
-    background-color: var(--spectrum-global-color-gray-200);
+    background: var(--spectrum-global-color-gray-200);
     border-radius: 4px;
     display: flex;
     align-items: center;
     border: 1px solid var(--spectrum-global-color-gray-200);
-    transition: border-color 130ms ease-out;
+    transition: background 130ms ease-out, border-color 130ms ease-out;
     flex-direction: row;
     justify-content: flex-start;
     padding: var(--spacing-s) var(--spacing-l);
     gap: var(--spacing-m);
     overflow: hidden;
   }
-  .component.selected,
-  .component:hover {
+  .component.selected {
     border-color: var(--spectrum-global-color-blue-400);
   }
   .component:hover {
+    background: var(--spectrum-global-color-gray-300);
     cursor: pointer;
   }
   .component :global(.spectrum-Body) {