Adding some more controls & other clean-up

website/src/ui/Button.js

@@ -0,0 +1,19 @@
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import style from './Button.style'
+
+class Button extends Component {
+  static propTypes = {
+    submit: PropTypes.string,
+    children: PropTypes.node
+  }
+
+  render() {
+    return (
+      <button type={this.props.submit ? 'submit' : 'button'} style={style.base}>{this.props.children}</button>
+    )
+  }
+}
+
+export default Radium(Button)

website/src/ui/Button.style.js

@@ -0,0 +1,17 @@
+export default {
+  base: {
+    borderRadius: '10px',
+    fontFamily: 'Arial',
+    color: '#ffffff',
+    fontSize: '20px',
+    background: '#3498db',
+    padding: '10px 20px 10px 20px',
+    textDecoration: 'none',
+    outline: 'none',
+
+    ':hover': {
+      background: '#3cb0fd',
+      textDecoration: 'none'
+    }
+  }
+}

website/src/ui/Checkbox.js

@@ -0,0 +1,33 @@
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import style from './Checkbox.style'
+import { reactAutoBind } from 'auto-bind2'
+
+class Checkbox extends Component {
+  static propTypes = {
+    value: PropTypes.bool
+  }
+
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+    this.state = {
+      checked: props.value
+    }
+  }
+
+  onClick() {
+    this.setState({ checked: !this.state.checked })
+  }
+
+  render() {
+    return (
+      <div style={[style.checkbox, !this.state.checked && style.checkboxUnchecked]} onClick={this.onClick}>
+        <div style={[style.checkmark, !this.state.checked && style.checkmarkUnchecked]} />
+      </div>
+    )
+  }
+}
+
+export default Radium(Checkbox)

website/src/ui/Checkbox.style.js

@@ -0,0 +1,36 @@
+export default {
+  checkbox: {
+    cursor: 'pointer',
+    position: 'relative',
+    backgroundColor: '#2196F3',
+    top: 0,
+    left: 0,
+    height: 25,
+    width: 25
+  },
+
+  checkboxUnchecked: {
+    backgroundColor: '#E0E0E0',
+    ':hover': {
+      backgroundColor: '#C0C0C0'
+    }
+  },
+
+  checkmark: {
+    position: 'absolute',
+    display: 'block',
+    content: '',
+    left: 10,
+    top: 5,
+    width: 6,
+    height: 12,
+    borderStyle: 'solid',
+    borderColor: '#FFFFFF',
+    borderWidth: '0 3px 3px 0',
+    transform: 'rotate(45deg)'
+  },
+
+  checkmarkUnchecked: {
+    display: 'none'
+  }
+}

website/src/ui/HolyGrail.js

@@ -0,0 +1,54 @@
+import Radium from 'radium'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import style from './HolyGrail.style.js'
+
+class HolyGrail extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render() {
+    return (
+      <div style={style.base}>{this.props.children}</div>
+    )
+  }
+}
+
+HolyGrail.Header = Radium(class HolyGrailHeader extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render() {
+    return (
+      <div style={style.header}>{this.props.children}</div>
+    )
+  }
+})
+
+HolyGrail.Footer = Radium(class HolyGrailFooter extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render() {
+    return (
+      <div style={style.footer}>{this.props.children}</div>
+    )
+  }
+})
+
+HolyGrail.Body = Radium(class HolyGrailBody extends Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render() {
+    return (
+      <div style={style.body}>{this.props.children}</div>
+    )
+  }
+})
+
+export default Radium(HolyGrail)

website/src/ui/HolyGrail.style.js

@@ -0,0 +1,19 @@
+export default {
+  base: {
+    display: 'flex',
+    minHeight: '100vh',
+    flexDirection: 'column'
+  },
+  body: {
+    display: 'flex',
+    flexGrow: 1
+  },
+  header: {
+    backgroundColor: '#FAFAFA',
+    borderBottom: '1px solid #B2B2B2'
+  },
+  footer: {
+    backgroundColor: '#FAFAFA',
+    borderTop: '1px solid #B2B2B2'
+  }
+}

website/src/ui/Input.js

@@ -0,0 +1,19 @@
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import style from './Input.style'
+
+class Input extends Component {
+  static propTypes = {
+    hidden: PropTypes.bool,
+    children: PropTypes.node
+  }
+
+  render() {
+    return (
+      <input type={this.props.hidden ? 'password' : 'text'} style={style.base}>{this.props.children}</input>
+    )
+  }
+}
+
+export default Radium(Input)

website/src/ui/Input.style.js

@@ -0,0 +1,18 @@
+export default {
+  base: {
+    padding: '5px',
+    fontSize: '16px',
+    borderWidth: '1px',
+    borderColor: '#b2b2b2',
+    backgroundColor: '#ffffff',
+    color: '#000000',
+    borderStyle: 'solid',
+    borderRadius: '5px',
+    // boxShadow: '0px 0px 0px rgba(66,66,66,.75)'
+    // textShadow: 'undefined 0px 0px 5px px rgba(66,66,66,.75)'
+
+    ':focus': {
+      outline: 'none'
+    }
+  }
+}

website/src/ui/index.js

@@ -0,0 +1,4 @@
+export { default as Button } from './Button'
+export { default as Checkbox } from './Checkbox'
+export { default as Input } from './Input'
+export { default as HolyGrail } from './HolyGrail'