Changing the style of the cancel buttons so they are not so prominent.

* Add the .submit > a style.
* Generalize the id of the cancel button to be cancel.
* Update controllers for new button ids.

close #1020

resources/static/css/common.css

@@ -205,6 +205,25 @@ button[disabled], .submit_disabled button, .submit_disabled .button,
   opacity: .5;
 }
 
+#cancel, #back {
+  background-color: transparent;
+  color: #549FDC;
+  font-size: 1em;
+  font-weight: normal;
+  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
+  padding: 0;
+}
+
+
+.submit > a {
+  float: right;
+  margin-right: 15px;
+}
+
+a.secondary[disabled], .submit_disabled a.secondary, .submit_disabled a.secondary:focus, .submit_disabled a.secondary:active {
+  color: #999;
+}
+
 hr {
   height: 1px;
   border: none;

resources/static/dialog/controllers/add_email.js

@@ -37,7 +37,7 @@ BrowserID.Modules.AddEmail = (function() {
 
       self.renderDialog("add_email", options);
 
-      self.bind("#cancelNewEmail", "click", cancelEvent(cancelAddEmail));
+      self.bind("#cancel", "click", cancelEvent(cancelAddEmail));
       Module.sc.start.call(self, options);
     },
     submit: addEmail

resources/static/dialog/controllers/forgot_password.js

@@ -31,7 +31,7 @@ BrowserID.Modules.ForgotPassword = (function() {
         requiredEmail: options.requiredEmail
       });
 
-      self.bind("#cancel_forgot_password", "click", cancelEvent(cancelResetPassword));
+      self.bind("#cancel", "click", cancelEvent(cancelResetPassword));
 
       Module.sc.start.call(self, options);
     },

resources/static/dialog/css/popup.css

@@ -383,15 +383,6 @@ a.emphasize {
   line-height: 18px;
 }
 
-#back.cancelVerify {
-  background-color: transparent;
-  color: #549FDC;
-  font-size: 1em;
-  font-weight: normal;
-  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
-  padding: 0;
-}
-
 .submit > button {
     margin: 0 5px 0 0;
 }

resources/static/dialog/views/add_email.ejs

@@ -31,7 +31,7 @@
 
       <div class="submit cf">
           <button id="addNewEmail"><%= gettext('add') %></button>
-          <button id="cancelNewEmail"><%= gettext('cancel') %></button>
+          <a href="#" id="cancel"><%= gettext('cancel') %></a>
       </div>
 
   </div>

resources/static/dialog/views/confirm_email.ejs

@@ -5,4 +5,4 @@
     <h2><%= gettext('Check your email!') %></h2>
     <p><%= format(gettext('We sent a confirmation email to <strong>%s</strong>'), [email]) %></p>
     <p><%= gettext('To finish signing in just click the verify link we sent to your email address.') %></p><br />
-    <p><%= gettext('If this is a mistake, just ignore the sent email and <a href="#" class="cancelVerify" id="back">use another email address</a>.') %></p>
+    <p><%= gettext('If this is a mistake, just ignore the sent email and <a href="#" id="back">use another email address</a>.') %></p>

resources/static/dialog/views/forgot_password.ejs

@@ -25,6 +25,6 @@
 
       <div class="submit cf">
           <button tabindex="1"><%= gettext('Reset Password') %></button>
-          <button id="cancel_forgot_password" tabindex="2"><%= gettext('Cancel') %></button>
+          <a href="#" id="cancel" tabindex="2"><%= gettext('Cancel') %></a>
       </div>
   </div>

resources/static/dialog/views/required_email.ejs

@@ -60,7 +60,7 @@
           <% } %>
 
           <% if (secondary_auth) { %>
-            <button id="cancel" tabindex="4"><%= gettext("cancel") %></button>
+            <a href="#" id="cancel" tabindex="4"><%= gettext("cancel") %></a>
           <% } %>
       </div>
   </div>

resources/static/dialog/views/verify_primary_user.ejs

@@ -41,7 +41,7 @@
 
     <div class="submit cf">
       <button id="verifyWithPrimary"><%= gettext("Verify") %></button>
-      <button id="cancel"><%= gettext("Cancel") %></button>
+      <a href="#" id="cancel"><%= gettext("Cancel") %></a>
     </div>
 
   </div>