From 361ca33527412a92535ef2d6e9c4983ff92ae08f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Fri, 7 Apr 2023 13:58:02 +0200
Subject: [PATCH] various app updates (#1373)

---
 .../apps/components/buttons/AppButton.svelte   |  1 +
 .../componentsPanel/ComponentList.svelte       | 18 ++----------------
 .../editor/settingsPanel/ComponentPanel.svelte |  2 +-
 .../lib/components/common/button/Button.svelte |  3 ++-
 4 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index b6322d4159..220bab3abb 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -131,6 +131,7 @@
 				customCss?.button?.class,
 				resolvedConfig.fillContainer ? 'w-full h-full' : ''
 			)}
+			wrapperClasses={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
 			style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button?.style].join(';')}
 			disabled={resolvedConfig.disabled}
 			on:click={handleClick}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 3f5a4dc671..1e1cefd5b1 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -64,21 +64,6 @@
 			</button>
 		{/if}
 	</div>
-	<!-- {#if $focusedGrid}
-		<Badge color="indigo" baseClass="w-full">
-			<div class="flex flex-row gap-2 justify-center items-center">
-				<div>{`Subgrid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
-				<button
-					on:click={() => {
-						$selectedComponent = undefined
-						$focusedGrid = undefined
-					}}
-				>
-					<X size={14} />
-				</button>
-			</div>
-		</Badge>
-	{/if} -->
 </section>
 
 <div class="relative">
@@ -102,7 +87,8 @@
 										<button
 											on:click={() => addComponent(item)}
 											title={componentsRecord[item].name}
-											class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center justify-center bg-white rounded-md hover:bg-gray-100 duration-200 hover:border-blue-500"
+											class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+											justify-center bg-white rounded-md hover:bg-blue-50 duration-200 hover:border-blue-500"
 										>
 											<svelte:component this={componentsRecord[item].icon} class="text-gray-600" />
 										</button>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index f9725aebd5..94c764a928 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -222,7 +222,7 @@
 				/>
 			</PanelSection>
 		{:else}
-			<div class="h-full w-full font-bold text-gray-400 text-lg py-10 px-4"
+			<div class="h-full w-full text-sm text-gray-500 text-center py-8 px-2"
 				>{ccomponents[component.type].name} has no configuration</div
 			>
 		{/if}
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 4c40e6a512..8bbc4908cc 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -13,6 +13,7 @@
 	export let color: ButtonType.Color = 'blue'
 	export let variant: ButtonType.Variant = 'contained'
 	export let btnClasses: string = ''
+	export let wrapperClasses: string = ''
 	export let disabled: boolean = false
 	export let href: string | undefined = undefined
 	export let target: ButtonType.Target = '_self'
@@ -121,7 +122,7 @@
 	$: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes)
 </script>
 
-<div class="flex flex-row divide-x divide-frost-600">
+<div class="flex flex-row divide-x divide-frost-600 {wrapperClasses}">
 	<svelte:element
 		this={href ? 'a' : 'button'}
 		bind:this={element}