node && node.appendChild(this.props.stats.dom)} />
-
+
@@ -67,6 +76,9 @@ class Overview extends React.Component {
+
+
+
)
@@ -75,8 +87,8 @@ class Overview extends React.Component {
Overview.propTypes = {
stats: PropTypes.shape({
- dom: PropTypes.object
- }).isRequired
+ dom: PropTypes.object,
+ }).isRequired,
}
export default Overview
diff --git a/src/components/PanelDragger/index.js b/src/components/PanelDragger/index.js
index b4828c80..719a0a74 100644
--- a/src/components/PanelDragger/index.js
+++ b/src/components/PanelDragger/index.js
@@ -23,7 +23,6 @@ const Wrapper = styled.div`
}
`
class PanelDragger extends React.Component {
-
constructor (props) {
super(props)
@@ -44,31 +43,26 @@ class PanelDragger extends React.Component {
document.addEventListener('mouseup', onMouseUp)
}
- componentDidMount () {
- // Force repaint after mounting to fix up components
- setTimeout(() => {
- uiEventEmitter.emit('repaint')
- }, 1000)
- }
-
handleMouseMove (e) {
+ uiEventEmitter.emit('panel-resize-start')
+
const diff = (e.screenX - this.pos) / window.innerWidth * 100
const newVal = Math.max(0, Math.min(100, this.currentPos + diff))
this.props.onHandleDrag(newVal)
- setTimeout(() => {
+ clearTimeout(this.dragDebounce)
+ this.dragDebounce = setTimeout(() => {
uiEventEmitter.emit('repaint')
- })
+ }, 50)
}
render () {
return (
)
}
-
}
export default PanelDragger
PanelDragger.propTypes = {
onHandleDrag: PropTypes.func.isRequired,
- position: PropTypes.number.isRequired
+ position: PropTypes.number.isRequired,
}
diff --git a/src/components/Param/index.js b/src/components/Param/index.js
deleted file mode 100644
index 7c69ab72..00000000
--- a/src/components/Param/index.js
+++ /dev/null
@@ -1,224 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ParamBar from '../../containers/ParamBar'
-import Node from '../Node'
-import styled, { ThemeProvider } from 'styled-components'
-import inputIcon from '../../assets/icons/input.icon.txt'
-import macroIcon from '../../assets/icons/macro.icon.txt'
-import IconComponent from '../Icon'
-import theme from '../../utils/theme'
-import uiEventEmitter from '../../utils/uiEventEmitter'
-
-const Wrapper = styled.div`
- width: 100%;
-`
-
-const Inner = styled(Node)`
- width: 100%;
- color: ${theme.textColorLight1};
- fill: ${theme.textColorLight1};
-
- ${props => props.isOpen && `
- border-bottom: 0;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- border-color: white;
- `};
-
- ${props => props.isActive && `
- border-color: ${theme.actionColor1};
- `}
-`
-
-const BarCol = styled.div`
- width: 100%;
- position: relative;
- overflow: hidden;
- margin-bottom: 0.25rem;
-`
-
-const Top = styled.div`
- padding: 0.5rem;
-`
-
-const Row = styled.div`
- display: flex;
- flex-direction: column;
-`
-
-const Bottom = styled.div`
- align-items: center;
- padding: 0.5rem 0.25rem 0.5rem 0.5rem;
- border: 1px solid white;
- position: absolute;
- left: 0.25rem;
- right: 0.25rem;
- margin-top: 0.5rem;
-
- ${props => props.isActive && `
- border-color: ${theme.actionColor1};
- `}
-`
-
-const Padder = styled.div`
- height: calc(${props => props.height}px + 0.5rem);
-
- &:after {
- display: block;
- position: relative;
- z-index: 2;
- content: "";
- border: 1px solid white;
- border-top-style: dashed;
- border-bottom: 0;
- height: calc(0.5rem + 2px);
- background: ${theme.bgColorDark1};
-
- ${props => props.isActive && `
- border-color: ${theme.actionColor1};
- `}
- }
-`
-
-const Title = styled.div`
- color: ${theme.textColorLight1};
- text-transform: uppercase;
- height: 1rem;
- font-size: 0.6rem;
- z-index: 1;
- position: absolute;
- top: 0.25rem;
- left: 0.2rem;
- width: 1000px;
- pointer-events: none;
-`
-
-const Icon = styled(IconComponent)`
- width: 0.6rem;
- height: 0.6rem;
- margin-right: 0.1rem;
-`
-const Info = styled.div`
- display: flex;
- justify-content: space-between;
- font-size: 0.6rem;
- cursor: pointer;
- text-transform: uppercase;
-
- > span {
- display: flex;
- }
-
- &:hover {
- color: ${theme.actionColor1};
- fill: ${theme.actionColor1};
- }
-`
-
-const IconInfo = styled.div`
- display: flex;
- margin-left: auto;
-
- > span {
- display: flex;
- margin-left: 0.3rem;
- }
-`
-
-class Param extends React.Component {
- constructor () {
- super()
- this.state = {
- bottomHeight: 0
- }
- this.calculateHeights = this.calculateHeights.bind(this)
-
- uiEventEmitter.on('repaint', this.calculateHeights)
- }
-
- componentDidMount () {
- this.calculateHeights()
- }
-
- componentWillUnmount () {
- uiEventEmitter.removeListener('repaint', this.calculateHeights)
- }
-
- componentDidUpdate (prevProps, prevState) {
- if (
- (prevProps.isOpen === false && this.props.isOpen === true) ||
- (prevProps.numInputs !== this.props.numInputs) ||
- (prevProps.numMacros !== this.props.numMacros)
- ) {
- this.calculateHeights()
- }
- }
-
- calculateHeights () {
- if (this.bottomEl) {
- this.setState({
- bottomHeight: this.bottomEl.offsetHeight
- })
- }
- }
-
- render () {
- const { title, nodeId, isOpen, onOpenClick, onParamBarClick,
- children, numInputs, numMacros, inputLinkTitle, isActive, type } = this.props
-
- return (
-
-
-
-
-
-
-
- {title}
-
-
-
-
- {inputLinkTitle && {inputLinkTitle}}
-
- {numInputs !== undefined && ({numInputs})}
- {numMacros !== undefined && ({numMacros})}
-
-
-
-
-
- {isOpen &&
-
-
{ this.bottomEl = node }}>
- {children}
-
-
-
- )
- }
-
-}
-
-Param.propTypes = {
- title: PropTypes.string.isRequired,
- nodeId: PropTypes.string.isRequired,
- isOpen: PropTypes.bool,
- isActive: PropTypes.bool,
- onOpenClick: PropTypes.func.isRequired,
- onParamBarClick: PropTypes.func,
- children: PropTypes.node,
- numInputs: PropTypes.number,
- numMacros: PropTypes.number,
- inputLinkTitle: PropTypes.string,
- type: PropTypes.string
-}
-
-export default Param
diff --git a/src/components/ParamRange/index.js b/src/components/ParamRange/index.js
new file mode 100644
index 00000000..94bfa401
--- /dev/null
+++ b/src/components/ParamRange/index.js
@@ -0,0 +1,83 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { Field } from 'redux-form'
+import Row from '../Row'
+import theme from '../../utils/theme'
+import Button from '../Button'
+
+const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ font-size: 0.7rem;
+ padding: 0;
+ margin-bottom: .5rem;
+
+ input {
+ font-size: .7rem;
+ display: block;
+ border: 1px solid #aaa;
+ background: ${theme.bgColorDark2};
+ color: white;
+ padding: 0.1rem;
+ outline: none;
+ max-width: 5rem;
+
+ &:focus {
+ border-color: white;
+ }
+ }
+`
+
+const Col = styled.div`
+ margin-right: 1rem;
+`
+
+class ParamRange extends React.Component {
+ constructor (props) {
+ super(props)
+
+ this.handleKeyPress = this.handleKeyPress.bind(this)
+ this.handleBlur = this.handleBlur.bind(this)
+ }
+
+ handleKeyPress (e) {
+ if (e.key === 'Enter') { this.props.handleSubmit() }
+ }
+
+ handleBlur () {
+ this.props.handleSubmit()
+ }
+
+ render () {
+ return (
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
+
+ParamRange.propTypes = {
+ handleSubmit: PropTypes.func,
+ onResetClick: PropTypes.func.isRequired,
+}
+
+export default ParamRange
diff --git a/src/components/ParamValueForm/index.js b/src/components/ParamValueForm/index.js
index 4af02571..66d12c3d 100644
--- a/src/components/ParamValueForm/index.js
+++ b/src/components/ParamValueForm/index.js
@@ -34,7 +34,7 @@ class ParamvalueForm extends React.Component {
ParamvalueForm.propTypes = {
handleSubmit: PropTypes.func.isRequired,
- onBlur: PropTypes.func.isRequired
+ onBlur: PropTypes.func.isRequired,
}
export default ParamvalueForm
diff --git a/src/components/ProjectDetails/index.js b/src/components/ProjectDetails/index.js
index 4d7d53aa..d0201450 100644
--- a/src/components/ProjectDetails/index.js
+++ b/src/components/ProjectDetails/index.js
@@ -16,7 +16,7 @@ const Error = styled.div`
`
const Menu = ({
- filePath, errorMessage
+ filePath, errorMessage,
}) => {
return (
@@ -28,7 +28,7 @@ const Menu = ({
Menu.propTypes = {
filePath: PropTypes.string,
- errorMessage: PropTypes.string
+ errorMessage: PropTypes.string,
}
export default Menu
diff --git a/src/components/PropertiesPanel/index.js b/src/components/PropertiesPanel/index.js
new file mode 100644
index 00000000..d666ec3e
--- /dev/null
+++ b/src/components/PropertiesPanel/index.js
@@ -0,0 +1,81 @@
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import MenuPanel from '../../components/MenuPanel'
+import { PanelContext } from '../../context'
+import theme from '../../utils/theme'
+
+const List = styled.nav`
+ display: flex;
+`
+
+const Item = styled.div`
+ margin-right: 0.5rem;
+
+
+ span:last-child {
+ margin-left: 0.5rem;
+ }
+
+ &:last-child {
+ span:last-child {
+ display: none;
+ }
+ }
+
+ ${props => props.isClickable &&
+ `cursor: pointer;
+ &:hover {
+ span:first-child {
+ color: ${theme.actionColor1}
+ }
+ }`
+}
+
+`
+
+const PropertiesPanel = ({ isOpen, nodeId, Component, onCloseClick, panelId, titleItems, onTitleItemClick }) => {
+ const titleContent =
+ {titleItems.map((item, index) => {
+ const isClickable = item.type !== 'inputLink' && index !== titleItems.length - 1
+ const onClick = isClickable ? function () { onTitleItemClick(item.id) } : undefined
+
+ return (
+ -
+ {item.title} {'›'}
+
+ )
+ })}
+
+
+ return (
+
+ {isOpen &&
+
+
+
+ }
+
+ )
+}
+
+PropertiesPanel.propTypes = {
+ nodeId: PropTypes.string,
+ isOpen: PropTypes.bool,
+ Component: PropTypes.func,
+ onCloseClick: PropTypes.func,
+ panelId: PropTypes.string,
+ titleItems: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string,
+ title: PropTypes.string,
+ })
+ ).isRequired,
+ onTitleItemClick: PropTypes.func.isRequired,
+}
+
+export default PropertiesPanel
diff --git a/src/components/Revealer/index.js b/src/components/Revealer/index.js
new file mode 100644
index 00000000..f2381f07
--- /dev/null
+++ b/src/components/Revealer/index.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import IconComponent from '../Icon'
+import downIcon from '../../assets/icons/down.icon.txt'
+import theme from '../../utils/theme'
+
+const Wrapper = styled.div`
+
+`
+
+const Header = styled.a`
+ display: flex;
+ color: ${theme.textColorLight1};
+ fill: ${theme.textColorLight1};
+ cursor: pointer;
+ &:hover {
+ color: ${theme.actionColor1};
+ fill: ${theme.actionColor1};
+ }
+`
+
+const Body = styled.div`
+ padding-top: 0.5rem;
+`
+
+const Icon = styled(IconComponent)`
+ transform: rotate(${props => props.isOpen ? '0deg' : '-90deg'});
+`
+
+const Revealer = ({ children, isOpen, title, onHeaderClick, className }) => (
+
+
+ {
+ isOpen &&
+
+ {children}
+
+ }
+
+)
+
+Revealer.propTypes = {
+ children: PropTypes.node.isRequired,
+ isOpen: PropTypes.bool,
+ title: PropTypes.string.isRequired,
+ onHeaderClick: PropTypes.func.isRequired,
+ className: PropTypes.string,
+}
+
+export default Revealer
diff --git a/src/components/SceneManager/index.js b/src/components/SceneManager/index.js
index 888c2aac..f1e67cfe 100644
--- a/src/components/SceneManager/index.js
+++ b/src/components/SceneManager/index.js
@@ -1,11 +1,11 @@
import React from 'react'
import PropTypes from 'prop-types'
-import ButtonComponent from '../Button'
+import Button from '../Button'
import RowComponent from '../Row'
import styled from 'styled-components'
import SceneThumb from '../SceneThumb'
import SceneThumbContainer from '../../containers/SceneThumb'
-import InputLinkMidiControl from '../../containers/InputLinkMidiControl'
+import ButtonWithInputIcons from '../ButtonWithInputIcons'
import theme from '../../utils/theme'
const Wrapper = styled.nav`
@@ -16,13 +16,9 @@ const Row = styled(RowComponent)`
flex-wrap: wrap;
`
-const Button = styled(ButtonComponent)`
-`
-
const Thumbs = styled.div`
display: flex;
flex-wrap: wrap;
- margin: 0 -0.25rem 0.5rem;
`
const Panel = styled.div`
@@ -34,16 +30,6 @@ const Panel = styled.div`
font-size: 0.7rem;
text-transform: uppercase;
}
-
- svg {
- fill: #fff;
- opacity: 0.8;
- margin-left: 0.2rem;
-
- &:hover {
- opacity: 1;
- }
- }
`
const Col = styled.div`
@@ -53,17 +39,17 @@ const Col = styled.div`
margin-bottom: 0.5rem;
`
-const Item = ({ title, onClick, linkableActionId, color }) =>
+const ActionButton = (props) => (
-
-
+
+)
const SceneManager = (
{
items, onAddClick, currentScene, onDeleteClick, onRenameClick, onChannelClick,
- onClearClick, onActiveClick, onOppositeClick
- }
+ onClearClick, onActiveClick, onOppositeClick,
+ }
) => {
const la = currentScene && currentScene.linkableActionIds
return (
@@ -73,8 +59,8 @@ const SceneManager = (
- ))}
+ />
+ ))}
+
{currentScene &&
@@ -82,33 +68,48 @@ const SceneManager = (
Current scene: {currentScene.title}
- - { onChannelClick(currentScene.id, 'A') }}
color='channelA'
linkableActionId={la.addToA}
- />
-
-
+ Add to A
+
+
+ { onChannelClick(currentScene.id, 'B') }}
color='channelB'
linkableActionId={la.addToB}
- />
-
-
+ Add to B
+
+
+ { onActiveClick(currentScene.id) }}
linkableActionId={la.addToActive}
- />
- -
+ Add to Active
+
+
+ { onOppositeClick(currentScene.id) }}
linkableActionId={la.addToOpposite}
- />
- -
+ Add to Opposite
+
+
+ { onClearClick(currentScene.id) }}
linkableActionId={la.clear}
- />
+ panelId='overview'
+ >
+ Clear
+
+
- }
+ }
)
}
@@ -139,16 +140,9 @@ SceneManager.propTypes = {
items: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string,
- title: PropTypes.string
+ title: PropTypes.string,
})
- )
-}
-
-Item.propTypes = {
- title: PropTypes.string.isRequired,
- onClick: PropTypes.func.isRequired,
- color: PropTypes.string,
- linkableActionId: PropTypes.string.isRequired
+ ),
}
export default SceneManager
diff --git a/src/components/SceneThumb/index.js b/src/components/SceneThumb/index.js
index ca5f03b4..e4f1990d 100644
--- a/src/components/SceneThumb/index.js
+++ b/src/components/SceneThumb/index.js
@@ -58,7 +58,7 @@ const SceneThumb = (props) => {
SceneThumb.propTypes = {
to: PropTypes.string,
children: PropTypes.string.isRequired,
- channel: PropTypes.string
+ channel: PropTypes.string,
}
export default SceneThumb
diff --git a/src/components/Select/index.js b/src/components/Select/index.js
index edfd3c0f..83478bdc 100644
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
@@ -1,45 +1,137 @@
import React from 'react'
import PropTypes from 'prop-types'
-import ReactSelect from 'react-select'
import styled from 'styled-components'
-import Row from '../Row'
-import MidiButton from '../MidiButton'
-import SubNode from '../SubNode'
+import theme from '../../utils/theme'
+import downIcon from '../../assets/icons/down.icon.txt'
+import uiEventEmitter from '../../utils/uiEventEmitter'
-const SelectCol = styled.div`
- flex: 1;
+import { Manager, Reference, Popper } from 'react-popper'
+import Icon from '../Icon'
+
+const Button = styled.div`
+ height: 18px;
+ border: 1px solid ${theme.lineColor2};
+ padding: 0 0.125rem 0 0.25rem;
+ font-size: 11px;
+ overflow: hidden;
+ background-color: ${theme.bgColorDark3};
+ display: flex;
+ align-items: center;
+ position: relative;
+ border-color: ${props => props.isOpen ? 'white' : theme.lineColor2};
+ cursor: pointer;
+`
+
+const DownIcon = styled(Icon)`
+ width: 0.8rem;
+ height: 0.8rem;
+ fill: ${theme.lineColor2};
+ position: absolute;
+ right: 0;
+ background: ${theme.bgColorDark3};
+ z-index: 12;
+`
+
+const Option = styled.div`
+ cursor: pointer;
+ padding: 0.25rem 0.5rem;
+ font-size: 11px;
+ color: ${props => props.isActive ? 'white' : 'inherit'};
+ font-weight: ${props => props.isActive ? 'bold' : 'normal'};
+
+ &:hover {
+ color: white;
+ background-color: ${theme.bgColorDark2};
+ }
`
-const Select = ({ nodeId, options, onChange, title, value, onAssignClick }) => (
-
-
-
-
-
-
-
-
-)
+const Dropdown = styled.div`
+ background: black;
+ visibility: ${props => props.isVisible ? 'visible' : 'hidden'};
+ pointer-events: ${props => props.isVisible ? 'default' : 'none'};
+ z-index: 15;
+ border: 1px solid ${theme.lineColor2};
+ margin: 0.25rem;
+ min-width: 5rem;
+`
+
+class Select extends React.Component {
+ constructor (props) {
+ super(props)
+ this.repaint = this.repaint.bind(this)
+ }
+
+ componentDidMount () {
+ uiEventEmitter.on('repaint', this.repaint)
+ }
+
+ componentWillUnmount () {
+ uiEventEmitter.removeListener('repaint', this.repaint)
+ }
+
+ repaint () {
+ if (this.scheduleUpdate) this.scheduleUpdate()
+ }
+
+ render () {
+ const { onOpenClick, isOpen, options, onChange, buttonText, value } = this.props
+
+ return (
+
+
+ {({ ref }) => (
+
+ )}
+
+
+
+ {({ ref, style, placement, outOfBoundaries, scheduleUpdate }) => {
+ if (!this.scheduleUpdate) this.scheduleUpdate = scheduleUpdate
+
+ return (
+
+
+ {options.map(option =>
+
+ )}
+
+
+ )
+ }}
+
+
+ )
+ }
+}
Select.propTypes = {
- value: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.bool,
- PropTypes.number
- ]),
options: PropTypes.arrayOf(
PropTypes.object
),
onChange: PropTypes.func.isRequired,
- onAssignClick: PropTypes.func.isRequired,
- title: PropTypes.string.isRequired,
- nodeId: PropTypes.string.isRequired
+ onOpenClick: PropTypes.func.isRequired,
+ isOpen: PropTypes.bool,
+ buttonText: PropTypes.oneOfType([
+ PropTypes.string, PropTypes.number,
+ ]).isRequired,
+ value: PropTypes.oneOfType([
+ PropTypes.string, PropTypes.number, PropTypes.bool,
+ ]),
}
export default Select
diff --git a/src/components/SequencerGrid/index.js b/src/components/SequencerGrid/index.js
index 7bade89c..6c060598 100644
--- a/src/components/SequencerGrid/index.js
+++ b/src/components/SequencerGrid/index.js
@@ -32,7 +32,7 @@ class SequencerGrid extends React.Component {
constructor () {
super()
this.state = {
- mouseDown: false
+ mouseDown: false,
}
}
render () {
@@ -50,7 +50,7 @@ class SequencerGrid extends React.Component {
}}
onMouseDown={() => this.setState({ mouseDown: true })}
onMouseUp={() => this.setState({ mouseDown: false })}
- >
+ >
{index % 8 + 1}
))}
@@ -63,7 +63,7 @@ SequencerGrid.propTypes = {
items: PropTypes.arrayOf(
PropTypes.number
).isRequired,
- onStepClick: PropTypes.func.isRequired
+ onStepClick: PropTypes.func.isRequired,
}
export default SequencerGrid
diff --git a/src/components/Settings/index.js b/src/components/Settings/index.js
index 6d44807a..a25caaa5 100644
--- a/src/components/Settings/index.js
+++ b/src/components/Settings/index.js
@@ -4,6 +4,7 @@ import ViewHeader from '../ViewHeader'
import Input from '../Input'
import Row from '../Row'
import Col from '../Col'
+import Control from '../../containers/Control'
const Wrapper = styled.div`
display: flex;
@@ -15,6 +16,15 @@ const Settings = () => (
Settings
Perform live shows with your three.js creations.
@@ -14,26 +14,27 @@ Perform live shows with your three.js creations.
- ⏲️ Use MIDI clock input or tap tempo to get BPM
- 🌇🎚️🌋 Create many scenes and crossfade between them
- 🔍 Preview and compose scenes before displaying them to the audience
-- 🎛️ Use virtual MIDI banks to get the most out of your controllers
- 💡 Use MIDI Learn to quickly assign controls
+- 🔥 Hot reload your sketches on code changes, without affecting the rest of the scene
- ⚙️ Support for multiple MIDI control modes (abs, rel1, rel2, rel3)
- 📽️ Easily send output picture to external display
- 💾 Save / load using JSON project files
+## Hedron in action
+[](https://vimeo.com/310779808)
+[](https://www.netgrindgames.com/)
+
## Getting Started
### Install
Download the latest [release](https://github.com/nudibranchrecords/hedron/releases) or
[build from source](#build-from-source).
-### Load trippy example project
-1. If you haven't got the source code, download the latest example projects zip from the [releases](https://github.com/nudibranchrecords/hedron/releases) page.
-2. Choose "Load Existing Project". Locate the repo directory. Open `example-projects/trippy/project.json`
-3. An alert will appear. Choose "Locate Sketch Folder" and open `/example-projects/trippy/sketches`
+### Load example project
+1. Download the latest example projects zip from the [releases](https://github.com/nudibranchrecords/hedron/releases) page. If you've compiled from source, you'll already have the example projects, found in `/example-projects`.
+2. In Hedron, choose "Load Existing Project". Choose a folder from the example projects (`Logo` is a good start!) and open `project.json`.
4. Play it some music, tap BPM, experiment with the controls
-5. 😎
-
-Please note that if you're trying to do this from the source code, you'll want to run `yarn` from inside the `example-projects` directory to install dependencies.
+5. 👽
## User Guide
Head to the [User Guide](docs/user-guide/index.md) to learn how to use Hedron.
@@ -63,7 +64,7 @@ If you are having fun with Hedron, we'd love you to help with development. See t
Don't worry too much if the tests aren't passing, we can work on that together. :)
### Build From Source
-If you're making your own sketches, you'll probably want to build Hedron from source. You'll get lots of extra development benefits this way, such as auto refreshing on save.
+Building from source gives you some extra development features such as setting a default project that will always load on start.
1. Make sure [Node.js](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/docs/install) are installed on your machine.
2. Open terminal and run the commands below.
@@ -85,8 +86,6 @@ Run `yarn dist` to package up the app for best performance and no dev tools. Onc
|--|--|
| `yarn start` | Run in dev mode |
| `yarn dist` | Package the app |
-| `yarn dist:dev` | Run a production build without packaging. Behaves similarly to `yarn start` in that it will look for a default project and open Chrome DevTools automatically. However it will not do any sort of live refreshing. |
-| `yarn dist:example-projects`| Install dependencies for example projects, zip them and move them to the `dist` folder |
| `yarn lint` | Run linting |
| `yarn test` | Run pre deployment tests (including linting) |
| `yarn test:dev` | Run tests on file changes (does not include linting) |
diff --git a/src/assets/icons/down.icon.txt b/src/assets/icons/down.icon.txt
index 4fb1a169..2c5035b5 100644
--- a/src/assets/icons/down.icon.txt
+++ b/src/assets/icons/down.icon.txt
@@ -3,8 +3,6 @@
diff --git a/src/components/AboutOverlay/index.js b/src/components/AboutOverlay/index.js
new file mode 100644
index 00000000..4508b204
--- /dev/null
+++ b/src/components/AboutOverlay/index.js
@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import OverlayModal from '../OverlayModal'
+import styled from 'styled-components'
+import logo from '../../../build/icon.png'
+
+const { app } = require('electron').remote
+const isDevelopment = process.env.NODE_ENV !== 'production'
+const vNum = app.getVersion()
+
+// Version number comes out wrong in dev mode so we only display for production
+const modalTitle = isDevelopment ? 'Dev Mode' : `v${vNum}`
+
+const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ img {
+ max-width: 15rem;
+ margin-bottom: 1rem;
+ }
+
+ p:last-child {
+ margin: 0;
+ }
+`
+
+const Credits = styled.div`
+ border-top: 1px solid rgba(255,255,255,0.5);
+ width: 100%;
+ padding-top: 1rem;
+
+ p {
+ font-size: 0.8rem;
+ }
+`
+
+const AboutOverlay = ({ isVisible, onCancelClick }) => (
+