From 51fa631abfe00e2cde8607a7d7a32c2dc93a589c Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 29 May 2024 17:50:07 +0100
Subject: [PATCH] Aligned header cosmetics

from Document Type workspace to Media Type,
Member Type and User Group workspaces.
---
 .../media-type-workspace-editor.element.ts    | 55 ++++++++++---------
 .../member-type-workspace-editor.element.ts   | 15 ++---
 .../user-group-workspace-editor.element.ts    | 18 ++++--
 3 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts
index 952daff1fa..946706326f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts
@@ -80,32 +80,34 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`<umb-workspace-editor alias="Umb.Workspace.MediaType">
-			<div id="header" slot="header">
-				<uui-button id="icon" @click=${this._handleIconClick} label="icon" compact>
-					<umb-icon name=${ifDefined(this._icon)}></umb-icon>
-				</uui-button>
+		return html`
+			<umb-workspace-editor alias="Umb.Workspace.MediaType">
+				<div id="header" slot="header">
+					<uui-button id="icon" compact label="icon" look="outline" @click=${this._handleIconClick}>
+						<umb-icon name=${ifDefined(this._icon)}></umb-icon>
+					</uui-button>
 
-				<div id="editors">
-					<umb-input-with-alias
-						id="name"
-						label=${this.localize.term('placeholders_entername')}
-						value=${this._name}
-						alias=${this._alias}
-						?auto-generate-alias=${this._isNew}
-						@change="${this.#onNameAndAliasChange}"
-						${umbFocus()}>
-					</umb-input-with-alias>
+					<div id="editors">
+						<umb-input-with-alias
+							id="name"
+							label=${this.localize.term('placeholders_entername')}
+							value=${this._name}
+							alias=${this._alias}
+							?auto-generate-alias=${this._isNew}
+							@change="${this.#onNameAndAliasChange}"
+							${umbFocus()}>
+						</umb-input-with-alias>
 
-					<uui-input
-						id="description"
-						.label=${this.localize.term('placeholders_enterDescription')}
-						.value=${this._description}
-						.placeholder=${this.localize.term('placeholders_enterDescription')}
-						@input=${this.#onDescriptionChange}></uui-input>
+						<uui-input
+							id="description"
+							.label=${this.localize.term('placeholders_enterDescription')}
+							.value=${this._description}
+							.placeholder=${this.localize.term('placeholders_enterDescription')}
+							@input=${this.#onDescriptionChange}></uui-input>
+					</div>
 				</div>
-			</div>
-		</umb-workspace-editor>`;
+			</umb-workspace-editor>
+		`;
 	}
 
 	static styles = [
@@ -119,6 +121,7 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
 			#header {
 				display: flex;
 				flex: 1 1 auto;
+				gap: var(--uui-size-space-2);
 			}
 
 			#editors {
@@ -143,9 +146,9 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
 			}
 
 			#icon {
-				font-size: calc(var(--uui-size-layout-3) / 2);
-				margin-right: var(--uui-size-space-2);
-				margin-left: calc(var(--uui-size-space-4) * -1);
+				font-size: var(--uui-size-8);
+				height: 60px;
+				width: 60px;
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace-editor.element.ts
index 844ec314b7..23fc0d1eba 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace-editor.element.ts
@@ -22,10 +22,6 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 	@state()
 	private _isNew?: boolean;
 
-	@state()
-	private _iconColorAlias?: string;
-	// TODO: Color should be using an alias, and look up in some dictionary/key/value) of project-colors.
-
 	#workspaceContext?: typeof UMB_MEMBER_TYPE_WORKSPACE_CONTEXT.TYPE;
 
 	constructor() {
@@ -82,8 +78,8 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 		return html`
 			<umb-workspace-editor alias="Umb.Workspace.MemberType">
 				<div id="header" slot="header">
-					<uui-button id="icon" @click=${this._handleIconClick} label="icon" compact>
-						<uui-icon name="${ifDefined(this._icon)}" style="color: ${this._iconColorAlias}"></uui-icon>
+					<uui-button id="icon" compact label="icon" look="outline" @click=${this._handleIconClick}>
+						<umb-icon name=${ifDefined(this._icon)}></umb-icon>
 					</uui-button>
 
 					<div id="editors">
@@ -120,6 +116,7 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 			#header {
 				display: flex;
 				flex: 1 1 auto;
+				gap: var(--uui-size-space-2);
 			}
 
 			#editors {
@@ -156,9 +153,9 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
 			}
 
 			#icon {
-				font-size: calc(var(--uui-size-layout-3) / 2);
-				margin-right: var(--uui-size-space-2);
-				margin-left: calc(var(--uui-size-space-4) * -1);
+				font-size: var(--uui-size-8);
+				height: 60px;
+				width: 60px;
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts
index 315ff19c85..cec188fe8a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts
@@ -210,7 +210,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
 	#renderHeader() {
 		return html`
 			<div id="header" slot="header">
-				<uui-button id="icon" @click=${this.#onIconClick} label="icon" compact>
+				<uui-button id="icon" compact label="icon" look="outline" @click=${this.#onIconClick}>
 					<umb-icon name=${this._icon || ''}></umb-icon>
 				</uui-button>
 
@@ -339,9 +339,12 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
 	}
 
 	#renderRightColumn() {
-		return html` <uui-box headline="Actions">
-			<umb-entity-action-list .entityType=${UMB_USER_GROUP_ENTITY_TYPE} .unique=${this._unique}></umb-entity-action-list
-		></uui-box>`;
+		return html`
+			<uui-box headline="Actions">
+				<umb-entity-action-list .entityType=${UMB_USER_GROUP_ENTITY_TYPE} .unique=${this._unique}>
+				</umb-entity-action-list>
+			</uui-box>
+		`;
 	}
 
 	static styles = [
@@ -355,11 +358,14 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
 			#header {
 				display: flex;
 				flex: 1 1 auto;
-				gap: var(--uui-size-space-3);
+				gap: var(--uui-size-space-2);
+				align-items: center;
 			}
 
 			#icon {
-				font-size: calc(var(--uui-size-layout-3) / 2);
+				font-size: var(--uui-size-5);
+				height: 30px;
+				width: 30px;
 			}
 
 			#name {