Refresh the design of the annotation cards.

* Change the background of bucket bar.
* Change margins, line height, font size, default state colour and hover state colour
  for different elements in the annotation card and the replies thread.

Trello cards:
https://trello.com/c/aXCXxzx2/327-update-the-visual-design-of-the-annotation-cards
https://trello.com/b/o2ungX1n/current-sprint

h/static/scripts/directive/annotation.js

@@ -793,6 +793,7 @@ function annotation() {
       isSidebar: '<',
       onReplyCountClick: '&',
       replyCount: '<',
+      isCollapsed: '<'
     },
     template: require('../../../templates/client/annotation.html'),
   };

h/static/scripts/directive/test/annotation-test.js

@@ -1525,7 +1525,7 @@ describe('annotation', function() {
     describe('annotation metadata', function () {
       function findLink(directive) {
         var links = directive.element[0]
-          .querySelectorAll('header .annotation-link');
+          .querySelectorAll('header .annotation-header__timestamp');
         return links[links.length-1];
       }
 

h/static/scripts/directive/test/markdown-test.js

@@ -16,7 +16,7 @@ describe('markdown', function () {
   }
 
   function viewElement(editor) {
-    return editor[0].querySelector('.styled-text');
+    return editor[0].querySelector('.markdown-body');
   }
 
   function getRenderedHTML(editor) {

h/static/styles/annotation.scss

@@ -7,29 +7,56 @@
 $annotation-card-left-padding: 10px;
 
 .annotation-card {
-  background-color: white;
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.10);
   border-radius: 2px;
-  border: 1px solid $color-mercury;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 12px;
-  padding-bottom: 15px;
+  padding: $layout-h-margin;
+  background: $white;
+}
+
+.annotation-card:hover {
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
+
+  .annotation-header__user {
+    color: $grey-7;
+  }
+
+  .annotation-quote {
+    border-left: $highlight 3px solid;
+    color: $grey-5;
+  }
+}
+
+// When hovering a top-level annotation, show the footer in a hovered state.
+// When hovering a reply (at any level), show the reply's own footer in
+// a hovered state and also the footer of the top-level annotation.
+.annotation-card:hover > .annotation,
+.annotation:hover {
+  .annotation-replies__link,
+  .annotation-replies__count,
+  .annotation-action-btn {
+    color: $grey-6;
+  }
+
+  .annotation-header__timestamp {
+    color: $grey-5;
+  }
 }
 
 .annotation {
   display: block;
   font-family: $sans-font-family;
-  font-weight: 300;
+  font-weight: 400;
   position: relative;
 }
 
 .annotation-link {
-  font-size: $body1-font-size;
-  color: $color-gray;
-  &:focus { outline: 0; }
+  @include font-small;
+  color: $grey-4;
+}
 
-  .annotation:hover & {
-    color: $link-color;
+.annotation-replies:hover {
+  .annotation-replies__link {
+    text-decoration: underline;
   }
 }
 
@@ -42,12 +69,15 @@ $annotation-card-left-padding: 10px;
 .annotation-header {
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
-  margin-bottom: 5px;
+  align-items: baseline;
+  // Margin between top of x-height of username and
+  // top of the annotation card should be ~15px
+  margin-top: -$layout-h-margin + 10px;
 }
 
 .annotation-header__share-info {
-  color: $color-gray;
+  color: $grey-5;
+  @include font-normal;
 }
 
 .annotation-header__group {
@@ -60,10 +90,26 @@ $annotation-card-left-padding: 10px;
   margin-left: 5px;
 }
 
+.annotation-body {
+  @include font-normal;
+  color: $grey-6;
+  // Margin between top of ascent of annotation body and
+  // bottom of ascent of annotation-quote should be ~15px.
+  margin-top: $layout-h-margin - 5px;
+  margin-bottom: $layout-h-margin;
+  margin-right: 0px;
+  margin-left: 0px;
+}
+
 // the footer at the bottom of an annotation displaying
 // the annotation actions and reply counts
 .annotation-footer {
-  margin-bottom: 0;
+  @include font-normal;
+  color: $grey-5;
+  // Margin between bottom of ascent of annotation footer labels
+  // and bottom of annotation card should be ~20px.
+  margin-bottom: $layout-h-margin - 13px;
+  margin-top: $layout-h-margin;
 }
 
 .u-flex-spacer {
@@ -71,8 +117,12 @@ $annotation-card-left-padding: 10px;
 }
 
 .annotation-quote-list {
-  margin-top: 14px;
-  margin-bottom: 14px;
+  // Margin between top of ascent of annotation quote and
+  // bottom of ascent of username should be ~15px
+  margin-top: $layout-h-margin - 5px;
+  // Margin between bottom of ascent of annotation quote and
+  // top of ascent of annotation-body should be ~15px
+  margin-bottom: $layout-h-margin - 3px;
 }
 
 .annotation-media-embed {
@@ -80,19 +130,26 @@ $annotation-card-left-padding: 10px;
   height: 208px;
 }
 
-.annotation-user {
-  color: $text-color;
+.annotation-header__user {
+  @include font-normal;
+  color: $grey-7;
   font-weight: bold;
-  font-size: $body1-font-size;
-  &:hover {
-    color: $link-color-hover;
-    cursor: pointer;
-    text-decoration: underline;
-  }
 }
 
 .annotation-replies {
   float: left;
+  margin-top: 2px;
+}
+
+.annotation-replies__link,
+.annotation-replies__count {
+  @include font-normal;
+  color: $grey-5;
+}
+
+.annotation-header__timestamp {
+  @include font-small;
+  color: $grey-4;
 }
 
 .annotation-actions {
@@ -101,18 +158,10 @@ $annotation-card-left-padding: 10px;
 }
 
 .annotation-action-btn {
-  color: $dg-4;
+  color: $grey-5;
   font-weight: normal;
   padding: 0;
   margin: 0px 0px 0px 8px;
-
-  &:hover {
-    color: $dg-1;
-  }
-
-  &:focus, &:active {
-    color: $dg-1;
-  }
 }
 
 .annotation-action-btn__label {
@@ -121,6 +170,10 @@ $annotation-card-left-padding: 10px;
 
 .annotation-quote {
   @include quote;
+  @include font-normal;
+  color: $grey-4;
+  font-family: sans-serif;
+
   del {
     background:#ffe6e6;
   }
@@ -140,18 +193,18 @@ $annotation-card-left-padding: 10px;
   font-size: 0.8em;
   padding-top: 0.583em;
 
-  a {
-    color: $gray-light;
-    display: block;
-  }
-
   @include icons {
-    font-size: 13px;
+    font-size: $normal-font-size;
     vertical-align: -2px;
     margin-right: 1px;
   }
 }
 
+.annotation-license__link {
+  color: $gray-light;
+  display: block;
+}
+
 .annotation-collapsed-replies {
   display: none;
 }

h/static/styles/annotator/bucket-bar.scss

 @import '../base';
 
 .annotator-bucket-bar {
-  background: hsla(0, 0, 0, .1);
+  background: rgba(0, 0, 0, 0.08);
   pointer-events: none;
   position: absolute;
   height: 100%;

h/static/styles/annotator/inject.scss

@@ -42,8 +42,8 @@ $base-font-size: 14px;
 
   // frame styles
   @import './bucket-bar';
-  @include noise-background;
   user-select: none;
+  @include grey-background;
   direction: ltr;
   background: none;
   font-size: $base-font-size;

h/static/styles/app.scss

@@ -34,7 +34,7 @@ $base-line-height: 20px;
 body {
   $sidebar-h-padding: 9px;
 
-  @include noise-background;
+  @include grey-background;
   font-family: $sans-font-family;
   font-weight: 300;
   padding: $sidebar-h-padding;

h/static/styles/base.scss

@@ -17,14 +17,13 @@
   color: $gray;
   font-family: $serif-font-family;
   font-style: italic;
-  padding: 0 .615em;
+  padding: 0 1em;
   border-left: 3px solid $gray-lighter;
 }
 
-//NOISE///////////
-//Provides the noise background
-@mixin noise-background {
-  background: url("../images/noise_1.png");
+//Provides the grey-background
+@mixin grey-background {
+  background: $grey-2;
 }
 
 .annotator-hide {

h/static/styles/excerpt.scss

@@ -27,6 +27,7 @@
   .excerpt__toggle-link {
     padding-left: 15px;
     background-image: linear-gradient(to right, transparent 0px, white 12px);
+    line-height: $normal-line-height;
   }
 
   .excerpt__toggle-link > a {

h/static/styles/markdown.scss

@@ -39,3 +39,11 @@
     float: right;
   }
 }
+
+.markdown-body {
+  @include styled-text;
+
+  p {
+    margin: 0;
+  }
+}

h/static/styles/mixins/forms.scss

@@ -15,11 +15,11 @@
 }
 
 @mixin form-input {
+  @include font-normal;
   border: 1px solid $gray-lighter;
   border-radius: 2px;
   padding: .5em .75em;
   font-weight: normal;
-  font-size: 1.2em;
   color: $gray;
   background-color: #FAFAFA;
 }

h/static/styles/site.scss

@@ -23,10 +23,10 @@
 // pages
 @import './home';
 
-// body with grey noise background and Lato font used
+// body with grey background and Lato font used
 // in the sidebar and groups pages
 .body--default {
-  @include noise-background;
+  @include grey-background;
   font-family: $sans-font-family;
 }
 

h/static/styles/styled-text.scss

 @import "base";
 
-.styled-text {
+@mixin styled-text() {
   h1, h2, h3, h4, h5, h6, p, ol, ul, img, pre, blockquote {
     margin: .618em 0;
   }
@@ -109,3 +109,7 @@
     border-radius: 2px;
   }
 }
+
+.styled-text {
+  @include styled-text;
+}
\ No newline at end of file

h/static/styles/tags-input.scss

@@ -78,12 +78,16 @@ tags-input {
 
   .tag-list {
     @include pie-clearfix;
-    margin-top: -.4545em;
+    // Margin between bottom of ascent of annotation body and
+    // top of tags list should be ~15px
+    margin-top: -$layout-h-margin + 10px ;
+    // Margin between top of x-height of annotation footer
+    // labels and bottom of tags list should be ~15px
+    margin-bottom: $layout-h-margin - 10px ;
 
     .tag-item {
       float: left;
       margin-right: .4545em;
-      margin-top: .4545em;
 
       a {
         text-decoration: none;

h/static/styles/thread.scss

@@ -5,11 +5,6 @@ $thread-padding: $annotation-card-left-padding;
     margin-bottom: .72em;
   }
 
-  & > li.thread:hover,
-  & > li.thread.js-hover {
-    border: 1px solid $highlight;
-  }
-
   & > li.thread > .threadexp {
     display: none;
   }
@@ -25,7 +20,6 @@ $thread-padding: $annotation-card-left-padding;
   align-items: center;
 
   &__label {
-    margin-top: 10px;
     max-width: 160px;
     text-align: center;
   }
@@ -38,8 +32,34 @@ $thread-padding: $annotation-card-left-padding;
   }
 }
 
-.thread-replies .thread:first-child {
-  margin-top: 0.5em;
+.thread-replies {
+  .annotation-action-btn {
+    color: $grey-4;
+  }
+
+  .annotation-footer {
+    // Margin between bottom of ascent of annotation body and
+    // top of annotation footer should be ~15px
+    margin-top: $layout-h-margin - 8px;
+    // Margin between bottom of ascent of annotation footer labels
+    // and top of ascent of username should be ~20px
+    margin-bottom: $layout-h-margin - 3px;
+  }
+
+  .annotation-header {
+    // Margin between bottom of ascent of annotation card footer labels
+    // and top of ascent of username should be ~20px
+    margin-top: $layout-h-margin - 2px;
+  }
+
+  .annotation-body {
+    // Margin between top of ascent of annotation body and
+    // bottom of ascent of username should be ~15px
+    margin-top: $layout-h-margin - 8px;
+    // Margin between bottom of ascent of annotation body and
+    // top of annotation footer labels should be ~15px
+    margin-bottom: $layout-h-margin - 3px;
+  }
 }
 
 .thread {
@@ -48,15 +68,22 @@ $thread-padding: $annotation-card-left-padding;
 
   & > ul {
     padding-left: $thread-padding + 3px;
+    padding-right: $thread-padding + 3px;
     margin-left: -$thread-padding;
+    margin-right: -$thread-padding;
   }
 
   // nested threads for annotation replies
   .thread {
-    border-left: 1px dotted $gray-light;
+    border-left: 1px dotted $grey-3;
     padding: 0;
     padding-left: $thread-padding;
-    margin-top: 10px;
+
+    &:hover {
+      & > .threadexp > span {
+        color: $grey-7;
+      }
+    }
   }
 
   .threadexp {
@@ -68,7 +95,7 @@ $thread-padding: $annotation-card-left-padding;
 
     span {
       background: $white;
-      color: $gray-light;
+      color: $grey-4;
       display: block;
       line-height: inherit;
       text-align: center;

h/static/styles/variables.scss

@@ -42,6 +42,21 @@ $success-color: #1cbd41 !default;
 $mask-start-color: rgba($white, 0) !default;
 $mask-end-color: $white !default;
 
+
+// Variables for the new color palette
+// ------------------------------------
+$grey-1: #F2F2F2;
+$grey-2: #ECECEC;
+$grey-3: #DBDBDB;
+$grey-4: #A6A6A6;
+$grey-5: #7A7A7A;
+$grey-6: #3F3F3F;
+$grey-7: #202020;
+
+$brand: #BD1C2B;
+$highlight: #58CEF4;
+
+
 @function color-weight($c, $n: 500) {
   @if $n == 50 {
     @return tint($c, 85%);
@@ -102,6 +117,11 @@ $body2-line-height:       1.4em;
 $title-font-size:         20px;
 $title-font-weight:       bold;
 
+$normal-font-size: 13px;
+$normal-line-height: 17px;
+
+$small-font-size: 11px;
+$small-line-height: 12px;
 
 // Front page typography
 // -------------------------
@@ -163,3 +183,15 @@ $lg-2: #ECECEC;
 $lg-3: #F2F2F2;
 $primary: #BD1C2B;
 $highlight: #58CEF4;
+
+// Mixins
+// ------
+@mixin font-small {
+  font-size: $small-font-size;
+  line-height: $small-line-height;
+}
+
+@mixin font-normal {
+  font-size: $normal-font-size;
+  line-height: $normal-line-height;
+}

h/templates/client/annotation.html

@@ -6,38 +6,34 @@
   <header class="annotation-header">
     <!-- User -->
     <span ng-if="vm.user()">
-      <span>
-        <a class="annotation-user"
-           target="_blank"
-           ng-href="{{::vm.serviceUrl}}u/{{vm.user()}}"
-           >{{vm.username()}}</a>
-      </span>
-
+      <a class="annotation-header__user"
+        target="_blank"
+        ng-href="{{::vm.serviceUrl}}u/{{vm.user()}}"
+        >{{vm.username()}}</a>
       <span class="annotation-collapsed-replies">
         <a class="annotation-link" href=""
           ng-click="vm.onReplyCountClick()"
           ng-pluralize count="vm.replyCount"
           when="{'0': '', 'one': '1 reply', 'other': '{} replies'}"></a>
       </span>
-
       <br>
       <span class="annotation-header__share-info">
         <a class="annotation-header__group"
-           target="_blank" ng-if="vm.group() && vm.group().url" href="{{vm.group().url}}">
+          target="_blank" ng-if="vm.group() && vm.group().url" href="{{vm.group().url}}">
           <i class="h-icon-group"></i><span class="annotation-header__group-name">{{vm.group().name}}</span>
         </a>
         <span ng-show="vm.isPrivate"
-              title="This annotation is visible only to you.">
+          title="This annotation is visible only to you.">
           <i class="h-icon-lock"></i><span class="annotation-header__group-name" ng-show="!vm.group().url">Only me</span>
         </span>
         <i class="h-icon-border-color" ng-show="vm.isHighlight() && !vm.editing()" title="This is a highlight. Click 'edit' to add a note or tag."></i>
         <span class="annotation-citation"
-              ng-bind-html="vm.documentTitle"
-              ng-if="::!vm.isSidebar">
+          ng-bind-html="vm.documentTitle"
+          ng-if="::!vm.isSidebar">
         </span>
         <span class="annotation-citation-domain"
-              ng-bind-html="vm.documentDomain"
-              ng-if="::!vm.isSidebar">
+          ng-bind-html="vm.documentDomain"
+          ng-if="::!vm.isSidebar">
         </span>
       </span>
     </span>
@@ -45,7 +41,7 @@
     <span class="u-flex-spacer"></span>
 
     <!-- Timestamp -->
-    <a class="annotation-link"
+    <a class="annotation-header__timestamp"
        target="_blank"
        title="{{vm.absoluteTimestamp}}"
        ng-if="!vm.editing() && vm.updated()"
@@ -55,17 +51,17 @@
 
   <!-- Excerpts -->
   <section class="annotation-quote-list"
-           ng-repeat="target in vm.target() track by $index"
-           ng-if="vm.hasQuotes()">
-    <excerpt collapsed-height="40"
-             inline-controls="true"
-             overflow-hysteresis="20"
-             content-data="selector.exact">
+    ng-repeat="target in vm.target() track by $index"
+    ng-if="vm.hasQuotes()">
+    <excerpt collapsed-height="35"
+      inline-controls="true"
+      overflow-hysteresis="20"
+      content-data="selector.exact">
       <blockquote class="annotation-quote"
-                  ng-bind-html="selector.exact"
-                  ng-repeat="selector in target.selector
-                             | filter : {'type': 'TextQuoteSelector'}
-                             track by $index"></blockquote>
+        ng-bind-html="selector.exact"
+        ng-repeat="selector in target.selector
+          | filter : {'type': 'TextQuoteSelector'}
+          track by $index"></blockquote>
     </excerpt>
   </section>
 
@@ -74,15 +70,15 @@
   <!-- Body -->
   <section name="text" class="annotation-body">
     <excerpt enabled="!vm.editing()"
-             inline-controls="false"
-             on-collapsible-changed="vm.setBodyCollapsible(collapsible)"
-             collapse="vm.collapseBody"
-             collapsed-height="400"
-             overflow-hysteresis="20"
-             content-data="vm.form.text">
+      inline-controls="false"
+      on-collapsible-changed="vm.setBodyCollapsible(collapsible)"
+      collapse="vm.collapseBody"
+      collapsed-height="400"
+      overflow-hysteresis="20"
+      content-data="vm.form.text">
       <markdown text="vm.form.text"
-                on-edit-text="vm.setText(text)"
-                read-only="!vm.editing()">
+        on-edit-text="vm.setText(text)"
+        read-only="!vm.editing()">
       </markdown>
     </excerpt>
   </section>
@@ -91,15 +87,15 @@
   <!-- Tags -->
   <div class="annotation-body form-field" ng-if="vm.editing()">
     <tags-input ng-model="vm.form.tags"
-                name="tags"
-                class="tags"
-                placeholder="Add tags…"
-                min-length="1"
-                replace-spaces-with-dashes="false"
-                enable-editing-last-tag="true">
-        <auto-complete source="vm.tagsAutoComplete($query)"
-                       min-length="1"
-                       max-results-to-show="10"></auto-complete>
+      name="tags"
+      class="tags"
+      placeholder="Add tags…"
+      min-length="1"
+      replace-spaces-with-dashes="false"
+      enable-editing-last-tag="true">
+      <auto-complete source="vm.tagsAutoComplete($query)"
+        min-length="1"
+        max-results-to-show="10"></auto-complete>
     </tags-input>
   </div>
 
@@ -112,17 +108,17 @@
     </ul>
     <div class="u-stretch"></div>
     <a class="annotation-link u-strong" ng-show="vm.canCollapseBody"
-       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'"></a>
+      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'"></a>
   </div>
   <!-- / Tags -->
 
   <footer class="annotation-footer">
     <div class="annotation-form-actions" ng-if="vm.editing()" ng-switch="vm.action">
       <button ng-switch-when="delete"
-              ng-click="vm.save()"
-              class="dropdown-menu-btn"><i class="h-icon-check btn-icon"></i> Delete</button>
+        ng-click="vm.save()"
+        class="dropdown-menu-btn"><i class="h-icon-check btn-icon"></i> Delete</button>
       <publish-annotation-btn
         class="publish-annotation-btn"
         group="vm.group()"
@@ -134,20 +130,21 @@
     </div>
 
     <div class="annotation-section annotation-license"
-         ng-show="vm.isShared() && vm.editing()">
-      <a href="http://creativecommons.org/publicdomain/zero/1.0/"
-         title="View more information about the Creative Commons Public Domain license"
-         target="_blank">
+      ng-show="vm.isShared() && vm.editing()">
+      <a class="annotation-license__link" href="http://creativecommons.org/publicdomain/zero/1.0/"
+        title="View more information about the Creative Commons Public Domain license"
+        target="_blank">
         <i class="h-icon-cc-logo"></i><i class="h-icon-cc-zero"></i>
         Annotations can be freely reused by anyone for any purpose.
       </a>
     </div>
 
     <div class="annotation-replies" ng-if="vm.replyCount > 0">
-      <a class="annotation-link" href=""
-         ng-click="vm.onReplyCountClick()"
-         ng-pluralize count="vm.replyCount"
-         when="{'0': '', 'one': '1 reply', 'other': '{} replies'}"></a>
+      <a href=""
+        ng-click="vm.onReplyCountClick()">
+        <span class="annotation-replies__link">{{ vm.isCollapsed ? 'Show replies' : 'Hide replies' }}</span>
+        <span class="annotation-replies__count">({{ vm.replyCount }})</span>
+      </a>
     </div>
 
     <div class="annotation-actions" ng-if="vm.isSaving">

h/templates/client/markdown.html

@@ -16,7 +16,7 @@
 <textarea class="form-input form-textarea js-markdown-input"
           ng-show="showEditor()"
           ng-click="$event.stopPropagation()"></textarea>
-<div class="styled-text js-markdown-preview"
+<div class="markdown-body js-markdown-preview"
      ng-class="preview && 'markdown-preview'"
      ng-dblclick="togglePreview()"
      ng-show="!showEditor()"></div>

h/templates/client/thread.html

@@ -17,6 +17,7 @@
          is-last-reply="$last"
          is-sidebar="::isSidebar"
          reply-count="vm.numReplies()"
+         is-collapsed="vm.collapsed"
          on-reply-count-click="vm.toggleCollapsed()"
          ng-if="vm.container.message"
          ng-show="vm.matchesFilter()">