Taking an initial stab at making the verify email address screen look a bit better.

issue #349

browserid/static/js/pages/add_email_address.js

@@ -38,16 +38,19 @@
   "use strict";
 
   function emailRegistrationSuccess() {
-    $("div.status").text("Address confirmed!");
-    $("body").delay(1000).fadeOut(500, function() {
-      // if the close didn't work, then let's redirect the the main page where they'll
-      // get to see the ids that they've created.
-      document.location = '/';
+    $(".hint").hide();
+    $("#congrats").fadeIn(250, function() {
+      $("body").delay(1000).fadeOut(500, function() {
+        // if the close didn't work, then let's redirect the the main page where they'll
+        // get to see the ids that they've created.
+        document.location = '/';
+      });
     });
   }
 
-  function emailRegistrationFailure(why) {
-    $("div.status").text("Error encountered while attempting to confirm your address.  Have you previously verified this address?");
+  function showError(el) {
+    $(".hint").hide();
+    $(el).fadeIn(250);
   }
 
   BrowserID.addEmailAddress = function(token) {
@@ -55,10 +58,10 @@
       if (valid) {
         emailRegistrationSuccess();
       } else {
-        emailRegistrationFailure("unknown");
+        showError("#cannotconfirm");
       }
     }, function onFailure() {
-       failure("Error Communicating With Server!");
+      showError("#cannotcommunicate");
     });
   };
 }());

browserid/views/verifyemail.ejs

-<div id="content">
-    <div class="why">
-      <p>
-        Email Verification
-      </p>
-    </div>
-    <div class="status">
-      One moment while we attempt to confirm your email address...
-    </div>
+<div id="vAlign">   
+    <div id="signUpFormWrap">
+        <div id="signUpForm" class="cf">
+            <h1 class="serif">Email Verification</h1>
+            <ul class="notifications">
+                <li class="notification error" id="cannotconnect">Error comunicating with server.</li>
+                <li class="notification error" id="cannotconfirm">Error encountered while attempting to confirm your address. Have you previously verified this address?</li>
+            </ul>
+            <p class="hint">One moment while we attempt to confirm your email address...</p>
+        </div>
+        
+
+        <div id="congrats" class="serif">
+          Your email address has been verified!
+        </div>
+  </div>
 </div>
+