From 5e1c9d26e1203454a9d8229cda55db6314d094ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Thu, 19 Oct 2023 19:25:41 +1300
Subject: [PATCH] styling

---
 .../image-cropper.element.ts                   |  7 ++++---
 .../input-image-cropper.element.ts             | 18 ++++++++----------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper.element.ts
index 1b63078851..e59f9dd993 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper.element.ts
@@ -332,9 +332,9 @@ export class UmbImageCropperElement extends LitElement {
 				value="0"
 				step="0.001"></uui-slider>
 			<div id="actions">
-				<uui-button @click=${this.#onReset}>Reset crop</uui-button>
-				<uui-button look="secondary" @click=${this.#onCancel}>Cancel</uui-button>
-				<uui-button look="primary" color="positive" @click=${this.#onSave}>Save Crop</uui-button>
+				<uui-button @click=${this.#onReset} label="Reset"></uui-button>
+				<uui-button look="secondary" @click=${this.#onCancel} label="Cancel"></uui-button>
+				<uui-button look="primary" color="positive" @click=${this.#onSave} label="Save"></uui-button>
 			</div>
 		`;
 	}
@@ -363,6 +363,7 @@ export class UmbImageCropperElement extends LitElement {
 		#actions {
 			display: flex;
 			justify-content: flex-end;
+			gap: var(--uui-size-space-1);
 		}
 
 		#mask {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts
index cd43e2af2a..27da9dcf0b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts
@@ -89,13 +89,7 @@ export class UmbInputImageCropperElement extends LitElement {
 
 	render() {
 		return html`
-			<div id="main">
-				${this.#renderMain()}
-				<div id="actions">
-					<uui-button>Remove files (NOT IMPLEMENTED YET)</uui-button>
-					<uui-button>Reset focal point</uui-button>
-				</div>
-			</div>
+			<div id="main">${this.#renderMain()}</div>
 			<div id="side">${this.#renderSide()}</div>
 		`;
 	}
@@ -108,9 +102,13 @@ export class UmbInputImageCropperElement extends LitElement {
 					.focalPoint=${this.focalPoint}
 					.value=${this.currentCrop}></umb-image-cropper>`
 			: html`<umb-image-cropper-focus-setter
-					@change=${this.#onFocalPointChange}
-					.focalPoint=${this.focalPoint}
-					.src=${this.src}></umb-image-cropper-focus-setter>`;
+						@change=${this.#onFocalPointChange}
+						.focalPoint=${this.focalPoint}
+						.src=${this.src}></umb-image-cropper-focus-setter>
+					<div id="actions">
+						<uui-button>Remove files (NOT IMPLEMENTED YET)</uui-button>
+						<uui-button>Reset focal point</uui-button>
+					</div> `;
 	}
 
 	#renderSide() {