1 files changed, 24 insertions, 12 deletions

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index b510822a20a..e23ec25a2f3 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -453,6 +453,8 @@ $note-form-margin-left: 72px;
 }
 
 .diff-file {
+  .diff-grid-left:hover,
+  .diff-grid-right:hover,
   .is-over {
     .add-diff-note {
       display: inline-flex;
@@ -490,6 +492,7 @@ $note-form-margin-left: 72px;
   .notes_holder {
     font-family: $regular-font;
 
+    .diff-td,
     td {
       border: 1px solid $border-color;
       border-left: 0;
@@ -798,21 +801,15 @@ $note-form-margin-left: 72px;
 }
 
 .note-role {
-  margin: 0 3px;
-}
-
-.note-role-special {
-  position: relative;
-  display: inline-block;
-  color: $gl-text-color-secondary;
-  font-size: 12px;
-  text-shadow: 0 0 15px $gl-text-color-inverted;
+  margin: 0 8px;
 }
 
 /**
  * Line note button on the side of diffs
  */
 
+.diff-grid-left:hover,
+.diff-grid-right:hover,
 .line_holder .is-over:not(.no-comment-btn) {
   .add-diff-note {
     opacity: 1;
@@ -895,6 +892,15 @@ $note-form-margin-left: 72px;
   outline: 0;
   transition: color $general-hover-transition-duration $general-hover-transition-curve;
 
+  &[disabled] {
+    padding: 0 8px !important;
+    box-shadow: none !important;
+
+    .gl-button-loading-indicator {
+      margin-right: 0 !important;
+    }
+  }
+
   &.is-disabled {
     cursor: default;
   }
@@ -902,16 +908,22 @@ $note-form-margin-left: 72px;
   &:not(.is-disabled) {
     &:hover,
     &:focus {
-      color: $green-600;
+      svg {
+        color: $green-600;
+      }
     }
   }
 
   &.is-active {
-    color: $green-600;
+    svg {
+      @include gl-text-green-500;
+    }
 
     &:hover,
     &:focus {
-      color: $green-700;
+      svg {
+        color: $green-700;
+      }
     }
   }