diff --git a/src/server/report/icons.js b/src/server/report/icons.js index 47b9b53d..2505cedb 100644 --- a/src/server/report/icons.js +++ b/src/server/report/icons.js @@ -19,6 +19,19 @@ export const ICON_SPLIT = svg` `; +export const ICON_TADA = svg` + + + + + + + + + + +`; + export const ICON_BROWSERS = { Chromium: svg``, Firefox: svg` diff --git a/src/server/report/test.js b/src/server/report/test.js index a479ef94..9b6b2a89 100644 --- a/src/server/report/test.js +++ b/src/server/report/test.js @@ -1,7 +1,7 @@ import './button.js'; import { css, html, LitElement, nothing } from 'lit'; import { FULL_MODE, getId, LAYOUTS } from './common.js'; -import { ICON_BROWSERS, ICON_HOME } from './icons.js'; +import { ICON_BROWSERS, ICON_HOME, ICON_TADA } from './icons.js'; import { classMap } from 'lit/directives/class-map.js'; import data from './data.js'; @@ -228,12 +228,10 @@ class Test extends LitElement { .result-part-info { align-items: center; display: flex; - gap: 5px; } .result-part-info-spacer, .result-part-info-size { flex: 1 0 0%; - text-align: right; } .result-part-info-name { flex: 0 0 auto; @@ -243,11 +241,20 @@ class Test extends LitElement { .result-part-info-size { color: #90989d; font-size: 0.8rem; - padding: 5px; } .result-no-changes { - border: 1px solid #cdd5dc; + align-items: center; + display: flex; + flex-direction: column; + gap: 20px; padding: 20px; + min-width: 210px; + } + .result-no-changes > p { + color: #6e7477; + font-size: 1.1rem; + font-weight: bold; + margin: 0; } `]; constructor() { @@ -429,8 +436,11 @@ class Test extends LitElement { const renderPart = (label, partInfo, noChanges, overlay) => { const img = noChanges ? html` -
No changes
- ` : html``; +
+ ${ICON_TADA} +

Hooray! No changes here.

+
+ ` : html`
${overlay}
`; return html`
@@ -438,9 +448,7 @@ class Test extends LitElement {
${label}
(${partInfo.width} x ${partInfo.height})
-
- ${img}${overlay} -
+ ${img}
`; }; @@ -451,9 +459,9 @@ class Test extends LitElement { if (this.layout === LAYOUTS.SPLIT.value) { return html`
- ${ renderPart('golden', resultData.info.golden, resultData.passed, undefined) } + ${ renderPart('golden', resultData.info.golden, false, undefined) }
- ${ renderPart('new', resultData.info.new, false, overlay) } + ${ renderPart('new', resultData.info.new, resultData.passed, overlay) }
`; } else if (this.layout === LAYOUTS.FULL.value) { if (this.fullMode === FULL_MODE.GOLDEN.value) {