styling

src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts

@@ -97,10 +97,12 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme
 						(dataType) =>
 							dataType.id
 								? html` <li class="item">
-										<button type="button" @click="${() => this._handleClick(dataType)}">
-											<uui-icon name="${dataType.icon}" class="icon"></uui-icon>
-											${dataType.name}
-										</button>
+										<uui-button type="button" @click="${() => this._handleClick(dataType)}">
+											<div class="item-content">
+												<uui-icon name="${dataType.icon ?? 'umb:bug'}" class="icon"></uui-icon>
+												${dataType.name}
+											</div>
+										</uui-button>
 								  </li>`
 								: ''
 				  )
@@ -108,74 +110,98 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbLitEleme
 		</ul>`;
 	}
 	private _renderCreate() {
-		return html`<li class="item">
-			<button type="button" @click="${() => this._handleCreate()}">
-				<uui-icon name="umb:plus" class="icon"></uui-icon>
-				Create new
-			</button>
-		</li>`;
+		return html`
+			<div class="item">
+				<uui-button id="create-button" type="button" look="placeholder" @click="${() => this._handleCreate()}">
+					<div class="item-content">
+						<uui-icon name="umb:add" class="icon"></uui-icon>
+						Create new
+					</div>
+				</uui-button>
+			</div>
+		`;
 	}
 
 	static styles = [
 		UUITextStyles,
 		css`
+			uui-box {
+				min-height: 100%;
+			}
 			#filter {
 				width: 100%;
 				margin-bottom: var(--uui-size-space-4);
 			}
 
 			#filter-icon {
+				height: 100%;
 				padding-left: var(--uui-size-space-2);
+				display: flex;
+				color: var(--uui-color-border);
 			}
 
 			#item-grid {
 				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+				grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 				margin: 0;
 				padding: 0;
-				grid-gap: var(--uui-size-space-4);
 			}
 
-			#item-grid .item {
-				display: flex;
-				align-items: flex-start;
-				justify-content: center;
+			#item-grid:not(:last-child) {
+				border-bottom: 1px solid var(--uui-color-divider);
+				padding-bottom: var(--uui-size-space-5);
+			}
+
+			.item {
 				list-style: none;
 				height: 100%;
+				width: 100%;
 				border: 1px solid transparent;
 				border-radius: var(--uui-border-radius);
+				box-sizing: border-box;
+				color: var(--uui-color-interactive);
 			}
 
-			#item-grid .item:hover {
+			.item:hover {
 				background: var(--uui-color-surface-emphasis);
 				color: var(--uui-color-interactive-emphasis);
 				cursor: pointer;
 			}
 
-			#item-grid .item[selected] button {
-				background: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
+			.item uui-button {
+				--uui-button-padding-left-factor: 0;
+				--uui-button-padding-right-factor: 0;
+				--uui-button-padding-top-factor: 0;
+				--uui-button-padding-bottom-factor: 0;
+				width: 100%;
+				height: 100%;
 			}
 
-			#item-grid .item button {
-				background: none;
-				border: none;
-				cursor: pointer;
-				padding: var(--uui-size-space-3);
-				display: flex;
-				align-items: center;
-				flex-direction: column;
-				justify-content: center;
-				font-size: 0.8rem;
+			.item .item-content {
+				text-align: center;
+				box-sizing: border-box;
+
+				padding: var(--uui-size-space-2);
+
+				display: grid;
+				grid-template-rows: 40px 1fr;
 				height: 100%;
 				width: 100%;
-				color: var(--uui-color-interactive);
-				border-radius: var(--uui-border-radius);
+			}
+			.item .icon {
+				font-size: 2em;
+				margin: auto;
 			}
 
-			#item-grid .item .icon {
-				font-size: 2em;
-				margin-bottom: var(--uui-size-space-2);
+			#category-name {
+				text-align: center;
+				display: block;
+				text-transform: capitalize;
+				font-size: 1.2rem;
+			}
+			.item:has(#create-button) {
+				margin-top: var(--uui-size-layout-1);
+				max-width: 100px;
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts

@@ -314,13 +314,11 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
 				height: 100%;
 				width: 100%;
 			}
-
 			#item-grid .item .icon {
 				font-size: 2em;
 				margin: auto;
-				/* width: fit-content;
-				height: fit-content; */
 			}
+
 			#category-name {
 				text-align: center;
 				display: block;