Switch header sizes for ZHA pairing status card (#8078)

Since the top title shows the result of the previous step ("Interview
Complete", "Configuration Complete", etc), while the second title shows
the current step ("Configuring", "Initializing", etc), having the top
title bigger would draw attention to it. So a user could see
"Configuration Complete" and assume pairing is done.

This change makes the second title bigger than the top one, so that the
user focus on the step that is in progress.
This commit is contained in:
Abílio Costa 2021-01-04 13:03:12 +00:00 committed by GitHub
parent fab68055bf
commit 6fb206853c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -49,19 +49,17 @@ class ZHADevicePairingStatusCard extends LitElement {
class="discovered ${classMap({
initialized: this.device.pairing_status === INITIALIZED,
})}"
><div
class="header"
>
<h1>
><div class="header">
<h4>
${this.hass!.localize(
`ui.panel.config.zha.device_pairing_card.${this.device.pairing_status}`
)}
</h1>
<h4>
</h4>
<h1>
${this.hass!.localize(
`ui.panel.config.zha.device_pairing_card.${this.device.pairing_status}_status_text`
)}
</h4>
</h1>
</div>
<div class="card-content">
${[INTERVIEW_COMPLETE, CONFIGURED].includes(