various app updates (#1373)

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}

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>

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}

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}