fix(setting): Made Add… buttons blue. (#4823) r=@shane-tomlinson

fixes #4818

This is excellent work @vershwal, thanks for working through it with me! r+

app/scripts/templates/settings/avatar.mustache

@@ -3,10 +3,15 @@
     <header class="settings-unit-summary">
       <h2 class="settings-unit-title">{{#t}}Account picture{{/t}}</h2>
     </header>
-    <button class="settings-button secondary settings-unit-toggle"
+    {{#avatar}}
-      data-href="settings/avatar/change">
+      <button class="settings-button secondary settings-unit-toggle" data-href="settings/avatar/change">
-      {{#avatar}}<span class="change-button">{{#t}}Change…{{/t}}</span>{{/avatar}}
+      <span class="change-button">{{#t}}Change…{{/t}}</span>
-      {{^avatar}}<span class="add-button">{{#t}}Add…{{/t}}</span>{{/avatar}}
+      </button>
-    </button>
+    {{/avatar}}
+    {{^avatar}}
+      <button class="settings-button primary settings-unit-toggle" data-href="settings/avatar/change">
+      <span class="add-button">{{#t}}Add…{{/t}}</span>
+      </button>
+    {{/avatar}}
   </div>
 </div>

app/scripts/templates/settings/display_name.mustache

@@ -3,11 +3,16 @@
     <header class="settings-unit-summary">
       <h2 class="settings-unit-title">{{#t}}Display name{{/t}}</h2>
     </header>
-    <button class="settings-button secondary settings-unit-toggle hidden"
+    {{#displayName}}
-      data-href="settings/display_name">
+      <button class="settings-button secondary settings-unit-toggle" data-href="settings/display_name">
-      {{#displayName}}<span class="change-button">{{#t}}Change…{{/t}}</span>{{/displayName}}
+      <span class="change-button">{{#t}}Change…{{/t}}</span>
-      {{^displayName}}<span class="add-button">{{#t}}Add…{{/t}}</span>{{/displayName}}
+      </button>
-    </button>
+    {{/displayName}}
+    {{^displayName}}
+      <button class="settings-button primary settings-unit-toggle" data-href="settings/display_name">
+      <span class="add-button">{{#t}}Add…{{/t}}</span>
+      </button>
+    {{/displayName}}
   </div>
 
   <div class="settings-unit-details">

app/styles/modules/_settings.scss

@@ -211,6 +211,7 @@ body.settings #main-content.card {
 
   &.primary {
     background: $button-background-color;
+    border: solid 1px $button-border-default-color;
     color: $message-text-color;
 
     &:disabled,

app/tests/spec/views/settings/avatar.js

@@ -71,6 +71,7 @@ define(function (require, exports, module) {
         return view.render()
           .then(function () {
             assert.equal(view.$('.add-button').length, 1);
+            assert.equal(view.$('.settings-unit-toggle.primary').length, 1);
           });
       });
 
@@ -80,6 +81,7 @@ define(function (require, exports, module) {
         return view.render()
           .then(function () {
             assert.equal(view.$('.change-button').length, 1);
+            assert.equal(view.$('.settings-unit-toggle.secondary').length, 1);
           });
       });
 

app/tests/spec/views/settings/display_name.js

@@ -123,6 +123,7 @@ define(function (require, exports, module) {
         return initView()
           .then(function () {
             assert.equal(view.$('.add-button').length, 1);
+            assert.equal(view.$('.settings-unit-toggle.primary').length, 1);
           });
       });
 
@@ -131,6 +132,7 @@ define(function (require, exports, module) {
         return initView()
           .then(function () {
             assert.equal(view.$('.change-button').length, 1);
+            assert.equal(view.$('.settings-unit-toggle.secondary').length, 1);
           });
       });
     });

tests/functional/avatar.js

@@ -12,9 +12,10 @@ define([
 ], function (intern, registerSuite, assert, path, TestHelpers, FunctionalHelpers) {
   var config = intern.config;
 
+  var ADD_AVATAR_BUTTON_SELECTOR  = '#change-avatar .settings-unit-toggle.primary';
   var AVATAR_CHANGE_URL = config.fxaContentRoot + 'settings/avatar/change';
   var AVATAR_CHANGE_URL_AUTOMATED = config.fxaContentRoot + 'settings/avatar/change?automatedBrowser=true';
-  var CHANGE_AVATAR_BUTTON_SELECTOR = '#change-avatar .settings-unit-toggle';
+  var CHANGE_AVATAR_BUTTON_SELECTOR = '#change-avatar .settings-unit-toggle.secondary';
   var PASSWORD = 'password';
   var SETTINGS_URL = config.fxaContentRoot + 'settings';
   var SIGNIN_URL = config.fxaContentRoot + 'signin';
@@ -64,8 +65,8 @@ define([
       return this.remote
         .then(openPage(SETTINGS_URL, '#fxa-settings-header'))
 
-        // go to change avatar
+        // go to add avatar
-        .then(click(CHANGE_AVATAR_BUTTON_SELECTOR))
+        .then(click(ADD_AVATAR_BUTTON_SELECTOR))
 
         // success is going to the change avatar page
         .then(testElementExists('#avatar-options'));
@@ -86,8 +87,8 @@ define([
       return this.remote
         .then(openPage(SETTINGS_URL, '#fxa-settings-header'))
 
-        // go to change avatar
+        // go to add avatar
-        .then(click(CHANGE_AVATAR_BUTTON_SELECTOR))
+        .then(click(ADD_AVATAR_BUTTON_SELECTOR))
 
         // success is going to the change avatar page
         .then(testElementExists('#avatar-options'));