apply updated settings styling, rearrange order on settings page

src/client/css/partials/settings.css

@@ -10,9 +10,14 @@
   color: black;
 }
 
+.settings-section-info {
+  margin-top: 0;
+}
 .settings-section-title {
-  font: var(--h4-font);
-  margin: var(--padding-sm) 0 var(--padding-md) 0;
+  font-family: var(--body-font);
+    margin: var(--padding-sm) 0;
+    font-weight: 700;
+    font-size: 1rem;
 }
 
 .settings-content {
@@ -74,10 +79,7 @@
 }
 
 .settings-email-item {
-  border: 1px solid var(--gray-10);
-  border-radius: var(--border-radius);
   gap: var(--padding-sm);
-  padding: calc(var(--padding-lg) * 0.75);
   padding-right: var(--padding-lg);
 }
 

src/client/css/variables.css

@@ -20,6 +20,7 @@
   --h2-font: 700 1.75rem/1 metropolis, sans-serif;
   --h3-font: 700 1.25rem/1 metropolis, sans-serif;
   --h4-font: 700 1.125rem/1 metropolis, sans-serif;
+  --body-font: inter, inter-fallback, sans-serif;
   --gray-5: #f9f9fa;
   --gray-10: #e7e7e7;
   --gray-20: #cececf;

src/views/partials/settings.js

@@ -111,7 +111,7 @@ const cancelPremiumSubscription = () => `
       <h3 class='settings-section-title'>
         ${getMessage('settings-cancel-premium-subscription-title')}
       </h3>
-      <p>${getMessage('settings-cancel-premium-subscription-info')}</p>
+      <p class='settings-section-info'>${getMessage('settings-cancel-premium-subscription-info')}</p>
       <a
         class='settings-link-fxa'
         href='${AppConstants.FXA_SETTINGS_URL}'
@@ -139,24 +139,14 @@ export const settings = data => {
   return `
     <div class='settings js-settings' data-csrf-token='${csrfToken}'>
       <h2 class='settings-title'>${getMessage('settings-page-title')}</h2>
-
+      
       <div class='settings-content'>
-        <!-- Breach alert preferences -->
-        <section>
-          <h3 class='settings-section-title'>
-            ${getMessage('settings-alert-preferences-title')}
-          </h3>
-          ${alertOptions({ csrfToken, allEmailsToPrimary })}
-        </section>
-
-        <hr>
-
         <!-- Monitored email addresses -->
         <section>
           <h3 class='settings-section-title'>
             ${getMessage('settings-email-list-title')}
           </h3>
-          <p>${getMessage('settings-email-limit-info', { limit })}</p>
+          <p class='settings-section-info'>${getMessage('settings-email-limit-info', { limit })}</p>
 
           ${createEmailList(emails, breachCounts)}
           <button
@@ -166,6 +156,16 @@ export const settings = data => {
           >${getMessage('settings-add-email-button')}</a>
         </section>
 
+        <hr>
+
+        <!-- Breach alert preferences -->
+        <section>
+          <h3 class='settings-section-title'>
+            ${getMessage('settings-alert-preferences-title')}
+          </h3>
+          ${alertOptions({ csrfToken, allEmailsToPrimary })}
+        </section>
+
         <hr>
         ${AppConstants.CANCEL_SUBSCRIPTION_FLOW ? cancelPremiumSubscription() : '<hr>'}
 
@@ -174,7 +174,7 @@ export const settings = data => {
           <h3 class='settings-section-title'>
             ${getMessage('settings-deactivate-account-title')}
           </h3>
-          <p>${getMessage('settings-deactivate-account-info')}</p>
+          <p class='settings-section-info'>${getMessage('settings-deactivate-account-info')}</p>
           <a
             class='settings-link-fxa'
             href='${AppConstants.FXA_SETTINGS_URL}'