Improve preview/edit links for comment form

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/sections/notes.scss

@@ -275,10 +275,9 @@ ul.notes {
 
     // preview/edit buttons
     > a {
-      font-size: 24px;
-      padding: 4px;
       position: absolute;
-      right: 10px;
+      right: 5px;
+      top: 116px;
     }
     .note_preview {
       background: #f5f5f5;
@@ -325,7 +324,7 @@ ul.notes {
   padding: 0 5px;
 
   .note-form-option {
-    margin-top: 10px;
+    margin-top: 8px;
     margin-left: 30px;
     @extend .pull-left;
   }
@@ -366,4 +365,4 @@ ul.notes {
 
 .parallel-comment {
   padding: 6px;
-}
\ No newline at end of file
+}

app/views/projects/notes/_form.html.haml

@@ -7,10 +7,12 @@
   = f.hidden_field :noteable_type
 
   .note_text_and_preview.js-toggler-container
-    %a.js-note-preview-button.js-toggler-target.turn-off{ href: "javascript:;", title: "Preview", data: {url: preview_project_notes_path(@project)} }
+    %a.btn.btn-primary.js-note-preview-button.js-toggler-target.turn-off{ href: "#", data: {url: preview_project_notes_path(@project)} }
       %i.icon-eye-open
-    %a.js-note-edit-button.js-toggler-target.turn-off{ href: "javascript:;", title: "Edit" }
+      Preview
+    %a.btn.btn-primary.js-note-edit-button.js-toggler-target.turn-off{ href: "#" }
       %i.icon-edit
+      Write
 
     = f.text_area :note, size: 255, class: 'note_text js-note-text js-gfm-input turn-on'
     .note_preview.js-note-preview.turn-off
@@ -27,7 +29,7 @@
       %a.btn.grouped.js-close-discussion-note-form Cancel
 
     .note-form-option
-      %a.choose-btn.btn.btn-small.js-choose-note-attachment-button
+      %a.choose-btn.btn.js-choose-note-attachment-button
         %i.icon-paper-clip
         %span Choose File ...