From 0b6701d3f801162c8ca0b1740ca250404191318b Mon Sep 17 00:00:00 2001
From: Jonathan Prusik <jprusik@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:24:19 -0400
Subject: [PATCH] fix notification settings spacing and labels (#10433)

---
 .../settings/notifications.component.html     | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/apps/browser/src/autofill/popup/settings/notifications.component.html b/apps/browser/src/autofill/popup/settings/notifications.component.html
index 9032e742da..26036acdd0 100644
--- a/apps/browser/src/autofill/popup/settings/notifications.component.html
+++ b/apps/browser/src/autofill/popup/settings/notifications.component.html
@@ -11,39 +11,40 @@
         <h2 bitTypography="h6">{{ "vaultSaveOptionsTitle" | i18n }}</h2>
       </bit-section-header>
       <bit-card>
-        <div>
+        <bit-form-control>
           <input
-            type="checkbox"
             bitCheckbox
             id="use-passkeys"
             type="checkbox"
             (change)="updateEnablePasskeys()"
             [(ngModel)]="enablePasskeys"
           />
-          <label for="use-passkeys">{{ "enableUsePasskeys" | i18n }}</label>
-        </div>
-        <div>
+          <bit-label for="use-passkeys">{{ "enableUsePasskeys" | i18n }}</bit-label>
+        </bit-form-control>
+        <bit-form-control>
           <input
+            bitCheckbox
             id="addlogin-notification-bar"
             type="checkbox"
-            bitCheckbox
             (change)="updateAddLoginNotification()"
             [(ngModel)]="enableAddLoginNotification"
           />
-          <label for="addlogin-notification-bar">{{ "enableAddLoginNotification" | i18n }}</label>
-        </div>
-        <div>
+          <bit-label for="addlogin-notification-bar">{{
+            "enableAddLoginNotification" | i18n
+          }}</bit-label>
+        </bit-form-control>
+        <bit-form-control disableMargin>
           <input
+            bitCheckbox
             id="changedpass-notification-bar"
             type="checkbox"
-            bitCheckbox
             (change)="updateChangedPasswordNotification()"
             [(ngModel)]="enableChangedPasswordNotification"
           />
-          <label for="changedpass-notification-bar">{{
+          <bit-label for="changedpass-notification-bar">{{
             "enableChangedPasswordNotification" | i18n
-          }}</label>
-        </div>
+          }}</bit-label>
+        </bit-form-control>
       </bit-card>
     </bit-section>
     <bit-section>