add file drop overlay

components/ReadFileDropContainer.js

@@ -12,8 +12,53 @@ const spec = {
   }
 }
 
-const collect = connect => ({ connectDropTarget: connect.dropTarget() })
+const collect = (connect, monitor) => ({ connectDropTarget: connect.dropTarget(), isOver: monitor.isOver() })
 
-const ReadFileDropContainer = props => props.connectDropTarget(props.children)
+class ReadFileDropContainer extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { isFileOver: false }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!this.props.isOver && nextProps.isOver) {
+      this.setState({ isFileOver: true })
+    }
+
+    if (this.props.isOver && !nextProps.isOver) {
+      this.setState({ isFileOver: false })
+    }
+  }
+
+  render() {
+    const content = (
+      <div className="dnd-container">
+        { this.state.isFileOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
+        { this.props.children }
+        <style jsx>{`
+          .dnd-container {
+            position: relative;
+          }
+
+          .dnd-overlay {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            width: 100%;
+            height: 100%;
+            z-index: 999;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: rgba(0, 0, 0, 0.85);
+          }
+        `}</style>
+      </div>
+    )
+
+    return this.props.connectDropTarget(content)
+  }
+}
 
 export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)

components/style/Reset.js

@@ -92,7 +92,7 @@ export default () =>
     .link {
       color: #fff;
       text-decoration: none;
-      padding-bottom: 2px;
+      padding-bottom: 3px;
       background: linear-gradient(to right, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 0.7) 100%);
       background-size: 1px 1px;
       background-position: 0 100%;

pages/about.js

@@ -43,6 +43,7 @@ export default () => (
 
       ul {
         list-style-position: inside;
+        list-style-type: circle;
       }
 
       .about {