Style annotation header.

src/components/preview.js

@@ -88,9 +88,11 @@ class Preview extends React.Component {
             <div className="color" style={{ backgroundColor: annotation.color }}/>
             <div className="page" onClick={this.handleClickPage}>Page {annotation.pageLabel}</div>
           </div>
-          <div className="middle">
-            <div className="author">{annotation.authorName}</div>
-          </div>
+          {annotation.authorName && (
+            <div className="center">
+              <div className="author">{annotation.authorName}</div>
+            </div>
+          )}
           <div className="right">
             <div className="more" onClick={this.handleClickMore}/>
           </div>

src/stylesheets/components/annotator/_annotation.scss

@@ -6,7 +6,6 @@
   background-color: $annotation-bg;
   border: $annotation-border;
   border-radius: $annotation-border-radius;
-  cursor: pointer;
 
   &.selected {
     background-color: $annotation-selected-bg;

src/stylesheets/components/annotator/_icons.scss

@@ -31,3 +31,19 @@
     }
   }
 }
+
+// Annotations view
+
+#annotationsView {
+  .more {
+    @include icon("more", 12px);
+
+    @include state(".selected .more") {
+      @include icon("more-selected", 12px);
+    }
+
+    @include variant(".read-only .more") {
+      @include icon("padlock", 12px);
+    }
+  }
+}

src/stylesheets/components/annotator/_preview.scss

@@ -7,47 +7,61 @@
 
   header {
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: $preview-header-height;
+    padding: 0 8px;
+    border-bottom: $preview-header-border;
+    line-height: rem(12);
+    white-space: nowrap;
+
+    .selected & {
+      border-bottom: $preview-header-selected-border;
+    }
 
-    .left {
-      flex-basis: 100%;
-      // Allow left side to grow because in some cases
-      // page label can be long i.e. 10002 or S44P12
-      white-space: nowrap;
+    // Allow left side to grow because in some cases
+    // page label can be long i.e. 10002 or S44P12
 
-      .color {
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-      }
+    .left,
+    .center,
+    .right {
+      flex: 1 1 0;
+      display: flex;
+      align-items: center;
+    }
 
-      .page {
-        display: inline-block;
-        cursor: pointer;
-        font-weight: bold;
-      }
+    .center {
+      flex: 0 1 auto;
+      justify-content: center;
+      min-width: 0;
+      max-width: 50%;
     }
 
-    .middle {
-      flex-basis: 100%;
-      overflow: hidden;
+    .right {
+      justify-content: flex-end;
+    }
 
-      .author {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        text-align: center;
-      }
+    .color {
+      width: 12px;
+      height: 12px;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 3px;
+      margin-right: 5px;
     }
 
-    .right {
-      flex-basis: 100%;
-
-      .more {
-        text-align: right;
-        cursor: pointer;
-        &:before {
-          content: '...';
-        }
-      }
+    .page {
+      display: inline-block;
+      font-weight: bold;
+      padding-right: 8px;
+    }
+
+    .author {
+      @include text-truncate;
+      color: #707070;
+    }
+
+    .more {
+      margin-right: -4px;
     }
   }
 
@@ -61,19 +75,20 @@
     }
 
     .content {
+      padding: 0 8px;
+
       &:focus {
         background-color: #fff;
       }
     }
   }
 
-
   .image {
     width: 100%;
   }
 
   .tags {
-    cursor: pointer;
+    padding: 0 8px;
 
     .tag {
       padding-right: 5px;
@@ -83,14 +98,6 @@
       content: attr(placeholder);
     }
   }
-
-    &.read-only {
-    .header {
-      .more::before {
-        content: 'L';
-      }
-    }
-  }
 }
 
 .page-popup {

src/stylesheets/themes/_light-darwin.scss

@@ -348,3 +348,8 @@ $annotation-border:              1px solid #bcc4d2;
 $annotation-selected-border:     1px solid #6d95e0;
 $annotation-border-radius:       5px;
 $annotation-selected-box-shadow: 0 0 0 2px rgba(#6d95e0, 0.5);
+
+// Preview
+$preview-header-height: 21px;
+$preview-header-border: 1px solid #d7dad7;
+$preview-header-selected-border: 1px solid rgba(#6d95e0, 0.4);