From 025b3cb7ec548823eeb68302612a7f3e812bd8f4 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 13 Aug 2022 21:32:44 +0200
Subject: [PATCH] more consistent hover behavior for prop picker

---
 .../propertyPicker/ObjectViewer.svelte        | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index 42db394fc5..0e32577b34 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -39,16 +39,15 @@
 
 {#if keys.length > 0}
 	<span class:hidden={collapsed}>
-		{#if level != 0}<span class="cursor-pointer hover:bg-slate-200" on:click={collapse}>(-)</span
+		{#if level != 0}<span class="cursor-pointer hover:bg-slate-200 px-1 rounded" on:click={collapse}
+				>(-)</span
 			>{/if}
 		<ul class="w-full">
 			{#each keys as key, index}
-				<li class={getTypeAsString(json[key]) !== 'object' ? 'hover:bg-sky-100 pt-1' : 'pt-1'}>
-					{#if !isArray}
-						<button on:click={() => selectProp(key)} class="key mr-1">{key}:</button>
-					{:else}
-						<button on:click={() => selectProp(key)} class="key mr-1">{index}:</button>
-					{/if}
+				<li class="pt-1">
+					<button on:click={() => selectProp(key)} class="key rounded px-1 hover:bg-sky-100"
+						>{!isArray ? key : index}:</button
+					>
 
 					{#if getTypeAsString(json[key]) === 'object'}
 						<svelte:self
@@ -60,14 +59,14 @@
 							on:select
 						/>
 					{:else}
-						<button class="val {getTypeAsString(json[key])}" on:click={() => selectProp(key)}>
+						<button
+							class="val rounded px-1 hover:bg-sky-100 {getTypeAsString(json[key])}"
+							on:click={() => selectProp(key)}
+						>
 							{#if json[key] === undefined}
 								<WarningMessage />
 							{:else}
 								<span>{truncate(JSON.stringify(json[key]), 20)}</span>
-								{#if !pureViewer}
-									<button class="ml-2 default-button-secondary py-0"> Select </button>
-								{/if}
 							{/if}
 						</button>
 					{/if}