Focus style for comment form

4 files changed, 33 insertions, 14 deletions

diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 864156cb718..40326ec96a8 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -288,6 +288,12 @@ class @Notes
       else
         previewButton.removeClass("turn-on").addClass "turn-off"
 
+    textarea.on 'focus', ->
+      $(this).closest('.md-area').addClass 'is-focused'
+
+    textarea.on 'blur', ->
+      $(this).closest('.md-area').removeClass 'is-focused'
+
     autosize(textarea)
 
     new Autosave textarea, [
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index ae23e19172a..ea8e1c902cb 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -82,11 +82,8 @@
 }
 
 .md-preview-holder {
-  background: #fff;
-  border: 1px solid #ddd;
-  min-height: 169px;
-  padding: 5px;
-  box-shadow: none;
+  min-height: 167px;
+  padding: 10px 0;
 }
 
 .markdown-area {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 561b37e5828..7bd666d1c69 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -44,8 +44,7 @@
 }
 
 .note-textarea {
-  padding-left: 0;
-  padding-right: 0;
+  padding: 10px 0;
   font-family: $regular_font;
   border: 0;
 
@@ -63,8 +62,18 @@
 .common-note-form {
   .md-area {
     padding: $gl-padding-top $gl-padding;
-    border: 1px solid #E5E5E5;
+    border: 1px solid #e5e5e5;
     border-radius: $border-radius-base;
+
+    &.is-focused {
+      border-color: #3b99fc;
+      box-shadow: 0 0 4px rgba(#3b99fc, .7);
+
+      .comment-toolbar,
+      .nav-links {
+        border-color: #3b99fc;
+      }
+    }
   }
 }
 
@@ -156,8 +165,6 @@
 }
 
 .toolbar-button {
-  float: left;
-  margin-right: $gl-padding;
   padding: 0;
   background: none;
   border: 0;
@@ -171,8 +178,14 @@
     outline: 0;
   }
 
-  &:last-child {
-    margin-right: 0;
+  @media (min-width: $screen-md-min) {
+    float: left;
+    margin-right: $gl-padding;
+
+    &:last-child {
+      float: right;
+      margin-right: 0;
+    }
   }
 }
 
@@ -185,8 +198,11 @@
 }
 
 .toolbar-text {
-  float: left;
   color: #959494;
   font-size: 14px;
   line-height: 16px;
+
+  @media (min-width: $screen-md-min) {
+    float: left;
+  }
 }
diff --git a/app/views/projects/notes/_hints.html.haml b/app/views/projects/notes/_hints.html.haml
index 7f83656146e..19783c8a81c 100644
--- a/app/views/projects/notes/_hints.html.haml
+++ b/app/views/projects/notes/_hints.html.haml
@@ -6,7 +6,7 @@
     Styling with
     = link_to 'Markdown', help_page_path('markdown', 'markdown'), target: '_blank', tabindex: -1
     is supported
-  %button.toolbar-button.markdown-selector.pull-right{ type: 'button', tabindex: '-1' }
+  %button.toolbar-button.markdown-selector{ type: 'button', tabindex: '-1' }
     = icon('file-image-o', class: 'toolbar-button-icon')
     Attach a file