diff --git a/README.md b/README.md
index 7f81d29..a3db35b 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ Visit [dawnlabs.io/carbon](http://dawnlabs.io/carbon) or read [our post](TODO) t
#### Import
There are a few different ways to import code into Carbon:
-- Drag a file onto the editor
+- Drop a file onto the editor
- Append a GitHub gist id to the url (e.g. `www.dawnlabs.io/carbon/GIST_ID_HERE`)
- Paste your code directly
diff --git a/components/Button.js b/components/Button.js
index ae05adf..0970386 100644
--- a/components/Button.js
+++ b/components/Button.js
@@ -2,23 +2,26 @@ import React from 'react'
import { COLORS } from '../lib/constants'
export default (props) => (
-
{props.title}
-
+
)
diff --git a/components/Header.js b/components/Header.js
index a70cc26..905ff3c 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -5,7 +5,7 @@ const Header = ({ enableHeroText }) => (
- { enableHeroText ? (
Create and share beautiful images of your source code.
Start typing, or drag a file into the text area to get started.
) : null }
+ { enableHeroText ? (
Create and share beautiful images of your source code.
Start typing, or drop a file into the text area to get started.
) : null }
+
+)
+
+export default Overlay
diff --git a/components/ReadFileDropContainer.js b/components/ReadFileDropContainer.js
index 7b6d574..1b72a9e 100644
--- a/components/ReadFileDropContainer.js
+++ b/components/ReadFileDropContainer.js
@@ -12,8 +12,17 @@ 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)
+const ReadFileDropContainer = props => props.connectDropTarget(
+
+ {
+ React.Children.only(React.Children.map(
+ props.children,
+ child => React.cloneElement(child, { isOver: props.isOver }),
+ )[0])
+ }
+
+)
export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)
diff --git a/components/style/Reset.js b/components/style/Reset.js
index 64e0b62..3348cb8 100644
--- a/components/style/Reset.js
+++ b/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%;
diff --git a/package.json b/package.json
index b0fc64f..b5ae192 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
"scripts": {
"dev": "node server.js",
"build": "next build",
- "start": "NODE_ENV=production node server.js"
+ "start": "NODE_ENV=production node server.js",
+ "deploy": "now --public"
},
"dependencies": {
"axios": "^0.16.2",
diff --git a/pages/about.js b/pages/about.js
index 1e11142..2768b8c 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -16,7 +16,7 @@ export default () => (
Import
There are a few different ways to import code into Carbon:
- - Drag a file into the editor
+ - Drop a file into the editor
- Append a GitHub gist id to the url (example)
- Paste your code directly
@@ -43,6 +43,7 @@ export default () => (
ul {
list-style-position: inside;
+ list-style-type: circle;
}
.about {
diff --git a/pages/editor.js b/pages/editor.js
index 4d2d0af..be69018 100644
--- a/pages/editor.js
+++ b/pages/editor.js
@@ -6,6 +6,7 @@ import domtoimage from 'dom-to-image'
import Page from '../components/Page'
import ReadFileDropContainer from '../components/ReadFileDropContainer'
import Toolbar from '../components/Toolbar'
+import Overlay from '../components/Overlay'
import Carbon from '../components/Carbon'
import api from '../lib/api'
import { THEMES, DEFAULT_LANGUAGE, COLORS, DEFAULT_CODE } from '../lib/constants'
@@ -86,26 +87,28 @@ class Editor extends React.Component {
render () {
return (
- this.setState({ code: droppedContent })}
- >
-
- this.setState({ background: color })}
- onThemeChange={theme => this.setState({ theme: theme.id })}
- onLanguageChange={language => this.setState({ language: language.module })}
- onSettingsChange={(key, value) => this.setState({ [key]: value })}
- bg={this.state.background}
- enabled={this.state}
- />
-
- {this.state.code}
-
-
-
+
+ this.setState({ background: color })}
+ onThemeChange={theme => this.setState({ theme: theme.id })}
+ onLanguageChange={language => this.setState({ language: language.module })}
+ onSettingsChange={(key, value) => this.setState({ [key]: value })}
+ bg={this.state.background}
+ enabled={this.state}
+ />
+ this.setState({ code: droppedContent })}
+ >
+
+
+ {this.state.code}
+
+
+
+