Restyling on elements in comment form

6 files changed, 49 insertions, 49 deletions

diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 9963299988e..24569c4f975 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -1,5 +1,4 @@
 #= require autosave
-#= require autosize
 #= require dropzone
 #= require dropzone_input
 #= require gfm_auto_complete
@@ -288,7 +287,6 @@ class @Notes
       else
         previewButton.removeClass("turn-on").addClass "turn-off"
 
-    autosize(textarea)
     new Autosave textarea, [
       "Note"
       form.find("#note_commit_id").val()
@@ -370,9 +368,6 @@ class @Notes
     textarea = form.find("textarea")
     textarea.focus()
 
-    if isNewForm
-      autosize(textarea)
-
     # HACK (rspeicher/DouweM): Work around a Chrome 43 bug(?).
     # The textarea has the correct value, Chrome just won't show it unless we
     # modify it, so let's clear it and re-set it!
diff --git a/app/assets/javascripts/zen_mode.js.coffee b/app/assets/javascripts/zen_mode.js.coffee
index e1c5446eaac..99f35ecfb0f 100644
--- a/app/assets/javascripts/zen_mode.js.coffee
+++ b/app/assets/javascripts/zen_mode.js.coffee
@@ -42,7 +42,7 @@ class @ZenMode
       $(e.currentTarget).trigger('zen_mode:leave')
 
     $(document).on 'zen_mode:enter', (e) =>
-      @enter(e.target.parentNode)
+      @enter($(e.target).closest('.md-area').find('.zen-backdrop'))
     $(document).on 'zen_mode:leave', (e) =>
       @exit()
 
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 8328aac4e7a..9e2240bd217 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -65,6 +65,21 @@
   position: relative;
 }
 
+.md-header {
+  .nav-links {
+    .active {
+      a {
+        border-bottom-color: #000;
+      }
+    }
+
+    a {
+      padding-top: 0;
+      line-height: 1;
+    }
+  }
+}
+
 .referenced-users {
   color: #4c4e54;
   padding-top: 10px;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index b1886fbe67b..2ed0f82f911 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -244,7 +244,7 @@ a > code {
  * Textareas intended for GFM
  *
  */
-textarea.js-gfm-input {
+.js-gfm-input {
   font-family: $monospace_font;
   color: $gl-text-color;
 }
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index 02e24ec7c4d..e75f4471e6c 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -1,26 +1,4 @@
 .zennable {
-  a.js-zen-enter {
-    color: $gl-gray;
-    position: absolute;
-    top: 0;
-    right: 4px;
-    line-height: 56px;
-  }
-
-  a.js-zen-leave {
-    display: none;
-    color: $gl-text-color;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 5px;
-    font-size: 36px;
-
-    &:hover {
-      color: #111;
-    }
-  }
-
   .zen-backdrop {
     &.fullscreen {
       background-color: white;
@@ -47,11 +25,7 @@
         margin: 0 auto;
       }
 
-      a.js-zen-enter {
-        display: none;
-      }
-
-      a.js-zen-leave {
+      .zen-control-leave {
         display: block;
         position: absolute;
         top: 0;
@@ -59,3 +33,21 @@
     }
   }
 }
+
+.zen-cotrol {
+  color: #555;
+  line-height: 31px;
+}
+
+.zen-control-leave {
+  display: none;
+  color: $gl-text-color;
+  position: absolute;
+  right: 10px;
+  padding: 5px;
+  font-size: 36px;
+
+  &:hover {
+    color: #111;
+  }
+}
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 91b5216a22f..554f87c05ad 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -1,10 +1,6 @@
 /**
  * Note Form
  */
-
-.comment-btn {
-  @extend .btn-create;
-}
 .reply-btn {
   @extend .btn-primary;
   margin: 10px $gl-padding;
@@ -42,18 +38,22 @@
     max-width: 100%;
   }
 
-  .note_text {
-    width: 100%;
-  }
-
   .comment-hints {
     margin-top: -12px;
   }
 }
 
-/* loading indicator */
-.notes-busy {
-  margin: 18px;
+.note-textarea {
+  padding-left: 0;
+  padding-right: 0;
+  font-family: $regular_font;
+  border-left: 0;
+  border-right: 0;
+  resize: none!important; // TODO: Find a way to remove this !important
+
+  &:focus {
+    outline: 0;
+  }
 }
 
 .note-image-attach {
@@ -64,11 +64,9 @@
 
 .common-note-form {
   margin: 0;
-  background: #fff;
   padding: $gl-padding;
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
-  margin-bottom: -$gl-padding;
+  border: 1px solid #E5E5E5;
+  border-radius: $border-radius-base;
 }
 
 .note-form-actions {