Fixed message dialog

website/src/ui/BoundButton.js

@@ -6,7 +6,6 @@ import { reactAutoBind } from 'auto-bind2'
 export default class BoundButton extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
-    width: PropTypes.number,
     content: PropTypes.string,
     binder: PropTypes.object.isRequired,
     submit: PropTypes.bool,
@@ -40,12 +39,12 @@ export default class BoundButton extends React.Component {
   }
 
   render() {
-    const { name, width, content, submit, onClick } = this.props
+    const { name, content, submit, onClick } = this.props
     const { visible, disabled } = this.state
 
     return (
       <Button disabled={disabled} submit={submit}
-        onClick={onClick} width={width} name={name} visible={visible}>
+        onClick={onClick} name={name} visible={visible}>
         {content}
       </Button>
     )

website/src/ui/Button.js

@@ -2,12 +2,12 @@ import Radium from 'radium'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import style from './Button.style'
+import { sizeInfo } from './style'
 
 class Button extends Component {
   static propTypes = {
     submit: PropTypes.bool,
     children: PropTypes.node,
-    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
     visible: PropTypes.bool,
     disabled: PropTypes.bool,
     name: PropTypes.string,
@@ -15,11 +15,11 @@ class Button extends Component {
   }
 
   render() {
-    const { name, children, submit, width, visible, disabled, onClick } = this.props
+    const { name, children, submit, visible, disabled, onClick } = this.props
 
     return (
       <button name={name} type={!visible ? 'hidden' : submit ? 'submit' : 'button'} disabled={disabled}
-        style={[style.base, { width }]} onClick={onClick}>
+        style={[style.base, { minWidth: sizeInfo.minButtonWidth }]} onClick={onClick}>
         {children}
       </button>
     )

website/src/ui/Column.js

@@ -6,13 +6,14 @@ class Column extends Component {
   static propTypes = {
     children: PropTypes.node,
     minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
   }
 
   render() {
-    const { children, minHeight } = this.props
+    const { children, minHeight, height } = this.props
 
     return (
-      <div style={{ width: '100%', display: 'flex', minHeight, flexDirection: 'column' }}>{children}</div>
+      <div style={{ width: '100%', display: 'flex', height, minHeight, flexDirection: 'column' }}>{children}</div>
     )
   }
 }
@@ -22,18 +23,15 @@ Column.Item = Radium(class StackLayoutItem extends Component {
     children: PropTypes.node,
     minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
     height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
-    paddingTop: PropTypes.number,
-    paddingBottom: PropTypes.number,
-    padding: PropTypes.number,
     grow: PropTypes.bool
   }
 
   render() {
-    const { children, grow, height, minHeight, padding, paddingTop, paddingBottom } = this.props
+    const { children, grow, height, minHeight } = this.props
     const flexGrow = grow ? 1 : null
 
     return (
-      <div style={{ height, minHeight, flexGrow, paddingTap: paddingTop || padding, paddingBottom: paddingBottom || padding }}>
+      <div style={{ height, minHeight, flexGrow }}>
         {children}
       </div>
     )

website/src/ui/Icon.js

@@ -17,6 +17,7 @@ export default class Icon extends Component {
   static svgs = {
     logout: require('icons/logout.svg'),
     profile: require('icons/profile.svg'),
+    hold: require('icons/hold.svg'),
     placeholder: require('icons/placeholder.svg'),
   }
 

website/src/ui/Modal.js

@@ -8,16 +8,23 @@ class Modal extends Component {
   static propTypes = {
     children: PropTypes.node,
     open: PropTypes.bool,
-    // TODO: onCancel: PropTypes.func,
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    // TODO: onCancel: PropTypes.func <- for handling ESC & enter key
+  }
+
+  static defaultProps = {
+    width: '60%',
   }
 
   // TODO: Capture ESC key https://stackoverflow.com/questions/3369593/how-to-detect-escape-key-press-with-pure-js-or-jquery
 
   render() {
+    const { open, children, width } = this.props
+
     return (
-      <Dimmer active={this.props.open}>
-        <div style={style.modal}>
-          {this.props.children}
+      <Dimmer active={open}>
+        <div style={[style.modal, { width }]}>
+          {children}
         </div>
       </Dimmer>
     )

website/src/ui/Modal.style.js

@@ -1,11 +1,9 @@
+import { colorInfo } from './style'
+
 export default {
   modal: {
     zIndex: 101,
-    background: '#FFFFFF',
-    margin: 0,
-    padding: '18px 24px',
-    width: '80%',
-    border: '1px solid $border-primary',
+    background: colorInfo.modalBackground,
     borderRadius: 4,
     boxShadow: '0 0 25px #000000'
   }

website/src/ui/Row.js

@@ -5,14 +5,15 @@ import PropTypes from 'prop-types'
 class Row extends Component {
   static propTypes = {
     children: PropTypes.node,
-    minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
+    minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
   }
 
   render() {
-    const { children, minWidth } = this.props
+    const { children, width, minWidth } = this.props
 
     return (
-      <div style={{ height: '100%', display: 'flex', minWidth, flexDirection: 'row' }}>{children}</div>
+      <div style={{ height: '100%', display: 'flex', width, minWidth, flexDirection: 'row' }}>{children}</div>
     )
   }
 }

website/src/ui/Text.js

@@ -8,23 +8,30 @@ class Text extends Component {
     size: PropTypes.string,
     margin: PropTypes.number,
     children: PropTypes.node,
-    tone: PropTypes.string
+    tone: PropTypes.string,
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    align: PropTypes.string,
   }
 
   static defaultProps = {
     size: 'medium',
     tone: 'normal',
-    margin: 0
+    margin: 0,
+    align: 'left',
   }
 
   render() {
+    const { margin, width, align } = this.props
+
     return (
       <span style={{
         display: 'inline-block',
         fontSize: fontInfo.size[this.props.size],
         fontFamily: fontInfo.family,
-        margin: this.props.margin,
         color: fontInfo.color[this.props.tone],
+        textAlign: align,
+        margin,
+        width,
       }}>{this.props.children}</span>
     )
   }

website/src/ui/style.js

@@ -7,13 +7,16 @@ export const colorInfo = {
   headerButtonBackground: '#FAFAFA',
   headerButtonBackgroundHover: '#DADADA',
   disabledButtonBackground: '#A0A0A0',
+  modalBackground: '#FFFFFF',
 }
 
 export const sizeInfo = {
   headerHeight: 60,
   imageMargin: 5, // The margin around images
   iconMargin: 10, // The margin around icons
-  headerBorderWidth: 1
+  headerBorderWidth: 1,
+  buttonHeight: 40,
+  minButtonWidth: 100,
 }
 
 export const fontInfo = {