category header styling

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;
+			}
 		`,
 	];
 }