add class name to drop zone file and apply dropbox

resource/js/components/PageEditor/Editor.js

@@ -215,7 +215,7 @@ export default class Editor extends AbstractEditor {
     const isMobile = this.props.isMobile;
 
     return <React.Fragment>
-      <div style={flexContainer}>
+      <div style={flexContainer} className="editor">
         <Dropzone
             ref="dropzone"
             disableClick

resource/styles/scss/dropzone.scss

@@ -1,129 +1,130 @@
-.overlay {
-  // layout
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 15px;
-}
-
-.overlay-content {
-  padding: 0.5em;
-}
-
-.page-editor-editor-container {
-  .overlay-content {
-    font-size: 2.5em;
-  }
-}
-
-.comment-form {
+ .editor {
   .overlay {
-    // style
-    margin-right: 15px;
-    margin-top: 55px;
-    margin-bottom: 55px;
-  }
-  .overlay-content {
-    font-size: 1.8em;
+    // layout
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 15px;
   }
-}
-
 
-@mixin overlay-processing-style() {
-  .overlay {
-    background: rgba(255,255,255,0.5);
-  }
   .overlay-content {
-    padding: 0.3em;
-    background: rgba(200,200,200,0.5);
-    color: #444;
+    padding: 0.5em;
   }
-}
-// add icon on cursor
-.autoformat-markdown-table-activated .CodeMirror-cursor {
-  &:after {
-    font-family: 'FontAwesome';
-    content: '\f0ce';
+
+  .page-editor-editor-container {
+    .overlay-content {
+      font-size: 2.5em;
+    }
   }
-}
 
-// for Dropzone
-.dropzone {
-  @mixin insertSimpleLineIcons($code) {
-    &:before {
-      margin-right: 0.2em;
-      font-family: 'simple-line-icons';
-      content: $code;
+  .comment-form {
+    .overlay {
+      // style
+      margin-right: 15px;
+      margin-top: 55px;
+      margin-bottom: 55px;
+    }
+    .overlay-content {
+      font-size: 1.8em;
     }
   }
 
-  // unuploadable or rejected
-  &.dropzone-unuploadable, &.dropzone-rejected {
+
+  @mixin overlay-processing-style() {
     .overlay {
-      background: rgba(200,200,200,0.8);
+      background: rgba(255,255,255,0.5);
     }
     .overlay-content {
+      padding: 0.3em;
+      background: rgba(200,200,200,0.5);
       color: #444;
     }
   }
-  // uploading
-  &.dropzone-uploading {
-    @include overlay-processing-style();
+  // add icon on cursor
+  .autoformat-markdown-table-activated .CodeMirror-cursor {
+    &:after {
+      font-family: 'FontAwesome';
+      content: '\f0ce';
+    }
   }
 
-  // unuploadable
-  &.dropzone-unuploadable {
-    .overlay-content {
-      // insert content
-      @include insertSimpleLineIcons("\e617");  // icon-exclamation
-      &:after {
-        content: "File uploading is disabled";
+  // for Dropzone
+  .dropzone {
+    @mixin insertSimpleLineIcons($code) {
+      &:before {
+        margin-right: 0.2em;
+        font-family: 'simple-line-icons';
+        content: $code;
       }
     }
-  }
-  // uploadable
-  &.dropzone-uploadable {
-    // accepted
-    &.dropzone-accepted:not(.dropzone-rejected) {
+
+    // unuploadable or rejected
+    &.dropzone-unuploadable, &.dropzone-rejected {
       .overlay {
-        border: 4px dashed #ccc;
+        background: rgba(200,200,200,0.8);
       }
+      .overlay-content {
+        color: #444;
+      }
+    }
+    // uploading
+    &.dropzone-uploading {
+      @include overlay-processing-style();
+    }
+
+    // unuploadable
+    &.dropzone-unuploadable {
       .overlay-content {
         // insert content
-        @include insertSimpleLineIcons("\e084");  // icon-cloud-upload
+        @include insertSimpleLineIcons("\e617");  // icon-exclamation
         &:after {
-          content: "Drop here to upload";
+          content: "File uploading is disabled";
         }
-        // style
-        color: #666;
-        background: rgba(200,200,200,0.8);
       }
     }
-    // file type mismatch
-    &.dropzone-rejected:not(.dropzone-uploadablefile) .overlay-content {
-      // insert content
-      @include insertSimpleLineIcons("\e032");  // icon-picture
-      &:after {
-        content: "Only an image file is allowed";
+    // uploadable
+    &.dropzone-uploadable {
+      // accepted
+      &.dropzone-accepted:not(.dropzone-rejected) {
+        .overlay {
+          border: 4px dashed #ccc;
+        }
+        .overlay-content {
+          // insert content
+          @include insertSimpleLineIcons("\e084");  // icon-cloud-upload
+          &:after {
+            content: "Drop here to upload";
+          }
+          // style
+          color: #666;
+          background: rgba(200,200,200,0.8);
+        }
       }
-    }
-    // multiple files
-    &.dropzone-accepted.dropzone-rejected .overlay-content {
-      // insert content
-      @include insertSimpleLineIcons("\e617");  // icon-exclamation
-      &:after {
-        content: "Only 1 file is allowed";
+      // file type mismatch
+      &.dropzone-rejected:not(.dropzone-uploadablefile) .overlay-content {
+        // insert content
+        @include insertSimpleLineIcons("\e032");  // icon-picture
+        &:after {
+          content: "Only an image file is allowed";
+        }
+      }
+      // multiple files
+      &.dropzone-accepted.dropzone-rejected .overlay-content {
+        // insert content
+        @include insertSimpleLineIcons("\e617");  // icon-exclamation
+        &:after {
+          content: "Only 1 file is allowed";
+        }
       }
     }
-  }
-} // end of.dropzone
+  } // end of.dropzone
 
-.textarea-editor {
-  border: none;
-  font-family: monospace;
-}
+  .textarea-editor {
+    border: none;
+    font-family: monospace;
+  }
 
-.loading-keymap {
-  @include overlay-processing-style();
+  .loading-keymap {
+    @include overlay-processing-style();
+  }
 }
-