Fix buttons sizes, text and css issues

hypha/apply/users/templates/two_factor/core/backup_tokens.html

@@ -17,10 +17,10 @@
     </ul>
     <p>{% blocktrans %}You should now download, or print these codes,
         and keep them somewhere safe.{% endblocktrans %}</p>
-    <p><a class="btn btn-link" href="data:text/plain;charset=UTF-8,{% tokens_text device.token_set.all %}" download="backup_codes.txt">
-        {% trans "Save Codes" %}</a></p>
     <form method="post">{% csrf_token %}{{ form }}
         <button class="btn btn-primary" type="submit">{% trans "Regenerate Codes" %}</button>
+        <a class="btn btn-link link--left-space" href="data:text/plain;charset=UTF-8,{% tokens_text device.token_set.all %}" download="backup_codes.txt">
+        {% trans "Save Codes" %}</a>
     </form>
   {% else %}
     <p>{% trans "You don't have any backup codes yet." %}</p>

hypha/apply/users/templates/two_factor/core/setup.html

@@ -49,6 +49,8 @@
   <form action="" method="post">{% csrf_token %}
     {% include "two_factor/_wizard_forms.html" %}
 
+    <!-- Add empty p tag to add some space in between wizard form fields and wizard actions buttons. -->
+    <p></p>
     {# hidden submit button to enable [enter] key #}
     <input type="submit" value="" class="d-none" />
 

hypha/apply/users/templates/two_factor/core/setup_complete.html

@@ -2,9 +2,7 @@
 {% load i18n %}
 
 {% block content %}
-    <p><a href="{% url 'users:account' %}"
-        class="btn btn-link">{% trans "Back to Account" %}</a></p>
-  <h1>{% block title %}{% trans "Enable Two-Factor Authentication" %}{% endblock %}</h1>
+  <h1>{% block title %}{% trans "Two-Factor Authentication(2FA)" %}{% endblock %}</h1>
 
   <p>{% blocktrans trimmed %}Congratulations, you've successfully enabled two-factor
       authentication.{% endblocktrans %}</p>
@@ -12,7 +10,8 @@
         To get the backup codes you can continue to Show Codes.{% endblocktrans %}</p>
 
   {% if not phone_methods %}
-    <p><a href="{% url 'users:backup_tokens_password' %}" class="btn btn-link">Show Codes</a></p>
+        <a href="{% url 'users:backup_tokens_password' %}" class="btn btn-link">Show Codes</a>
+        <a href="{% url 'users:account' %}" class="link link--bold link--left-space">{% trans "Back to Account" %}</a>
   {% else %}
     <p>{% blocktrans trimmed %}However, it might happen that you don't have access to
       your primary token device. To enable account recovery, add a phone

hypha/apply/users/templates/two_factor/core/two_factor_required.html

@@ -7,16 +7,16 @@
   <h1>{% block title %}{% trans "Permission Denied" %}{% endblock %}</h1>
 
   <p>{% blocktrans trimmed %}The page you requested, enforces users to verify using
-    two-factor authentication for security reasons. You need to enable these
-    security features in order to access this page. Without enabling these security features,
+    two-factor authentication for security reasons. You need to set up these
+    security features in order to access this page. Without setting up these security features,
       You can only access the account(Profile section) or can logout from the system.{% endblocktrans %}</p>
 
-  <p>{% blocktrans trimmed %}Two-factor authentication is not enabled for your
-    account. Enable two-factor authentication for enhanced account
+  <p>{% blocktrans trimmed %}Two-factor authentication is not already set up for your
+    account. Set up two-factor authentication for enhanced account
     security.{% endblocktrans %}</p>
 
   <p>
     <a href="{% url 'two_factor:setup' %}" class="btn btn-primary">
-    {% trans "Enable Two-Factor Authentication" %}</a>
+    {% trans "Set up Two-Factor Authentication (2FA)" %}</a>
   </p>
 {% endblock %}

hypha/apply/users/templates/users/account.html

@@ -24,11 +24,12 @@
             {% endfor %}
             <button class="button button--primary" type="submit">{% trans "Update Profile" %}</button>
         </form>
+    </div>
 
-        {% if show_change_password and user.has_usable_password and not backends.associated %}
-            <br>
-            <hr>
-        <div>
+    {% if show_change_password and user.has_usable_password and not backends.associated %}
+        <br>
+        <hr>
+        <div class="profile__column">
             <h3>{% trans "Account Security" %}</h3>
             <h4>{% trans "Password" %}</h4>
             <p><a class="button button--primary" href="{% url 'users:password_change' %}">{% trans "Update password" %}</a></p>
@@ -36,15 +37,14 @@
             <h4>{% trans "Two-Factor Authentication (2FA)" %}</h4>
             {% if default_device %}
                 <div>
-                    <p><a class="link link--button link--button--narrow" href="{% url 'users:backup_tokens_password' %}">{% trans "Show backup codes" %}</a></p>
-                    <p><a class="link link--button link--button--narrow" href="{% url 'two_factor:disable' %}">{% trans "Disable 2FA" %}</a></p>
+                    <p><a class="button button--primary" href="{% url 'users:backup_tokens_password' %}">{% trans "Show backup codes" %}</a></p>
+                    <p><a class="button button--primary" href="{% url 'two_factor:disable' %}">{% trans "Disable 2FA" %}</a></p>
                 </div>
             {% else %}
-                <p><a class="link link--button link--button--narrow" href="{% url 'two_factor:setup' %}">{% trans "Enable 2FA" %}</a></p>
+                <p><a class="button button--primary" href="{% url 'two_factor:setup' %}">{% trans "Enable 2FA" %}</a></p>
             {% endif %}
         </div>
-        {% endif %}
-    </div>
+    {% endif %}
 
 
     <div class="profile__column">

hypha/static_src/src/sass/apply/components/_button.scss

@@ -5,6 +5,7 @@
     background-image: none;
     border: 0;
     box-shadow: none;
+    line-height: 1.15;
 
     &:hover {
         cursor: pointer;

hypha/static_src/src/sass/apply/components/_two-factor.scss

@@ -26,6 +26,9 @@ label[for='id_generator-token'] {
 // stylelint-disable property-no-vendor-prefix, selector-id-pattern, selector-max-id
 #id_generator-token {
     -moz-appearance: textfield;
+    border: 2px solid #2166b6;
+    line-height: 1.35;
+    width: 20%;
 
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {