[2fa] login: improved UI

media/css/seahub.css

@@ -227,9 +227,6 @@ a.normal {font-weight: normal;}
 a:focus, a:hover {
     color: #eb8205;
 }
-a.black {
-    color:#322;
-}
 a.table-sort-op {
     color:inherit;
     font-weight:normal;
@@ -660,6 +657,19 @@ textarea:-moz-placeholder {/* for FF */
     background:transparent;
     border:0;
 }
+/**** btn with link styles ****/
+.sf-link-btn {
+    color:#eb8205;
+    border:none;
+    padding:0;
+    background:none;
+}
+.sf-link-btn:focus,
+.sf-link-btn:hover {
+    color:#eb8205;
+    background:none;
+    text-decoration:underline;
+}
 
 /*******ui widgets**************/
 /**** path ****/
@@ -3829,9 +3839,6 @@ img.thumbnail {
 .input.two-factor-auth-login-token-input {
     margin-bottom:15px;
 }
-.two-factor-auth-login-no-phone {
-    margin-top:3rem;
-}
 #id_generator-token,
 #id_sms-number,
 #id_validation-token {/* token input */

seahub/two_factor/templates/two_factor/core/login.html

@@ -27,12 +27,14 @@
         {% else %}
         <p class="error hide"></p>
         {% endif %}
-        <button type="submit" class="btn-white">{% trans "Verify" %}</button>
+        <button type="submit" class="submit">{% trans "Verify" %}</button>
 
         {% if backup_tokens > 0 %}
         <div class="two-factor-auth-login-no-phone">
-            <p class="txt-before-btn">{% trans "Don't have your phone?" %}</p>
-            <button name="wizard_goto_step" value="backup" type="submit" class="btn-white">{% trans "Enter a two-factor backup code" %}</button>
+            <p>
+            {% trans "Don't have your phone?" %}
+            <button name="wizard_goto_step" value="backup" type="submit" class="sf-link-btn">{% trans "Enter a two-factor backup code" %}</button>
+            </p>
         </div>
         {% endif %}
 
@@ -45,7 +47,7 @@
         <p class="error hide"></p>
         {% endif %}
         <p class="tip">{% trans "You can enter one of your backup codes in case you lost access to your mobile device." %}</p>
-        <input type="submit" value="{% trans "Verify" %}" class="submit" />
+        <button type="submit" class="submit">{% trans "Verify" %}</button>
         {% endif %}
     </form>
 </div>