Merge pull request #383 from hypothesis/branding-updates

Branding updates

docs/publishers/config.rst

@@ -201,7 +201,7 @@ loads.
      The :option:`branding` setting is currently still experimental and may
      change in the future.
 
-  .. option:: highlightColor
+  .. option:: accentColor
 
     ``Color``. We have several areas in our client that have pops of color
     that are secondary to the primary call to action elements. Things such as

src/sidebar/directive/h-branding.js

@@ -30,7 +30,7 @@ function BrandingDirective(settings) {
   // the type of .style property being set. The types are pretty simple for now
   // and are a one-to-one mapping between the branding type and style property.
   var _supportedPropSettings = {
-    highlightColor: 'color',
+    accentColor: 'color',
     appBackgroundColor: 'backgroundColor',
     ctaBackgroundColor: 'backgroundColor',
     ctaTextColor: 'color',
@@ -40,7 +40,7 @@ function BrandingDirective(settings) {
 
   // filter all attribute values down to the supported
   // branding properties
-  var _getValidBrandingAttribut = function(attrString){
+  var _getValidBrandingAttribute = function(attrString){
     return attrString.split(',').map(function(attr){
       return attr.trim();
     }).filter(function filterAgainstWhitelist(attr){
@@ -53,7 +53,7 @@ function BrandingDirective(settings) {
     restrict: 'A',
     link: function(scope, $elem, attrs) {
       if(_hasBranding){
-        _getValidBrandingAttribut(attrs.hBranding).forEach(function(attr){
+        _getValidBrandingAttribute(attrs.hBranding).forEach(function(attr){
           var propVal = settings.branding[attr];
           if(propVal){
             // the _supportedPropSettings holds the .style property name

src/sidebar/directive/test/h-branding-fixtures.js

@@ -10,8 +10,8 @@ module.exports = [
     expectedPropValue: 'blue',
   },
   {
-    settings: {highlightColor: 'red'},
-    attrs: 'h-branding="highlightColor"',
+    settings: {accentColor: 'red'},
+    attrs: 'h-branding="accentColor"',
     styleChanged: 'color',
     expectedPropValue: 'red',
   },

src/sidebar/templates/annotation.html

@@ -66,7 +66,7 @@
       ng-click="vm.toggleCollapseBody($event)"
       ng-title="vm.collapseBody ? 'Show the full annotation text' : 'Show the first few lines only'"
       ng-bind="vm.collapseBody ? 'More' : 'Less'"
-      h-branding="highlightColor"></a>
+      h-branding="accentColor"></a>
   </div>
   <!-- / Tags -->
 

src/sidebar/templates/excerpt.html

@@ -10,12 +10,12 @@
       <span class="excerpt__toggle-link" ng-show="vm.isExpandable()">
         … <a ng-click="vm.toggle($event)"
             title="Show the full excerpt"
-            h-branding="highlightColor">More</a>
+            h-branding="accentColor, selectionFontFamily">More</a>
       </span>
       <span class="excerpt__toggle-link" ng-show="vm.isCollapsible()">
         <a ng-click="vm.toggle($event)"
             title="Show the first few lines only"
-            h-branding="highlightColor">Less</a>
+            h-branding="accentColor, selectionFontFamily">Less</a>
       </span>
     </div>
   </div>

src/sidebar/templates/login-control.html

@@ -3,8 +3,8 @@
       ng-if="vm.newStyle && vm.auth.status === 'unknown'">⋯</span>
 <span class="login-text"
       ng-if="vm.newStyle && vm.auth.status === 'logged-out'">
-  <a href="" ng-click="vm.onSignUp()" target="_blank" h-branding="highlightColor">Sign up</a>
-  / <a href="" ng-click="vm.onLogin()" h-branding="highlightColor">Log in</a>
+  <a href="" ng-click="vm.onSignUp()" target="_blank" h-branding="accentColor">Sign up</a>
+  / <a href="" ng-click="vm.onLogin()" h-branding="accentColor">Log in</a>
 </span>
 <div ng-if="vm.newStyle"
      class="pull-right login-control-menu"

src/sidebar/templates/login-form.html

@@ -53,7 +53,7 @@
 
         <div class="form-actions">
           <div class="form-actions-message">
-            <a href="{{vm.serviceUrl('forgot-password')}}" target="_blank" h-branding="highlightColor">Forgot your password?</a>
+            <a href="{{vm.serviceUrl('forgot-password')}}" target="_blank" h-branding="accentColor">Forgot your password?</a>
           </div>
           <div class="form-actions-buttons">
             <button class="btn btn-primary" type="submit" name="login"