From ed9cf7f33db337544f2ef9f92eafcbb9b8e03b4e Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 16 Aug 2024 12:56:46 +0530
Subject: [PATCH] add: totp app status pill, fix alignment.

---
 src/routes/console/account/updateMfa.svelte | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/account/updateMfa.svelte b/src/routes/console/account/updateMfa.svelte
index 86e8eccca..88f52fc4a 100644
--- a/src/routes/console/account/updateMfa.svelte
+++ b/src/routes/console/account/updateMfa.svelte
@@ -109,13 +109,18 @@
                     <div
                         class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
                         style="padding-block-end: 16px">
-                        <div class="u-flex u-gap-8">
+                        <div class="u-flex u-gap-8 u-cross-baseline">
                             <div class="avatar is-size-x-small">
                                 <span class="icon-device-mobile" aria-hidden="true" />
                             </div>
-                            <div class="u-flex-vertical u-gap-4 body-text-2">
-                                <span class="u-bold">Authenticator app</span>
-                                <span
+                            <div class="u-flex-vertical u-gap-4">
+                                <div class="u-flex u-gap-4 u-cross-center">
+                                    <span class="body-text-2 u-bold">Authenticator app</span>
+                                    {#if $factors.totp}
+                                        <Pill>connected</Pill>
+                                    {/if}
+                                </div>
+                                <span class="body-text-2"
                                     >Use an authentication app to generate two-factor authentication
                                     codes.</span>
                             </div>
@@ -141,7 +146,7 @@
                         <div
                             class="u-flex u-main-space-between u-sep-block-end"
                             style="padding-block-end: 16px">
-                            <div class="u-flex u-gap-8">
+                            <div class="u-flex u-gap-8 u-cross-baseline">
                                 <div class="avatar is-size-x-small">
                                     <span class="icon-mail" aria-hidden="true" />
                                 </div>
@@ -185,7 +190,7 @@
                         <div
                             class="method u-flex u-flex-vertical-mobile u-gap-16 u-main-space-between u-sep-block-end"
                             style="padding-block-end: 16px">
-                            <div class="u-flex u-gap-8">
+                            <div class="u-flex u-gap-8 u-cross-baseline">
                                 <div class="avatar is-size-x-small">
                                     <span class="icon-lock-open" aria-hidden="true" />
                                 </div>