From bc831897aa2ce421553467a0b76dc8cd0ef8a8cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Fri, 9 Jun 2023 17:50:53 +1200
Subject: [PATCH] category header styling

---
 .../data-type-picker-flow-modal.element.ts        | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
index 1ffb3f7aba..f16d61fb22 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
@@ -225,7 +225,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
 	private _renderUIs() {
 		return html` ${Object.entries(this._groupedPropertyEditorUIs).map(
 			([key, value]) =>
-				html` <h4>${key}</h4>
+				html` <h4 id="category-name">${key}</h4>
 					${this._renderGroupUIs(value)}`
 		)}`;
 	}
@@ -237,7 +237,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
 						uis,
 						(propertyEditorUI) => propertyEditorUI.alias,
 						(propertyEditorUI) => html` <li class="item">
-							<a type="button" href=${this._dataTypePickerModalRouteBuilder!({ uiAlias: propertyEditorUI.alias })}>
+							<a href=${this._dataTypePickerModalRouteBuilder!({ uiAlias: propertyEditorUI.alias })}>
 								<uui-icon name="${propertyEditorUI.meta.icon}" class="icon"></uui-icon>
 								${propertyEditorUI.meta.label || propertyEditorUI.name}
 							</a>
@@ -269,6 +269,11 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
 				padding: 0;
 			}
 
+			#item-grid:not(:last-child) {
+				border-bottom: 1px solid var(--uui-color-divider);
+				padding-bottom: var(--uui-size-space-5);
+			}
+
 			#item-grid .item {
 				list-style: none;
 				height: 100%;
@@ -308,6 +313,12 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
 				/* width: fit-content;
 				height: fit-content; */
 			}
+			#category-name {
+				text-align: center;
+				display: block;
+				text-transform: capitalize;
+				font-size: 1.2rem;
+			}
 		`,
 	];
 }