Login screen looking good

website/src/ui/Box.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react'
 
 class Box extends Component {
   static propTypes = {
-    borderTop: PropTypes.number,
+    borderTop: PropTypes.string,
     borderBottom: PropTypes.string,
     borderRight: PropTypes.string,
     borderLeft: PropTypes.string,

website/src/ui/Button.js

@@ -5,13 +5,15 @@ import style from './Button.style'
 
 class Button extends Component {
   static propTypes = {
-    submit: PropTypes.string,
-    children: PropTypes.node
+    submit: PropTypes.bool,
+    children: PropTypes.node,
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
   }
 
   render() {
+    const { children, submit, width } = this.props
     return (
-      <button type={this.props.submit ? 'submit' : 'button'} style={style.base}>{this.props.children}</button>
+      <button type={submit ? 'submit' : 'button'} style={[style.base, { width }]}>{children}</button>
     )
   }
 }

website/src/ui/Button.style.js

@@ -5,15 +5,14 @@ export default {
     borderRadius: '10px',
     fontFamily: fontInfo.family,
     color: '#FFFFFF',
-    fontSize: '20px',
+    fontSize: fontInfo.size['large'],
     background: colorInfo.buttonBackgroundHover,
-    padding: '10px 20px 10px 20px',
-    textDecoration: 'none',
+    verticalAlign: 'middle',
+    padding: '8px 15px 8px 15px',
     outline: 'none',
 
     ':hover': {
       background: colorInfo.buttonBackground,
-      textDecoration: 'none'
     }
   }
 }

website/src/ui/Checkbox.js

@@ -3,10 +3,12 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import style from './Checkbox.style'
 import { reactAutoBind } from 'auto-bind2'
+import { fontInfo } from './style'
 
 class Checkbox extends Component {
   static propTypes = {
-    value: PropTypes.bool
+    value: PropTypes.bool,
+    label: PropTypes.string,
   }
 
   constructor(props) {
@@ -23,8 +25,17 @@ class Checkbox extends Component {
 
   render() {
     return (
-      <div style={[style.checkbox, !this.state.checked && style.checkboxUnchecked]} onClick={this.onClick}>
-        <div style={[style.checkmark, !this.state.checked && style.checkmarkUnchecked]} />
+      <div>
+        <div style={[style.checkbox, !this.state.checked && style.checkboxUnchecked]} onClick={this.onClick}>
+          <div style={[style.checkmark, !this.state.checked && style.checkmarkUnchecked]} />
+        </div>
+        <span style={{
+          verticalAlign: 'top',
+          fontSize: fontInfo.size['medium'],
+          fontFamily: fontInfo.family,
+          color: fontInfo.color['normal'],
+          marginLeft: 10
+        }}>{this.props.label}</span>
       </div>
     )
   }

website/src/ui/Checkbox.style.js

@@ -2,13 +2,12 @@ import { colorInfo } from './style'
 
 export default {
   checkbox: {
+    display: 'inline-block',
     cursor: 'pointer',
     position: 'relative',
     backgroundColor: colorInfo.buttonBackground,
-    top: 0,
-    left: 0,
     height: 25,
-    width: 25
+    width: 25,
   },
 
   checkboxUnchecked: {
@@ -20,7 +19,6 @@ export default {
 
   checkmark: {
     position: 'absolute',
-    display: 'block',
     content: '',
     left: 8,
     top: 4,
@@ -34,5 +32,5 @@ export default {
 
   checkmarkUnchecked: {
     display: 'none'
-  }
+  },
 }

website/src/ui/Input.js

@@ -6,12 +6,17 @@ import style from './Input.style'
 class Input extends Component {
   static propTypes = {
     password: PropTypes.bool,
-    children: PropTypes.node
+    children: PropTypes.node,
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
   }
 
   render() {
+    let { children, width } = this.props
+
+    width = width || '100%'
+
     return (
-      <input type={this.props.password ? 'password' : 'text'} style={style.base}>{this.props.children}</input>
+      <input type={this.props.password ? 'password' : 'text'} style={[ { width }, style.base ]}>{children}</input>
     )
   }
 }

website/src/ui/Label.js

@@ -1,33 +0,0 @@
-import Radium from 'radium'
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import { fontInfo } from './style'
-
-class Label extends Component {
-  static propTypes = {
-    size: PropTypes.string,
-    color: PropTypes.string,
-    margin: PropTypes.number,
-    children: PropTypes.node
-  }
-
-  static defaultProps = {
-    size: 'medium',
-    color: 'normal',
-    margin: 0
-  }
-
-  render() {
-    return (
-      <label style={{
-        display: 'inline-block',
-        fontSize: fontInfo.size[this.props.size],
-        color: fontInfo.color[this.props.color],
-        fontFamily: fontInfo.family,
-        margin: this.props.margin
-      }}>{this.props.children}</label>
-    )
-  }
-}
-
-export default Radium(Label)

website/src/ui/Row.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 class Row extends Component {
   static propTypes = {
     children: PropTypes.node,
-    minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
+    minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
   }
 
   render() {
@@ -21,15 +21,16 @@ Row.Item = Radium(class RowLayoutItem extends Component {
   static propTypes = {
     children: PropTypes.node,
     minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
     grow: PropTypes.bool,
   }
 
   render() {
-    const { children, grow, minWidth } = this.props
+    const { children, grow, width, minWidth } = this.props
     const flexGrow = grow ? 1 : null
 
     return (
-      <div style={{ minWidth, flexGrow }}>{children}</div>
+      <div style={{ width, minWidth, flexGrow }}>{children}</div>
     )
   }
 })

website/src/ui/index.js

@@ -5,7 +5,6 @@ export { default as Input } from './Input'
 export { default as Image } from './Image'
 export { default as Text } from './Text'
 export { default as Link } from './Link'
-export { default as Label } from './Label'
 export { default as Icon } from './Icon'
 export { default as List } from './List'
 export { default as Dropdown } from './Dropdown'