Update fxa banner, simplify text

Close #667

src/media/css/lib.styl

@@ -58,14 +58,23 @@ $earl-gray = #a7a7a7;
 $primer-gray = #b7b7b7;
 $cement-gray = #c7c7c7;
 $cloud-gray = #d7d7d7;
+$dark-gray = #797979;
+$darker-gray = #535353;
 $seavan-salt-white = #e7e7e7;
 $salt-flat-white = #f1f1f1;
 $steam-white = #fffefe;
+$dark-green = #118E36;
+
+// Action primary colours from http://pwalm.github.io/marketplace-style-guides/palette.html#actionPrimary.
+$primary-blue = #4cb1ff;
+$primary-green = #64be3c;
+$primary-yellow = #ffdc32;
+$primary-red = #f54b3c;
 
 // Feed.
 $breezy-blue = #4cb1ff;
 $navbar-gray = #e0e0e0;
-$hungry-text = #797979;
+$hungry-text = $dark-gray;
 $navbar-text = #1a1a1a;
 
 // User Collections Primary, from style guide:

src/media/css/site-banner.styl

@@ -1,52 +1,96 @@
 @import 'lib';
 
 .mkt-banner {
-    background: $grey-gardens-gray;
-    color: $cement-gray;
+    background: $dark-gray;
+    color: $white;
     display: block;
     overflow: hidden;
     position: relative;
     line-height: 1.3;
+}
+
+.mkt-banner-content {
+    margin: 2px auto;
+    max-width: $max-site-width;
+    position: relative;
+    text-align: center;
+
+    .close {
+        margin-top: -17px;
+        top: 50%;
+    }
+
+    span {
+        display: inline-block;
+        margin-top: 10px;
+        padding: 0;
+    }
+
 
+    a {
+        border-radius: 5px;
+        color: #fff;
+        display: inline-block;
+        margin: 10px;
+        padding: 10px;
+        text-decoration: none;
+    }
+}
+
+.mkt-banner-firefox {
     .mkt-banner-content {
-        align-items: center;
         background: url("../img/logos/firefox-64.png") no-repeat;
         background-position: 0 50%;
         background-size: 64px 60px;
-        display-flex();
-        flex-line();
-        margin: 0 auto;
-        max-width: $max-site-width;
         min-height: 60px;
-        padding: 10px 40px 10px 70px;
-        position: relative;
-        text-align: left;
+        padding: 0 40px 0 70px;
     }
 
-    .close {
-        margin-top: -17px;
-        top: 50%;
+    a {
+        background-color: $darker-gray;
+
+        &:hover {
+            background-color: darken($darker-gray, 10%);
+        }
+    }
+
+    .close,
+    .close:hover {
+        background-color: transparent;
     }
 }
 
-.mkt-banner.mkt-banner-success {
-    background: #64be3c;
-    color: #fff;
+.mkt-banner-success {
+    background: $primary-green;
 
     .mkt-banner-content {
         font-size: 15px;
-        font-weight: 300;
+        font-weight: 500;
+        padding: 0 10px;
     }
 
     small {
-        display: block;
-        font-size: 12px;
-        padding-top: 5px;
+        font-size: 15px;
+        font-weight: 400;
     }
 
     a {
-        color: #fff;
-        font-weight: 500;
-        text-decoration: underline;
+        background-color: $dark-green;
+
+        &:hover {
+            background-color: darken($dark-green, 10%);
+        }
+    }
+}
+
+@media (min-width: 1025px) {
+    .mkt-banner-content {
+        padding: 0;
+    }
+}
+
+@media $narrower-than-desktop {
+    .mkt-banner small {
+        display: none;
     }
 }

src/media/js/components.js

@@ -56,6 +56,11 @@ define('components', ['document-register-element'], function () {
                     MktHTMLElement.prototype.createdCallback.call(this);
                     this.classList.add('mkt-banner');
 
+                    // This is a Firefox banner if it isn't a success banner.
+                    if (!this.success) {
+                        this.classList.add('mkt-banner-firefox');
+                    }
+
                     if (this.rememberDismissal && this.dismissed) {
                         this.dismissBanner();
                     }
@@ -70,12 +75,7 @@ define('components', ['document-register-element'], function () {
 
                     var content = document.createElement('div');
                     content.classList.add('mkt-banner-content');
-
-                    // Wrap the provided content in a span so it gets flexed as
-                    // one element.
-                    var contentSpan = document.createElement('span');
-                    contentSpan.innerHTML = html;
-                    content.appendChild(contentSpan);
+                    content.innerHTML = html;
 
                     if (!this.undismissable) {
                         var closeButton = document.createElement('a');

src/templates/fx-accounts-banner.html

@@ -1,15 +1,11 @@
 <mkt-banner id="fx-accounts-banner" success dismiss="off">
-  {{ _('Firefox Accounts has arrived!') }}
+  <span>
+    {{ _('Firefox Accounts has arrived') }}
+  </span>
   <mkt-login link>
-    {% if logged_in %}
-      {{ _("Transfer your account now. It's easy.") }}
-    {% else %}
-      {{ _("Simply sign in to transfer your account.") }}
-    {% endif %}
+    {{ _("Learn how to transfer your account") }}
   </mkt-login>
   <small>
-    <a href="https://developer.mozilla.org/Firefox_Accounts">
-      {{ _('Learn more about Firefox Accounts.</a>') }}
-    </a>
+    {{ _("It's easy.") }}
   </small>
 </mkt-banner>

src/templates/incompatible.html

@@ -1,4 +1,4 @@
 <mkt-banner id="incompatibility-banner" dismiss="remember">
   <span>{{ _('You must use Firefox to install Firefox apps.') }}</span>
-  <a href="http://www.mozilla.org/firefox/" target="_blank" class="firefox-download">{{ _('Download.') }}</a>
+  <a href="http://www.mozilla.org/firefox/" target="_blank" class="firefox-download">{{ _('Download') }}</a>
 </mkt-banner>