diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index d5a2195d0b242..e415c9db2ea82 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -2250,6 +2250,42 @@ kbd,
height: 16px;
}
+#ServerAuditDialog #ServerAuditDialog-mainbox label {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: #000;
+ border-radius: 30px;
+ width: fit-content;
+ height: 16px;
+ margin-top: 8px;
+ padding-right: 10px;
+}
+
+#ServerAuditDialog #ServerAuditDialog-mainbox label#auditsuccess {
+ border: 1px solid #2bc545;
+ background-color: #a1ddaa;
+}
+
+#ServerAuditDialog #ServerAuditDialog-mainbox label#auditerror {
+ border: 1px solid #d42314;
+ background-color: #ff9198;
+}
+
+#ServerAuditDialog #ServerAuditDialog-mainbox label#auditsuccess::before {
+ background: url('images/circle-check.svg') no-repeat center/20px;
+ content: '';
+ width: 16px;
+ height: 16px;
+}
+
+#ServerAuditDialog #ServerAuditDialog-mainbox label#auditerror::before {
+ background: url('images/icon-set-symbols1-cross.svg') no-repeat center;
+ content: '';
+ width: 16px;
+ height: 16px;
+}
+
/* text-area overflow on function wizard window */
#FormulaDialog #ed_formula.ui-textarea {
diff --git a/browser/images/circle-check.svg b/browser/images/circle-check.svg
new file mode 100644
index 0000000000000..c7a64d56e8702
--- /dev/null
+++ b/browser/images/circle-check.svg
@@ -0,0 +1,4 @@
+
diff --git a/browser/src/control/Control.ServerAuditDialog.ts b/browser/src/control/Control.ServerAuditDialog.ts
index b880bfe2ca24c..13039be6691d0 100644
--- a/browser/src/control/Control.ServerAuditDialog.ts
+++ b/browser/src/control/Control.ServerAuditDialog.ts
@@ -176,8 +176,18 @@ class ServerAuditDialog {
return hasErrors;
}
+ private countErrors(): number {
+ return (
+ (app.serverAudit?.filter((entry: AuditEntry) => entry.status !== 'ok')
+ .length ?? 0) +
+ (app.clientAudit?.filter((entry: AuditEntry) => entry.status !== 'ok')
+ .length ?? 0)
+ );
+ }
+
private getJSON(entries: Array): JSDialogJSON {
const hasErrors = this.hasErrors();
+ const countErrors = this.countErrors();
return {
id: this.id,
@@ -198,13 +208,6 @@ class ServerAuditDialog {
type: 'container',
vertical: true,
children: [
- !hasErrors
- ? {
- id: 'auditsuccess',
- type: 'fixedtext',
- text: _('No issues found'),
- }
- : {},
{
id: 'auditlist',
type: 'treelistbox',
@@ -215,6 +218,19 @@ class ServerAuditDialog {
entries: entries,
enabled: entries.length > 0,
},
+ !hasErrors
+ ? {
+ id: 'auditsuccess',
+ type: 'fixedtext',
+ text: _('No issues found'),
+ }
+ : {
+ id: 'auditerror',
+ type: 'fixedtext',
+ text: countErrors === 1
+ ? _('1 issue found')
+ : _('%COUNT% issues found').replaceAll('%COUNT%', countErrors),
+ },
{
id: this.id + '-buttonbox',
type: 'buttonbox',