Improve the "Send test message!" button

static/css/bootstrap-colors.css

@@ -16,6 +16,13 @@
     border-color: var(--btn-active-border);
 }
 
+.btn-default:disabled,
+.btn-default:disabled:hover,
+.btn-default:disabled:focus {
+    border-color: var(--btn-default-border);
+    background-color: var(--btn-default-bg);
+}
+
 .open > .dropdown-toggle.btn-default,
 .open > .dropdown-toggle.btn-default:active,
 .open > .dropdown-toggle.btn-default:hover,

static/css/signal_form.css

@@ -0,0 +1,11 @@
+#signal-verify-btn:disabled span {
+    opacity: 0;
+}
+
+#signal-verify-btn:disabled .spinner {
+    position: absolute;
+    top: 50%;
+    margin-top: -2px;
+    left: 50%;
+    display: block;
+}

static/js/signal_form.js

@@ -3,8 +3,11 @@ $(function() {
         $("#submit-btn").attr("disabled", true);
     });
 
-    $("#verify-btn").click(function() {
-        $("#verify-btn").attr("disabled", true);
+    // Show a tooltip on the submit button only if it is disabled
+    $("body").tooltip({selector: "#submit-btn:disabled"});
+
+    $("#signal-verify-btn").click(function() {
+        $("#signal-verify-btn").attr("disabled", true);
 
         var url = this.dataset.verifyUrl;
         var token = $('input[name=csrfmiddlewaretoken]').val();
@@ -16,9 +19,8 @@ $(function() {
             success: function(data) {
                 $("#verify-result").html(data);
                 $("#submit-btn").attr("disabled", data.indexOf("alert-success") == -1);
-                $("#verify-btn").attr("disabled", false);
+                $("#signal-verify-btn").attr("disabled", false);
             }
         });
-
     });
 })

templates/accounts/add_credential.html

@@ -38,15 +38,11 @@
     <div id="waiting" class="hide">
         <h2>Waiting for security key</h2>
         <p>
-            Follow your browser's steps to register your security key
+            Follow your browser's instructions to register your security key
             with {% site_name %}.
         </p>
 
-        <div class="spinner started">
-            <div class="d1"></div>
-            <div class="d2"></div>
-            <div class="d3"></div>
-        </div>
+        <div class="spinner started"></div>
     </div>
 
     <div id="error" class="alert alert-danger hide">

templates/base.html

@@ -57,6 +57,7 @@
     <link rel="stylesheet" href="{% static 'css/snippet-copy.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/syntax.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/set_password.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/signal_form.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/project.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/signup.css' %}" type="text/css">
     {% endcompress %}

templates/integrations/signal_form.html

@@ -59,10 +59,13 @@ Signal Settings - {% site_name %}
 
                     <span class="input-group-btn">
                         <button
-                            id="verify-btn"
+                            id="signal-verify-btn"
                             type="button"
                             class="btn btn-default"
-                            data-verify-url="{% url 'hc-signal-verify' %}">Send Test Message!</button>
+                            data-verify-url="{% url 'hc-signal-verify' %}">
+                            <span>Send Test Message!</span>
+                            <div class="spinner"></div>
+                        </button>
                     </span>
                 </div>
 
@@ -116,6 +119,7 @@ Signal Settings - {% site_name %}
                     id="submit-btn"
                     type="submit"
                     class="btn btn-primary"
+                    title="Please verify the number by sending a test message first."
                     disabled>Save Integration</button>
             </div>
         </div>