From 6fb206853c32acbf8fa6100348ff48ecac9f6930 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ab=C3=ADlio=20Costa?= <abmantis@users.noreply.github.com>
Date: Mon, 4 Jan 2021 13:03:12 +0000
Subject: [PATCH] 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.
---
 .../zha/zha-device-pairing-status-card.ts            | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts
index c6b4181e85..907bb2a024 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts
@@ -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(