diff --git a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/components/user-group-default-permission-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/components/user-group-default-permission-list.element.ts index 0a0c09d09e..51738c068b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/components/user-group-default-permission-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/users/user-groups/workspace/components/user-group-default-permission-list.element.ts @@ -45,20 +45,40 @@ export class UmbUserGroupDefaultPermissionListElement extends UmbLitElement { } #renderPermission(userPermissionManifest: ManifestUserPermission) { - return html`
+ return html`
- this.#onChangeUserPermission(event, userPermissionManifest)}> -
-
${userPermissionManifest.meta.label}
- ${userPermissionManifest.meta.description} -
+ @change=${(event: UUIBooleanInputEvent) => this.#onChangeUserPermission(event, userPermissionManifest)}> +
+
${userPermissionManifest.meta.label}
+ ${userPermissionManifest.meta.description} +
+
`; } - static styles = [UmbTextStyles, css``]; + static styles = [ + UmbTextStyles, + css` + .permission-toggle { + display: flex; + align-items: center; + border-bottom: 1px solid var(--uui-color-divider); + padding: var(--uui-size-space-3) 0 var(--uui-size-space-4) 0; + } + + .permission-meta { + margin-left: var(--uui-size-space-4); + line-height: 1.2em; + } + + .permission-name { + font-weight: bold; + } + `, + ]; } export default UmbUserGroupDefaultPermissionListElement;