From 967f618e79ef98248ec65b2c5c4e53ab862db253 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Wed, 13 Mar 2024 16:19:53 +0100
Subject: [PATCH] style the publish fields

---
 .../document-schedule-modal.element.ts        | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/schedule-modal/document-schedule-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/schedule-modal/document-schedule-modal.element.ts
index 06556f425b..1492320a5b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/schedule-modal/document-schedule-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/schedule-modal/document-schedule-modal.element.ts
@@ -125,12 +125,18 @@ export class UmbDocumentScheduleModalElement extends UmbModalBaseElement<
 
 	#renderPublishDateInput(option: UmbDocumentVariantOptionModel) {
 		return html`<div class="publish-date">
-			<umb-input-date
-				@change=${(e: Event) => this.#onFromDateChange(e, option.unique)}
-				label=${this.localize.term('general_publishDate')}></umb-input-date>
-			<umb-input-date
-				@change=${(e: Event) => this.#onToDateChange(e, option.unique)}
-				label=${this.localize.term('general_publishDate')}></umb-input-date>
+			<uui-form-layout-item>
+				<uui-label><umb-localize key="content_releaseDate">Publish at</umb-localize></uui-label>
+				<umb-input-date
+					@change=${(e: Event) => this.#onFromDateChange(e, option.unique)}
+					label=${this.localize.term('general_publishDate')}></umb-input-date>
+			</uui-form-layout-item>
+			<uui-form-layout-item>
+				<uui-label><umb-localize key="content_unpublishDate">Unpublish at</umb-localize></uui-label>
+				<umb-input-date
+					@change=${(e: Event) => this.#onToDateChange(e, option.unique)}
+					label=${this.localize.term('general_publishDate')}></umb-input-date>
+			</uui-form-layout-item>
 		</div>`;
 	}
 
@@ -175,7 +181,18 @@ export class UmbDocumentScheduleModalElement extends UmbModalBaseElement<
 				flex-direction: row;
 				justify-content: space-between;
 				gap: 1rem;
-				margin: 0.5rem 0;
+				border-top: 1px solid var(--uui-color-border);
+				border-bottom: 1px solid var(--uui-color-border);
+			}
+
+			.publish-date > uui-form-layout-item {
+				flex: 1;
+				margin: 0;
+				padding: 0.5rem 0 1rem;
+			}
+
+			.publish-date > uui-form-layout-item:first-child {
+				border-right: 1px solid var(--uui-color-border);
 			}
 		`,
 	];