change color with hover during dragging

browser/components/StorageItem.js

@@ -15,11 +15,13 @@ import { isNumber } from 'lodash'
  * @param {boolean} isFolded
  * @param {number} noteCount
  * @param {Function} handleDrop
+ * @param {Function} handleDragEnter
+ * @param {Function} handleDragOut
  * @return {React.Component}
  */
 const StorageItem = ({
   isActive, handleButtonClick, handleContextMenu, folderName,
-  folderColor, isFolded, noteCount, handleDrop
+  folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
 }) => (
   <button styleName={isActive
       ? 'folderList-item--active'
@@ -28,6 +30,8 @@ const StorageItem = ({
     onClick={handleButtonClick}
     onContextMenu={handleContextMenu}
     onDrop={handleDrop}
+    onDragEnter={handleDragEnter}
+    onDragLeave={handleDragLeave}
   >
     <span styleName={isFolded
       ? 'folderList-item-name--folded' : 'folderList-item-name'
@@ -54,6 +58,8 @@ StorageItem.propTypes = {
   folderName: PropTypes.string.isRequired,
   folderColor: PropTypes.string,
   isFolded: PropTypes.bool.isRequired,
+  handleDragEnter: PropTypes.func.isRequired,
+  handleDragLeave: PropTypes.func.isRequired,
   noteCount: PropTypes.number
 }
 

browser/main/SideNav/StorageItem.js

@@ -132,7 +132,19 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleDragEnter (e) {
+    e.dataTransfer.setData("defaultColor", e.target.style.backgroundColor)
+    e.target.style.backgroundColor = "rgba(129, 130, 131, 0.08)"
+  }
+
+  handleDragLeave (e) {
+    e.target.style.opacity = "1"
+    e.target.style.backgroundColor = e.dataTransfer.getData("defaultColor")
+  }
+
   handleDrop (e, storage, folder, dispatch, location) {
+    e.target.style.opacity = "1"
+    e.target.style.backgroundColor = e.dataTransfer.getData("defaultColor")
     const noteData = JSON.parse(e.dataTransfer.getData("note"))
     if (folder.key !== noteData.folder) {
       dataApi
@@ -197,6 +209,8 @@ class StorageItem extends React.Component {
           isFolded={isFolded}
           noteCount={noteCount}
           handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)}
+          handleDragEnter={this.handleDragEnter}
+          handleDragLeave={this.handleDragLeave}
         />
       )
     })