1 files changed, 162 insertions, 113 deletions

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 6e63bb75e88..12ca20a1420 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -16,6 +16,15 @@ ul.notes {
 
   .timeline-icon {
     float: left;
+
+    svg {
+      width: 18px;
+      height: auto;
+      fill: $gray-darkest;
+      position: absolute;
+      left: 30px;
+      top: 15px;
+    }
   }
 
   .timeline-content {
@@ -33,6 +42,103 @@ ul.notes {
     white-space: nowrap;
   }
 
+  .discussion-body {
+    padding-top: 15px;
+  }
+
+  .discussion {
+    overflow: hidden;
+    display: block;
+    position: relative;
+  }
+
+  .note {
+    display: block;
+    position: relative;
+    border-bottom: 1px solid $white-normal;
+
+    &.note-discussion {
+      &.timeline-entry {
+        padding: 14px 10px;
+      }
+
+      .system-note {
+        padding: 0;
+      }
+    }
+
+    &.is-editting {
+      .note-header,
+      .note-text,
+      .edited-text {
+        display: none;
+      }
+
+      .note-edit-form {
+        display: block;
+
+        &.current-note-edit-form + .note-awards {
+          display: none;
+        }
+      }
+    }
+
+    .note-body {
+      overflow-x: auto;
+      overflow-y: hidden;
+
+      .note-text {
+        word-wrap: break-word;
+        @include md-typography;
+        // Reset ul style types since we're nested inside a ul already
+        @include bulleted-list;
+        ul.task-list {
+          ul:not(.task-list) {
+            padding-left: 1.3em;
+          }
+        }
+      }
+    }
+
+    .note-awards {
+      .js-awards-block {
+        padding: 2px;
+        margin-top: 10px;
+      }
+    }
+
+    .note-header {
+      padding-bottom: 3px;
+      padding-right: 20px;
+
+      @media (min-width: $screen-sm-min) {
+        padding-right: 0;
+      }
+
+      @media (max-width: $screen-xs-min) {
+        .inline {
+          display: block;
+        }
+      }
+    }
+
+    .note-emoji-button {
+      .fa-spinner {
+        display: none;
+      }
+
+      &.is-loading {
+        .fa-smile-o {
+          display: none;
+        }
+
+        .fa-spinner {
+          display: inline-block;
+        }
+      }
+    }
+  }
+
   .system-note {
     font-size: 14px;
     padding: 0;
@@ -68,6 +174,10 @@ ul.notes {
       padding: 14px 10px;
     }
 
+    .note-header {
+      padding-bottom: 0;
+    }
+
     .note-body {
       overflow: hidden;
 
@@ -130,116 +240,6 @@ ul.notes {
         }
       }
     }
-
-    .timeline-icon {
-      display: none;
-
-      .avatar {
-        visibility: hidden;
-
-        .discussion-body & {
-          visibility: visible;
-        }
-      }
-    }
-  }
-
-  .discussion-body {
-    padding-top: 15px;
-  }
-
-  .discussion {
-    overflow: hidden;
-    display: block;
-    position: relative;
-  }
-
-  .note {
-    display: block;
-    position: relative;
-    border-bottom: 1px solid $white-normal;
-
-    &.note-discussion {
-      &.timeline-entry {
-        padding: 14px 10px;
-      }
-
-      .system-note {
-        padding: 0;
-      }
-    }
-
-    &.is-editting {
-      .note-header,
-      .note-text,
-      .edited-text {
-        display: none;
-      }
-
-      .note-edit-form {
-        display: block;
-
-        &.current-note-edit-form + .note-awards {
-          display: none;
-        }
-      }
-    }
-
-    .note-body {
-      overflow-x: auto;
-      overflow-y: hidden;
-
-      .note-text {
-        word-wrap: break-word;
-        @include md-typography;
-        // Reset ul style types since we're nested inside a ul already
-        @include bulleted-list;
-        ul.task-list {
-          ul:not(.task-list) {
-            padding-left: 1.3em;
-          }
-        }
-      }
-    }
-
-    .note-awards {
-      .js-awards-block {
-        padding: 2px;
-        margin-top: 10px;
-      }
-    }
-
-    .note-header {
-      padding-bottom: 3px;
-      padding-right: 20px;
-
-      @media (min-width: $screen-sm-min) {
-        padding-right: 0;
-      }
-
-      @media (max-width: $screen-xs-min) {
-        .inline {
-          display: block;
-        }
-      }
-    }
-
-    .note-emoji-button {
-      .fa-spinner {
-        display: none;
-      }
-
-      &.is-loading {
-        .fa-smile-o {
-          display: none;
-        }
-
-        .fa-spinner {
-          display: inline-block;
-        }
-      }
-    }
-
   }
 }
 
@@ -398,20 +398,71 @@ ul.notes {
     font-size: 17px;
   }
 
-  &:hover {
+  svg {
+    height: 16px;
+    width: 16px;
+    fill: $gray-darkest;
+    vertical-align: text-top;
+  }
+
+  .award-control-icon-positive,
+  .award-control-icon-super-positive {
+    position: absolute;
+    margin-left: -20px;
+    opacity: 0;
+  }
+
+  &:hover,
+  &.is-active {
     .danger-highlight {
       color: $gl-text-red;
     }
 
     .link-highlight {
       color: $gl-link-color;
+
+      svg {
+        fill: $gl-link-color;
+      }
+    }
+
+    .award-control-icon-neutral {
+      opacity: 0;
+    }
+
+    .award-control-icon-positive {
+      opacity: 1;
+    }
+  }
+
+  &.is-active {
+    .award-control-icon-positive {
+      opacity: 0;
+    }
+
+    .award-control-icon-super-positive {
+      opacity: 1;
     }
   }
 }
 
 .discussion-toggle-button {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
   line-height: 20px;
   font-size: 13px;
+  transition: color 0.1s linear;
+
+  &:hover {
+    color: $gl-link-color;
+  }
+
+  &:focus {
+    text-decoration: underline;
+    outline: none;
+    color: $gl-link-color;
+  }
 
   .fa {
     margin-right: 3px;
@@ -494,7 +545,6 @@ ul.notes {
 }
 
 .line-resolve-all-container {
-
   .btn-group {
     margin-left: -4px;
   }
@@ -523,7 +573,6 @@ ul.notes {
       fill: $gray-darkest;
     }
   }
-
 }
 
 .line-resolve-all {