css cleanup

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.element.ts

@@ -26,14 +26,8 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 				margin-bottom: var(--uui-size-space-5);
 			}
 
-			uui-box p:first-child {
-				margin-block-start: 0;
-			}
-
-			.group-wrapper {
-				display: flex;
-				flex-wrap: wrap;
-				margin-inline: -5px;
+			p {
+				margin: 0;
 			}
 
 			.header {
@@ -42,36 +36,24 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 				align-items: center;
 			}
 
-			uui-box:first-child p {
-				margin-top: 0;
-			}
-
-			.group-box {
-				flex-basis: 20%;
-				min-width: 150px;
-				max-width: calc(20% - 10px);
-				margin: 5px;
-				text-align: center;
-				font-weight: bold;
-				cursor: pointer;
-			}
-
-			.data .result-wrapper:not(:first-child) {
-				padding-top: var(--uui-size-space-5);
+			.check-results-wrapper {
 				margin-top: var(--uui-size-space-5);
+			}
+
+			.check-results-wrapper .check-result:not(:first-child) {
+				padding-top: var(--uui-size-space-5);
 				border-top: 1px solid var(--uui-color-divider-standalone);
 			}
 
-			.data p {
-				margin: 0;
-			}
-			.data uui-button {
+			.check-results-wrapper uui-button {
 				margin-block-start: 1em;
 			}
-			.description {
+
+			.check-result-description {
 				display: flex;
 			}
-			.description span {
+
+			.check-result-description span {
 				width: 36px;
 			}
 
@@ -98,9 +80,6 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 	@state()
 	private _keyResults?: any;
 
-	@state()
-	private _actionButtonStates?: [{ key: string; state: UUIButtonState }];
-
 	private _api?: UmbHealthCheckContext;
 
 	constructor() {
@@ -162,10 +141,10 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 	renderCheckResults(key: string) {
 		const checkResults = this._keyResults?.find((result: any) => result.key === key);
 		return html`<uui-icon-registry-essential>
-			<div class="data">
+			<div class="check-results-wrapper">
 				${checkResults?.results.map((result: any) => {
-					return html`<div class="result-wrapper">
-						<div class="description">
+					return html`<div class="check-result">
+						<div class="check-result-description">
 							<span>${this.renderIcon(result.resultType)}</span>
 							<p>${result.message}</p>
 						</div>

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts

@@ -19,49 +19,6 @@ export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
 				margin-top: var(--uui-size-space-5);
 			}
 
-			.group-wrapper {
-				display: grid;
-				gap: var(--uui-size-space-4);
-				grid-template-columns: repeat(auto-fit, minmax(250px, auto));
-			}
-
-			.group-box {
-				position: relative;
-			}
-
-			.group-box:hover::after {
-				content: '';
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				border-radius: var(--uui-border-radius);
-				transition: opacity 100ms ease-out 0s;
-				opacity: 0.33;
-				outline-color: var(--uui-color-selected);
-				outline-width: 4px;
-				outline-style: solid;
-			}
-
-			a {
-				text-align: center;
-				font-weight: bold;
-				cursor: pointer;
-				text-decoration: none;
-				color: var(--uui-color-text);
-			}
-
-			uui-tag {
-				margin-top: 5px;
-			}
-
-			uui-tag uui-icon {
-				padding-right: 10px;
-			}
-
 			.flex {
 				display: flex;
 				justify-content: space-between;