From 481441124f347ad9012bea387ee58ac965702cf1 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Sun, 4 Dec 2022 13:24:16 +0100
Subject: [PATCH] fix(frontend): Make context clickable (#984)

* fix(frontend): Make context clickable

* fix(frontend): Fix buttons
---
 .../apps/components/buttons/AppButton.svelte  | 23 +++++++++++--------
 .../apps/editor/componentsPanel/data.ts       |  1 +
 .../editor/contextPanel/ContextPanel.svelte   | 10 +++++++-
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index d3e0cbe896..2c9a705c8a 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Button, type ButtonType } from '$lib/components/common'
 	import type { InputsSpec } from '../../types'
+	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import RunnableComponent from '../helpers/RunnableComponent.svelte'
 
@@ -12,6 +13,9 @@
 	export let componentInputs: InputsSpec
 	export let extraQueryParams: Record<string, any> = {}
 
+	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
+	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
+
 	export const staticOutputs: string[] = ['loading', 'result']
 
 	let labelValue: string = 'Default label'
@@ -34,14 +38,15 @@
 	autoRefresh={false}
 	{extraQueryParams}
 >
-	<Button
-		on:click={() => {
-			runnableComponent?.runComponent()
-		}}
-		btnClasses="w-full h-full"
-		{size}
-		{color}
+	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+		<Button
+			on:click={() => {
+				runnableComponent?.runComponent()
+			}}
+			{size}
+			{color}
+		>
+			{labelValue}
+		</Button></AlignWrapper
 	>
-		{labelValue}
-	</Button>
 </RunnableComponent>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
index 33f9730b96..fc71115e3f 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
@@ -36,6 +36,7 @@ const buttons: ComponentSet = {
 	components: [
 		{
 			...defaultProps,
+			...defaultAlignement,
 			id: 'buttoncomponent',
 			type: 'buttoncomponent',
 			componentInputs: {
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index 3fe798c7e7..7fe17ca297 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -178,7 +178,15 @@
 <PanelSection title="Outputs">
 	{#each Object.entries($staticOutputs) as [componentId, outputs], index}
 		{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
-			<Badge color="blue">Component: {componentId}</Badge>
+			<Button
+				btnClasses="bg-blue-100 text-blue-800 hover:bg-blue-200 !px-2 !py-1 text-xs focus:bg-blue-200"
+				size="xs"
+				spacingSize="xs"
+				on:click={() => ($selectedComponent = componentId)}
+				color="blue"
+			>
+				Component: {componentId}
+			</Button>
 
 			<div
 				class={classNames(