Add tooltip to Modal button and align mondalcomponent configuration names with other components

frontend/src/lib/components/apps/components/layout/AppModal.svelte

@@ -138,10 +138,16 @@
 {#if everRender}
 	<div class="h-full w-full">
 		<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
+			<div
+				class="inline-flex"
+				title={resolvedConfig.tooltip && String(resolvedConfig.tooltip).length > 0
+					? String(resolvedConfig.tooltip)
+					: undefined}
+			>
 			<Button
 				btnClasses={twMerge(css?.button?.class, 'wm-button', 'wm-modal-button')}
 				wrapperClasses={twMerge(
-					resolvedConfig?.buttonFillContainer ? 'w-full h-full' : '',
+					resolvedConfig?.fillContainer ? 'w-full h-full' : '',
 					css?.buttonContainer?.class,
 					'wm-button-container',
 					'wm-modal-button-container',
@@ -151,7 +157,7 @@
 				)}
 				style={css?.button?.style}
 				wrapperStyle={css?.buttonContainer?.style}
-				disabled={resolvedConfig.buttonDisabled}
+				disabled={resolvedConfig.disabled}
 				on:pointerdown={(e) => {
 					e?.stopPropagation()
 				}}
@@ -162,12 +168,13 @@
 					}
 					disposable?.openDrawer()
 				}}
-				extendedSize={resolvedConfig.buttonSize}
-				color={resolvedConfig.buttonColor}
+				extendedSize={resolvedConfig.size}
+				color={resolvedConfig.color}
 				variant="contained"
 			>
-				<div>{resolvedConfig.buttonLabel}</div>
-			</Button>
+					<div>{resolvedConfig.label}</div>
+				</Button>
+			</div>
 		</AlignWrapper>
 	</div>
 	<Portal target="#app-editor-top-level-drawer" name="app-modal">

frontend/src/lib/components/apps/editor/component/components.ts

@@ -3609,12 +3609,12 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 					value: false,
 					tooltip: 'Make button invisible when app is used outside of the edit mode'
 				},
-				buttonLabel: {
+				label: {
 					type: 'static',
 					fieldType: 'text',
 					value: 'Press me'
 				},
-				buttonColor: {
+				color: {
 					fieldType: 'select',
 					type: 'static',
 
@@ -3622,14 +3622,14 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 					value: 'blue',
 					tooltip: 'These presets can be overwritten with custom styles.'
 				},
-				buttonSize: {
+				size: {
 					fieldType: 'select',
 					type: 'static',
 
 					selectOptions: selectOptions.buttonSizeOptions,
 					value: 'xs'
 				},
-				buttonFillContainer: {
+				fillContainer: {
 					fieldType: 'boolean',
 					type: 'static',
 
@@ -3637,10 +3637,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 					tooltip:
 						'This will make the button fill the container width and height. Height and width can be overwritten with custom styles.'
 				},
-				buttonDisabled: {
+				disabled: {
 					fieldType: 'boolean',
 					type: 'static',
 					value: false
+				},
+				tooltip: {
+					type: 'static',
+					fieldType: 'text',
+					value: '',
+					tooltip: 'Tooltip text to show on hover'
 				}
 			},
 			componentInput: undefined,