Updated dropzone hover styling

app/assets/javascripts/dropzone_input.js.coffee

@@ -15,11 +15,13 @@ class @DropzoneInput
     project_uploads_path = window.project_uploads_path or null
     max_file_size = gon.max_file_size or 10
 
-    form_textarea = $(form).find("textarea.markdown-area")
+    form_textarea = $(form).find(".js-gfm-input")
     form_textarea.wrap "<div class=\"div-dropzone\"></div>"
     form_textarea.on 'paste', (event) =>
       handlePaste(event)
 
+    $mdArea = $(form_textarea).closest('.md-area')
+
     $(form).setupMarkdownPreview()
 
     form_dropzone = $(form).find('.div-dropzone')
@@ -49,17 +51,16 @@ class @DropzoneInput
         $(".div-dropzone-alert").alert "close"
 
       dragover: ->
-        form_textarea.addClass "div-dropzone-focus"
+        $mdArea.addClass 'is-dropzone-hover'
         form.find(".div-dropzone-hover").css "opacity", 0.7
         return
 
       dragleave: ->
-        form_textarea.removeClass "div-dropzone-focus"
+        $mdArea.removeClass 'is-dropzone-hover'
         form.find(".div-dropzone-hover").css "opacity", 0
         return
 
       drop: ->
-        form_textarea.removeClass "div-dropzone-focus"
         form.find(".div-dropzone-hover").css "opacity", 0
         form_textarea.focus()
         return

app/assets/stylesheets/framework/markdown_area.scss

 .div-dropzone-wrapper {
   .div-dropzone {
     position: relative;
-    margin-bottom: -5px;
-
-    .div-dropzone-focus {
-      border-color: #66afe9 !important;
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
-      outline: 0 !important;
-    }
 
     .div-dropzone-hover {
       position: absolute;
       top: 50%;
       left: 50%;
-      margin-top: -0.5em;
-      margin-left: -0.6em;
+      margin-top: -11.5px;
+      margin-left: -15px;
       opacity: 0;
-      font-size: 50px;
+      font-size: 30px;
       transition: opacity 200ms ease-in-out;
       pointer-events: none;
     }

app/assets/stylesheets/framework/typography.scss

@@ -250,14 +250,6 @@ a > code {
  * Textareas intended for GFM
  *
  */
-.js-gfm-input {
-  font-family: $monospace_font;
-  color: $gl-text-color;
-}
-
-.md-preview {
-}
-
 .strikethrough {
   text-decoration: line-through;
 }

app/assets/stylesheets/pages/note_form.scss

@@ -40,6 +40,7 @@
 }
 
 .note-textarea {
+  display: block;
   padding: 10px 0;
   font-family: $regular_font;
   border: 0;
@@ -72,6 +73,17 @@
       }
     }
 
+    &.is-dropzone-hover {
+      border-color: $gl-success;
+      box-shadow: 0 0 2px rgba(#000, .2),
+                  0 0 4px rgba($gl-success, .4);
+
+      .comment-toolbar,
+      .nav-links {
+        border-color: $gl-success;
+      }
+    }
+
     p {
       code {
         white-space: normal;