feat(client/mfa): improve layout by separating into multiple sections

src/public/app/widgets/type_widgets/options/multi_factor_authentication.js

@@ -5,7 +5,6 @@ import OptionsWidget from "./options_widget.js";
 const TPL = `
 <div class="options-section">
     <h2 class=""><b>What is Multi-Factor Authentication?</b></h2>
-    <div class="">
     <i>
         Multi-Factor Authentication (MFA) adds an extra layer of security to your account. Instead
             of just entering a password to log in, MFA requires you to provide one or more additional
@@ -14,8 +13,8 @@ const TPL = `
             It's like adding an extra lock to your door, making it much harder for anyone else to
             break in.</i>
 </div>
-    <br>
-    <div>
+
+<div class="options-section">
     <h3><b>OAuth/OpenID</b></h3>
     <span><i>OpenID is a standardized way to let you log into websites using an account from another service, like Google, to verify your identity.</i></span>
     <div>
@@ -31,7 +30,8 @@ const TPL = `
         <span><b> User Email: </b></span><span class="user-account-email"> Not logged in!</span>
     </div>
 </div>
-    <br>
+
+<div class="options-section">
     <h3><b>Time-based One-Time Password</b></h3>
     <div>
         <label>
@@ -45,16 +45,17 @@ const TPL = `
         code which changes every 30 seconds. You use this code, along with your password to log into your
         account, making it much harder for anyone else to access it.</i></span>
     </div>
-    <br>
+</div>
+
+<div class="options-section">
     <h4> Generate TOTP Secret </h4>
-    <div>
     <span class="totp-secret" > TOTP Secret Key </span>
     <br>
     <button class="regenerate-totp"> Generate TOTP Secret </button>
 </div>
-    <br>
+
+<div class="options-section">
     <h4> Single Sign-on Recovery Keys </h4>
-    <div>
     <span ><i>Single sign-on recovery keys are used to login in the event you cannot access your Authenticator codes. Keep them somewhere safe and secure. </i></span>
     <br><br>
     <span class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">After a recovery key is used it cannot be used again.</span>
@@ -86,7 +87,6 @@ const TPL = `
     <br>
     <button class="generate-recovery-code" disabled="true"> Generate Recovery Keys </button>
 </div>
-</div>
 `;
 
 export default class MultiFactorAuthenticationOptions extends OptionsWidget {