From 344442f42157939bef5dd4fc69bfcbdb6fe36ff2 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 31 Aug 2023 12:41:04 -0400
Subject: [PATCH] improvement(notification-prefs-pane): Improve checkbox layout

---
 .../user/notification-prefs-pane.tsx          | 98 ++++++++++---------
 lib/components/user/phone-number-editor.tsx   |  2 +-
 2 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/lib/components/user/notification-prefs-pane.tsx b/lib/components/user/notification-prefs-pane.tsx
index ffe092eb3..127fcb10c 100644
--- a/lib/components/user/notification-prefs-pane.tsx
+++ b/lib/components/user/notification-prefs-pane.tsx
@@ -1,6 +1,7 @@
 import { connect } from 'react-redux'
 import { Field, FormikProps } from 'formik'
 import { FormattedMessage } from 'react-intl'
+import { ListGroup, ListGroupItem } from 'react-bootstrap'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -27,10 +28,9 @@ const allNotificationChannels = ['email', 'sms', 'push']
 const emailAndSms = ['email', 'sms']
 
 // Styles
-const NotificationOption = styled.div`
+const NotificationOption = styled(ListGroupItem)`
   align-items: flex-start;
   display: flex;
-  margin-bottom: 10px;
 
   /* Match bootstrap's spacing between checkbox and label */
   & > span:first-child {
@@ -68,53 +68,55 @@ const NotificationPrefsPane = ({
       <legend>
         <FormattedMessage id="components.NotificationPrefsPane.notificationChannelPrompt" />
       </legend>
-      {allowedNotificationChannels.map((type) => {
-        // TODO: If removing the Save/Cancel buttons on the account screen,
-        // persist changes immediately when onChange is triggered.
-        const inputId = `notification-channel-${type}`
-        const inputDescriptionId = `${inputId}-description`
-        return (
-          <NotificationOption key={type}>
-            <span>
-              <Field
-                aria-describedby={inputDescriptionId}
-                // TODO: Check this condition.
-                disabled={type === 'push' && !pushDevices}
-                id={inputId}
-                name="notificationChannel"
-                type="checkbox"
-                value={type}
-              />
-            </span>
-            <span>
-              <label htmlFor={inputId}>
-                <FormattedMessage id={`common.notifications.${type}`} />
-              </label>
-              {type === 'email' ? (
-                <span id={inputDescriptionId}>{email}</span>
-              ) : type === 'sms' ? (
-                <PhoneNumberEditor
-                  descriptorId={inputDescriptionId}
-                  initialPhoneNumber={phoneNumber}
-                  initialPhoneNumberVerified={isPhoneNumberVerified}
-                  onRequestCode={onRequestPhoneVerificationCode}
-                  onSubmitCode={onSendPhoneVerificationCode}
-                  phoneFormatOptions={phoneFormatOptions}
+      <ListGroup>
+        {allowedNotificationChannels.map((type) => {
+          // TODO: If removing the Save/Cancel buttons on the account screen,
+          // persist changes immediately when onChange is triggered.
+          const inputId = `notification-channel-${type}`
+          const inputDescriptionId = `${inputId}-description`
+          return (
+            <NotificationOption key={type}>
+              <span>
+                <Field
+                  aria-describedby={inputDescriptionId}
+                  // TODO: Check this condition.
+                  disabled={type === 'push' && !pushDevices}
+                  id={inputId}
+                  name="notificationChannel"
+                  type="checkbox"
+                  value={type}
                 />
-              ) : (
-                <span id={inputDescriptionId}>
-                  {pushDevices ? (
-                    // TODO: i18n
-                    `${pushDevices} devices registered`
-                  ) : (
-                    <FormattedMessage id="components.NotificationPrefsPane.noDeviceForPush" />
-                  )}
-                </span>
-              )}
-            </span>
-          </NotificationOption>
-        )
-      })}
+              </span>
+              <span>
+                <label htmlFor={inputId}>
+                  <FormattedMessage id={`common.notifications.${type}`} />
+                </label>
+                {type === 'email' ? (
+                  <span id={inputDescriptionId}>{email}</span>
+                ) : type === 'sms' ? (
+                  <PhoneNumberEditor
+                    descriptorId={inputDescriptionId}
+                    initialPhoneNumber={phoneNumber}
+                    initialPhoneNumberVerified={isPhoneNumberVerified}
+                    onRequestCode={onRequestPhoneVerificationCode}
+                    onSubmitCode={onSendPhoneVerificationCode}
+                    phoneFormatOptions={phoneFormatOptions}
+                  />
+                ) : (
+                  <span id={inputDescriptionId}>
+                    {pushDevices ? (
+                      // TODO: i18n
+                      `${pushDevices} devices registered`
+                    ) : (
+                      <FormattedMessage id="components.NotificationPrefsPane.noDeviceForPush" />
+                    )}
+                  </span>
+                )}
+              </span>
+            </NotificationOption>
+          )
+        })}
+      </ListGroup>
     </FieldSet>
   )
 }
diff --git a/lib/components/user/phone-number-editor.tsx b/lib/components/user/phone-number-editor.tsx
index b53d142de..b3dc52efc 100644
--- a/lib/components/user/phone-number-editor.tsx
+++ b/lib/components/user/phone-number-editor.tsx
@@ -265,7 +265,7 @@ class PhoneNumberEditor extends Component<Props, State> {
             </ControlStrip>
           </FormGroup>
         )}
-        <InvisibleA11yLabel aria-busy={isAlertBusy} role="alert">
+        <InvisibleA11yLabel aria-busy={isAlertBusy} as="div" role="alert">
           {ariaAlertContent}
         </InvisibleA11yLabel>