Update mfa/templates/TOTP/Add.html

mfa/templates/TOTP/Add.html

@@ -86,11 +86,21 @@
 {% block content %}
 <br/>
 <br/>
-<div class="container d-flex justify-content-center">
-    <div class="col-md-8 col-md-offset-3" id="two-factor-steps">
-        <div class="row" align="center">
-            <h4>Adding a new {{ method.name }}</h4>
+<div class="container-fluid px-2 px-md-4">
+  <div class="page-header min-height-300 border-radius-xl mt-4" style="background-repeat: no-repeat; background-position: cover; background-size:contain; background-image: url('{% static 'img/add_user.svg'%}');">
+    <span class="mask  bg-gradient-primary  opacity-6"></span>
   </div>
+  <div class="card card-body mx-3 mx-md-4 mt-n6" id="two-factor-steps">
+    <div class="row gx-4 mb-2">
+    </div>
+    <div class="row">
+      <div class="row">
+          <div class="col-12 col-xl-12">
+            <div class="card  h-100">
+                <div class="card-header pb-0 p-3">
+                  <h6 class="mb-0">Adding a new {{ method.name }}</h6>
+                </div>
+                <div class="card-body p-3">
                     <div class="row">
 
                         <p>Scan the image below with the two-factor authentication app on your <a href="javascript:void(0)" onclick="showTOTP()">phone/PC</a>. If you can’t use a barcode,
@@ -125,7 +135,11 @@
                             </div>
                         </div>
                     </div>
-
+                </div>
+            </div>
+          </div>
+      </div>   
+    </div>
   </div>
 </div>
 {% include "modal.html" %}