Fix a bunch of layout issues

website/src/ui/Box.js

@@ -0,0 +1,29 @@
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+class Box extends Component {
+  static propTypes = {
+    borderTop: PropTypes.number,
+    borderBottom: PropTypes.string,
+    borderRight: PropTypes.string,
+    borderLeft: PropTypes.string,
+    border: PropTypes.string,
+    color: PropTypes.string,
+    children: PropTypes.node,
+  }
+
+  render() {
+    const { children, color, borderTop, borderBottom, borderLeft, borderRight, border } = this.props
+
+    return (
+      <div style={[
+        color && { backgroundColor: color },
+        border ? { border } : { borderTop, borderBottom, borderLeft, borderRight }]}>
+        {children}
+      </div>
+    )
+  }
+}
+
+export default Radium(Box)

website/src/ui/Checkbox.style.js

@@ -22,8 +22,8 @@ export default {
     position: 'absolute',
     display: 'block',
     content: '',
-    left: 10,
-    top: 5,
+    left: 8,
+    top: 4,
     width: 6,
     height: 12,
     borderStyle: 'solid',

website/src/ui/Column.js

@@ -0,0 +1,37 @@
+import Radium from 'radium'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+class Column extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+  }
+
+  render() {
+    const { children, minHeight } = this.props
+
+    return (
+      <div style={{ display: 'flex', minHeight, flexDirection: 'column' }}>{children}</div>
+    )
+  }
+}
+
+Column.Item = Radium(class StackLayoutItem extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    grow: PropTypes.bool
+  }
+
+  render() {
+    const { children, grow, minHeight } = this.props
+    const flexGrow = grow ? 1 : null
+
+    return (
+      <div style={{ minHeight, flexGrow }}>{children}</div>
+    )
+  }
+})
+
+export default Radium(Column)

website/src/ui/Dimmer.js

@@ -6,7 +6,8 @@ import { reactAutoBind } from 'auto-bind2'
 
 export class Dimmer extends Component {
   static propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node,
+    active: PropTypes.bool
   }
 
   constructor(props) {
@@ -19,11 +20,11 @@ export class Dimmer extends Component {
   }
 
   render() {
-    return (
+    return this.props.active ? (
       <div style={style.dimmer} onClick={this.preventPropagation}>
         {this.props.children}
       </div>
-    )
+    ) : null
   }
 }
 

website/src/ui/HolyGrail.js

@@ -1,54 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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/Modal.js

@@ -1,30 +1,22 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import style from './Modal.style'
-import { reactAutoBind } from 'auto-bind2'
 import Radium from 'radium'
+import { Dimmer } from '../ui'
 
 class Modal extends Component {
   static propTypes = {
-    children: PropTypes.node
-  }
-
-  constructor(props) {
-    super(props)
-    reactAutoBind(this)
-  }
-
-  preventPropagation(e) {
-    e.stopPropagation()
+    children: PropTypes.node,
+    open: PropTypes.bool
   }
 
   render() {
     return (
-      <div style={style.dimmer} onClick={this.preventPropagation}>
+      <Dimmer active={this.props.open}>
         <div style={style.modal}>
           {this.props.children}
         </div>
-      </div>
+      </Dimmer>
     )
   }
 }

website/src/ui/Row.js

@@ -0,0 +1,37 @@
+import Radium from 'radium'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+class Row extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
+  }
+
+  render() {
+    const { children, minWidth } = this.props
+
+    return (
+      <div style={{ display: 'flex', minWidth, flexDirection: 'row' }}>{children}</div>
+    )
+  }
+}
+
+Row.Item = Radium(class RowLayoutItem extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    grow: PropTypes.bool,
+  }
+
+  render() {
+    const { children, grow, minWidth } = this.props
+    const flexGrow = grow ? 1 : null
+
+    return (
+      <div style={{ minWidth, flexGrow }}>{children}</div>
+    )
+  }
+})
+
+export default Radium(Row)

website/src/ui/RowLayout.js

@@ -1,31 +0,0 @@
-import Radium from 'radium'
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-class RowLayout extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
-  }
-
-  render() {
-    return (
-      <div style={{ display: 'flex', minWidth: this.props.width, flexDirection: 'row' }}>{this.props.children}</div>
-    )
-  }
-}
-
-RowLayout.Item = Radium(class RowLayoutItem extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
-  }
-
-  render() {
-    return (
-      <div style={[ this.props.width ? { minWidth: this.props.width } : { flexGrow: 1 } ]}>{this.props.children}</div>
-    )
-  }
-})
-
-export default Radium(RowLayout)

website/src/ui/StackLayout.js

@@ -1,31 +0,0 @@
-import Radium from 'radium'
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-class StackLayout extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
-  }
-
-  render() {
-    return (
-      <div style={{ display: 'flex', minHeight: this.props.height, flexDirection: 'column' }}>{this.props.children}</div>
-    )
-  }
-}
-
-StackLayout.Item = Radium(class StackLayoutItem extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
-  }
-
-  render() {
-    return (
-      <div style={[ this.props.height ? { minHeight: this.props.height } : { flexGrow: 1 } ]}>{this.props.children}</div>
-    )
-  }
-})
-
-export default Radium(StackLayout)

website/src/ui/Text.js

@@ -7,11 +7,13 @@ class Text extends Component {
   static propTypes = {
     size: PropTypes.string,
     margin: PropTypes.number,
-    children: PropTypes.node
+    children: PropTypes.node,
+    tone: PropTypes.string
   }
 
   static defaultProps = {
     size: 'medium',
+    tone: 'normal',
     margin: 0
   }
 
@@ -21,7 +23,8 @@ class Text extends Component {
         display: 'inline-block',
         fontSize: fontInfo.size[this.props.size],
         fontFamily: fontInfo.family,
-        margin: this.props.margin
+        margin: this.props.margin,
+        color: fontInfo.color[this.props.tone],
       }}>{this.props.children}</span>
     )
   }

website/src/ui/index.js

@@ -1,3 +1,4 @@
+export { default as Box } from './Box'
 export { default as Button } from './Button'
 export { default as Checkbox } from './Checkbox'
 export { default as Input } from './Input'
@@ -11,6 +12,5 @@ export { default as Dropdown } from './Dropdown'
 export { default as Modal } from './Modal'
 export { default as Dimmer } from './Dimmer'
 export { default as Loader } from './Loader'
-export { default as HolyGrail } from './HolyGrail'
-export { default as RowLayout } from './RowLayout'
-export { default as StackLayout } from './StackLayout'
+export { default as Row } from './Row'
+export { default as Column } from './Column'

website/src/ui/style.js

@@ -1,6 +1,7 @@
 export const colorInfo = {
   text: '#000000',
   alertText: '#FF0000',
+  grayText: '#B0B0B0',
   buttonBackground: '#3498DB',
   buttonBackgroundHover: '#3CB0FD'
 }
@@ -14,6 +15,7 @@ export const fontInfo = {
   },
   color: {
     'normal': colorInfo.text,
-    'alert': colorInfo.alertText
+    'alert': colorInfo.alertText,
+    'dimmed': colorInfo.grayText,
   }
 }