file uploading overlay

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.module.scss

@@ -45,36 +45,19 @@ $gray-600: #6c757d !default;
 $gray-700: #495057 !default;
 $secondary: $gray-600 !default;
 
-@mixin overlay-processing-style($additionalSelector, $contentFontSize: inherit, $contentPadding: inherit) {
-  .overlay.#{$additionalSelector} {
-    background: rgba(255, 255, 255, 0.5);
-    .overlay-content {
-      padding: $contentPadding;
-      font-size: $contentFontSize;
-      color: $gray-700;
-      background: rgba(200, 200, 200, 0.5);
-    }
-  }
-}
 
-@mixin insertSimpleLineIcons($code) {
+// ref codepoint: https://fonts.google.com/icons?hl=ja
+@mixin insertMaterialSymbolAndMessage($code, $message) {
   &:before {
     margin-right: 0.2em;
-    font-family: 'simple-line-icons';
+    font-family: 'Material Symbols Outlined';
     content: $code;
   }
-}
-
-// ref: https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints
-@mixin insertMaterialIcons($code) {
-  &:before {
-    margin-right: 0.2em;
-    font-family: 'Material Icons';
-    content: $code;
+  &:after {
+    content: $message;
   }
 }
 
-
 .codemirror-editor :global {
 
   // overlay in .codemirror-editor
@@ -94,58 +77,44 @@ $secondary: $gray-600 !default;
   .dropzone {
     position: relative; // against .overlay position: absolute
 
-    @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
-
+    .overlay.overlay-dropzone-active {
+      background: rgba(255, 255, 255, 0.5);
+      .overlay-content {
+        padding: 0.5em;
+        font-size: 2.5em;
+        color: $gray-700;
+        background: rgba(200, 200, 200, 0.5);
+      }
+    }
 
     // uploading
     &.dropzone-uploading {
       .overlay.overlay-dropzone-active {
         .overlay-content {
-          // insert content
-          @include insertMaterialIcons('\e9fc'); // upload_file
-
-          &:after {
-            content: 'Uploading...';
-          }
+          @include insertMaterialSymbolAndMessage('\e9fc', 'Uploading...');
         }
       }
-
     }
 
     // diabled
     &.dropzone-disabled {
       .overlay.overlay-dropzone-active {
         .overlay-content {
-          // insert content
-          // @include insertSimpleLineIcons('\e617'); // icon-exclamation
-          @include insertMaterialIcons('\e000'); // error
-
-          &:after {
-            content: 'File uploading is disabled';
-          }
+          @include insertMaterialSymbolAndMessage('\e000', 'File uploading is disabled');
         }
       }
     }
 
-    // uploadable
-    // &.dropzone-uploadable {
     // accepted
     &.dropzone-accepted {
       .overlay.overlay-dropzone-active {
+        // style
+        color: $secondary;
+        background: rgba(200, 200, 200, 0.8);
         border: 4px dashed $gray-300;
 
         .overlay-content {
-          // insert content
-          // @include insertSimpleLineIcons('\e084'); // icon-cloud-upload
-          @include insertMaterialIcons('\e2c3'); // cloud-upload
-
-          &:after {
-            content: 'Drop here to upload';
-          }
-
-          // style
-          color: $secondary;
-          background: rgba(200, 200, 200, 0.8);
+          @include insertMaterialSymbolAndMessage('\e2c3', 'Drop here to upload');
         }
       }
     }
@@ -154,13 +123,7 @@ $secondary: $gray-600 !default;
     &.dropzone-mismatch-picture {
       .overlay.overlay-dropzone-active {
         .overlay-content {
-          // insert content
-          // @include insertSimpleLineIcons()('\e032'); // icon-picture
-          @include insertMaterialIcons('\e410'); // photo
-
-          &:after {
-            content: 'Only an image file is allowed';
-          }
+          @include insertMaterialSymbolAndMessage('\e410', 'Only an image file is allowed');
         }
       }
     }
@@ -171,8 +134,9 @@ $secondary: $gray-600 !default;
         background: rgba(200, 200, 200, 0.8);
 
         .overlay-content {
-          color: $gray-300;
+          @include insertMaterialSymbolAndMessage('\e410', 'This file is not allowed');
         }
+
       }
     }
     /* end of.dropzone */

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -108,7 +108,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   } = useFileDropzone({ onUpload, acceptedFileType });
 
   const renderOverlay = useCallback(() => {
-    if (isDragActive) {
+    if (!isDragActive) {
       return (
         <div className="overlay overlay-dropzone-active">
           <span className="overlay-content">

packages/editor/src/services/file-dropzone/use-file-dropzone.ts

@@ -61,7 +61,7 @@ export const useFileDropzone = (props: DropzoneEditor): FileDropzoneState => {
           return 'dropzone-accepted';
         }
         if (dzState.isDragReject) {
-          return 'dropzone-mismatch';
+          return 'dropzone-mismatch-picture';
         }
         break;