style: update the notification preferences page style according to figma

src/notification-preferences/NotificationPreferenceApp.jsx

@@ -40,11 +40,11 @@ const NotificationPreferenceApp = ({ appId }) => {
   return (
     <Collapsible.Advanced open={appToggle} data-testid="notification-app">
       <Collapsible.Trigger>
-        <div className="d-flex">
-          <span className="ml-0 mr-auto">
+        <div className="d-flex align-items-center">
+          <span className="mr-auto">
             {intl.formatMessage(messages.notificationAppTitle, { key: appId })}
           </span>
-          <span id={`${appId}-app-toggle`} className="ml-auto mr-0">
+          <span className="d-flex" id={`${appId}-app-toggle`}>
             <ToggleSwitch
               name={appId}
               value={appToggle}
@@ -52,7 +52,7 @@ const NotificationPreferenceApp = ({ appId }) => {
             />
           </span>
         </div>
-        <hr />
+        <hr className="border-light-400 my-3" />
       </Collapsible.Trigger>
       <Collapsible.Body>
         <div className="d-flex flex-row header-label">
@@ -61,7 +61,7 @@ const NotificationPreferenceApp = ({ appId }) => {
             <span className="ml-auto">{intl.formatMessage(messages.webLabel)}</span>
           </span>
         </div>
-        <div className="mt-3 pb-5">
+        <div className="my-3">
           { preferences }
         </div>
       </Collapsible.Body>