From b700e08d52163efb01c9bc6ae23ea802507b8b7c Mon Sep 17 00:00:00 2001
From: Cody C <50791984+codyc1515@users.noreply.github.com>
Date: Wed, 31 Jan 2024 22:51:07 +1300
Subject: [PATCH] Simplify MFA onboarding styling & flow (#19584)

Align MFA onboarding flow

* Aligns QR Code to centre to make scanning on mobile easier
* Removes background from manual key text
* Re-adds spacing to bottom of form so it is not hard up against the code entry form
---
 src/panels/profile/dialog-ha-mfa-module-setup-flow.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
index 5ee69e91b0..0ca1b026e6 100644
--- a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
+++ b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
@@ -166,6 +166,15 @@ class HaMfaModuleSetupFlow extends LitElement {
         ha-markdown a {
           color: var(--primary-color);
         }
+        ha-markdown-element p {
+          text-align: center;
+        }
+        ha-markdown-element code {
+          background-color: transparent;
+        }
+        ha-markdown-element > *:last-child {
+          margin-bottom: revert;
+        }
         .init-spinner {
           padding: 10px 100px 34px;
           text-align: center;