Fix positioning of note icons

4 files changed, 113 insertions, 104 deletions

diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index ff185cd8767..cd23deb6d75 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -1,15 +1,18 @@
 .timeline {
   @include basic-list;
-
   margin: 0;
   padding: 0;
 
   .timeline-entry {
-    padding: $gl-padding $gl-btn-padding 11px;
+    padding: $gl-padding $gl-btn-padding 14px;
     border-color: $white-normal;
     color: $gl-text-color;
     border-bottom: 1px solid $border-white-light;
 
+    .timeline-entry-inner {
+      position: relative;
+    }
+
     &:target {
       background: $line-target-blue;
     }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index fe5ef7db1e1..37709b89ede 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -18,9 +18,12 @@ ul.notes {
     float: left;
 
     svg {
-      width: 20px;
-      height: auto;
-      fill: $gl-text-color-secondary;
+      height: 18px;
+      width: auto;
+      fill: $gray-darkest;
+      position: absolute;
+      left: 30px;
+      top: 15px;
     }
   }
 
@@ -39,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;
@@ -74,6 +174,10 @@ ul.notes {
       padding: 14px 10px;
     }
 
+    .note-header {
+      padding-bottom: 0;
+    }
+
     .note-body {
       overflow: hidden;
 
@@ -137,104 +241,6 @@ ul.notes {
       }
     }
   }
-
-  .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;
-        }
-      }
-    }
-
-  }
 }
 
 // Diff code in discussion view
diff --git a/app/helpers/system_note_helper.rb b/app/helpers/system_note_helper.rb
index 954d4427378..7882c4f71a3 100644
--- a/app/helpers/system_note_helper.rb
+++ b/app/helpers/system_note_helper.rb
@@ -14,7 +14,7 @@ module SystemNoteHelper
       when 'closed'
         'icon_status_closed'
       when 'time_tracking'
-        'icon_timer'
+        'icon_stopwatch'
       when 'assignee'
         'icon_user'
       when 'title'
diff --git a/app/views/shared/icons/icon_clock_o.svg b/app/views/shared/icons/_icon_clock_o.svg
index 8ddce62614c..8ddce62614c 100644
--- a/app/views/shared/icons/icon_clock_o.svg
+++ b/app/views/shared/icons/_icon_clock_o.svg