New assets, fixed list box scrolling, header text, etc..

website/src/ui/BoundButton.js

@@ -9,7 +9,8 @@ export default class BoundButton extends React.Component {
     text: PropTypes.string,
     binder: PropTypes.object.isRequired,
     submit: PropTypes.string,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
   }
 
   constructor(props) {
@@ -39,11 +40,12 @@ export default class BoundButton extends React.Component {
   }
 
   render() {
-    const { name, text, submit, onClick } = this.props
+    const { name, text, submit, width, onClick } = this.props
     const { visible, disabled } = this.state
 
     return (
-      <Button disabled={disabled} submit={submit} onClick={onClick} name={name} visible={visible} text={text} />
+      <Button disabled={disabled} submit={submit} onClick={onClick}
+        name={name} visible={visible} text={text} width={width} />
     )
   }
 }

website/src/ui/BoundEmailIcon.js

@@ -20,13 +20,13 @@ export default class BoundEmailIcon extends React.Component {
   }
 
   render() {
-    // const { value } = this.state
+    const { value } = this.state
 
     return (
       <div>
         <Text>&nbsp;</Text>
         <br />
-        <Icon name='mail' size={30} margin={0} />
+        <Icon name={value ? 'confirmed' : 'warning'} size={30} margin={0} />
       </div>
     )
   }

website/src/ui/BoundInput.js

@@ -49,7 +49,6 @@ export default class BoundInput extends React.Component {
           name={name}
           onChange={this.handleChange}
           placeholder={placeholder} />
-        <br />
         <Text size='small' color='alert' hidden={valid}>{message}</Text>
       </div>
     )

website/src/ui/Box.js

@@ -6,25 +6,27 @@ import React, { Component } from 'react'
 
 class Box extends Component {
   static propTypes = {
-    borderTop: PropTypes.string,
-    borderBottom: PropTypes.string,
-    borderRight: PropTypes.string,
-    borderLeft: PropTypes.string,
-    border: PropTypes.string,
+    borderTop: PropTypes.object,
+    borderBottom: PropTypes.object,
+    borderRight: PropTypes.object,
+    borderLeft: PropTypes.object,
+    border: PropTypes.object,
     radius: PropTypes.number,
-    color: PropTypes.string,
+    background: PropTypes.string,
     children: PropTypes.node,
   }
 
   render() {
-    const { children, color, borderTop, borderBottom, borderLeft, borderRight, border, radius } = this.props
+    const { children, background, borderTop, borderBottom, borderLeft,
+      borderRight, border, radius } = this.props
 
     return (
       <div style={[
         { height: '100%', width: '100%' },
-        color && { backgroundColor: color },
+        background && { backgroundColor: background },
         radius && { borderRadius: radius },
-        border ? { border } : { borderTop, borderBottom, borderLeft, borderRight }]}>
+        border ? { border } : { borderTop, borderBottom, borderLeft, borderRight },
+      ]}>
         {children}
       </div>
     )

website/src/ui/Button.js

@@ -1,8 +1,7 @@
 import Radium from 'radium'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { colorInfo, sizeInfo } from './style'
-import { Text } from '.'
+import { fontInfo, colorInfo, sizeInfo } from './style'
 
 class Button extends Component {
   static propTypes = {
@@ -22,7 +21,11 @@ class Button extends Component {
 
   static style = {
     button: {
+      fontSize: fontInfo.size.medium,
+      fontFamily: fontInfo.family,
+      color: fontInfo.color.inverse,
       height: sizeInfo.buttonHeight,
+      borderWidth: 0,
       borderRadius: 10,
       background: colorInfo.buttonBackgroundHover,
       verticalAlign: 'middle',
@@ -35,7 +38,6 @@ class Button extends Component {
         background: colorInfo.disabledButtonBackground,
       },
       ':active': {
-        borderWidth: 0,
         background: colorInfo.buttonBackgroundActive,
       }
     }
@@ -45,12 +47,10 @@ class Button extends Component {
     const { name, submit, visible, disabled, width, text, onClick } = this.props
 
     return (
-      <button name={name} type={!visible ? 'hidden' : submit ? 'submit' : 'button'}
+      <input name={name} type={!visible ? 'hidden' : submit ? 'submit' : 'button'}
         disabled={disabled} form={submit}
         style={[Button.style.button, { width, minWidth: sizeInfo.minButtonWidth }]}
-        onClick={onClick}>
-        <Text color='inverse'>{text}</Text>
-      </button>
+        onClick={onClick} value={text} />
     )
   }
 }

website/src/ui/HeaderText.js

@@ -0,0 +1,35 @@
+import Radium from 'radium'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { sizeInfo, fontInfo } from 'ui/style'
+
+class HeaderText extends Component {
+  static propTypes = {
+    text: PropTypes.string,
+  }
+
+  static style = {
+    position: 'relative',
+    top: 3,
+    display: 'inline-block',
+    fontSize: fontInfo.size.huge,
+    fontFamily: fontInfo.family,
+    color: fontInfo.color.normal,
+    textAlign: 'left',
+    background: 'transparent',
+    verticalAlign: 'middle',
+    borderWidth: 0,
+    paddingLeft: 10,
+  }
+
+  render() {
+    const height = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
+    const { text } = this.props
+
+    return (
+      <div style={[{ height }, HeaderText.style]}>{text}</div>
+    )
+  }
+}
+
+export default Radium(HeaderText)

website/src/ui/Icon.js

@@ -19,10 +19,15 @@ export default class Icon extends Component {
   static svgs = {
     logout: require('icons/logout.svg'),
     profile: require('icons/profile.svg'),
-    hold: require('icons/hold.svg'),
+    admin: require('icons/admin.svg'),
+    hand: require('icons/hand.svg'),
     users: require('icons/users.svg'),
     teams: require('icons/teams.svg'),
     system: require('icons/system.svg'),
+    confirmed: require('icons/confirmed.svg'),
+    help: require('icons/help.svg'),
+    warning: require('icons/warning.svg'),
+    edit: require('icons/edit.svg'),
     placeholder: require('icons/placeholder.svg'),
   }
 

website/src/ui/Input.js

@@ -2,6 +2,8 @@ import Radium from 'radium'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
+// See https://stackoverflow.com/a/6891562/576235 for why we wrap the <input /> element
+
 class Input extends Component {
   static propTypes = {
     password: PropTypes.bool,
@@ -35,7 +37,11 @@ class Input extends Component {
       margin: 0,
       width: '100%',
       outline: 'none',
-    }
+      ':disabled': {
+        color: '#AAAAAA',
+        background: '#ffffff'
+      }
+    },
   }
 
   render() {

website/src/ui/List.js

@@ -11,7 +11,6 @@ class List extends Component {
 
   render() {
     const { children } = this.props
-    const listGapItem = (<div style={{ background: 'transparent', height: sizeInfo.listTopBottomGap }} />)
 
     return (
       <div style={{
@@ -21,12 +20,16 @@ class List extends Component {
         fontSize: fontInfo.size.large,
         fontFamily: fontInfo.family,
       }}>
-        <Box border={`${sizeInfo.listBorderWidth}px solid ${colorInfo.listBorder}`} radius={sizeInfo.formBoxRadius}>
-          {listGapItem}
-          <div style={{ overflow: scroll }}>
+        <Box
+          border={`${sizeInfo.listBorderWidth}px solid ${colorInfo.listBorder}`}
+          radius={sizeInfo.formBoxRadius}>
+          <div style={{
+            height: '100%',
+            width: '100%',
+            overflow: 'scroll'
+          }}>
             {children}
           </div>
-          {listGapItem}
         </Box>
       </div>
     )
@@ -93,7 +96,8 @@ List.Text = Radium(class ListText extends Component {
         color: fontInfo.color.normal,
         align: 'left',
         verticalAlign: 'middle',
-        textAlign: 'left'
+        textAlign: 'left',
+        cursor: 'default',
       }}>{children}</span>
     )
   }

website/src/ui/index.js

@@ -2,6 +2,7 @@ export { default as Anime } from './Anime'
 export { default as Box } from './Box'
 export { default as Button } from './Button'
 export { default as HeaderButton } from './HeaderButton'
+export { default as HeaderText } from './HeaderText'
 export { default as PanelButton } from './PanelButton'
 export { default as Checkbox } from './Checkbox'
 export { default as Input } from './Input'