Fixed message dialog

mobile/.expo/packager-info.json

@@ -1,5 +1,5 @@
 {
-  "expoServerPort": 19000,
-  "packagerPort": 19001,
-  "packagerPid": 12109
+  "expoServerPort": null,
+  "packagerPort": null,
+  "packagerPid": null
 }

website/src/Auth/Login.js

@@ -8,6 +8,7 @@ import headerLogo from 'images/deighton.png'
 import { versionInfo } from '../version'
 import { FormBinder } from 'react-form-binder'
 import { reactAutoBind } from 'auto-bind2'
+import { sizeInfo } from 'ui/style'
 
 export class Login extends React.Component {
   static propTypes = {
@@ -38,7 +39,7 @@ export class Login extends React.Component {
     reactAutoBind(this)
     this.state = {
       waitModal: false,
-      messageModal: null,
+      messageModal: { icon: 'hold', message: 'Wait there just a second', detail: 'This is just a test' },
       binder: new FormBinder({}, Login.bindings)
     }
   }
@@ -77,7 +78,7 @@ export class Login extends React.Component {
         this.setState({
           binder: new FormBinder({ email: this.state.binder.getFieldValue('email').value }, Login.bindings),
           waitModal: false,
-          messageModal: { title: 'Login Error...', message: `Unable to login. ${error.message}` }
+          messageModal: { icon: 'hold', message: `Unable to login`, detail: error.message }
         })
       })
     }
@@ -126,11 +127,11 @@ export class Login extends React.Component {
                 </Row>
               </Column.Item>
               <Column.Item height={20} />
-              <Column.Item height={40}>
+              <Column.Item height={sizeInfo.buttonHeight}>
                 <Row>
                   <Row.Item grow />
                   <Row.Item>
-                    <BoundButton name='submit' width={100} content='Login' submit binder={this.state.binder} />
+                    <BoundButton name='submit' content='Login' submit binder={this.state.binder} />
                   </Row.Item>
                 </Row>
               </Column.Item>
@@ -148,8 +149,9 @@ export class Login extends React.Component {
         <WaitModal active={waitModal} message='Logging In' />
 
         <MessageModal error open={!!messageModal}
-          title={messageModal ? messageModal.title : ''}
+          icon={messageModal ? messageModal.icon : ''}
           message={messageModal ? messageModal.message : ''}
+          detail={messageModal ? messageModal.detail : ''}
           onDismiss={this.handleMessageModalDismiss} />
       </Row>
     )

website/src/Modal/MessageModal.js

@@ -1,31 +1,50 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Modal, Button, Column, Text } from 'ui'
+import { Modal, Button, Column, Row, Text, Icon } from 'ui'
+import { sizeInfo } from 'ui/style'
 
 export class MessageModal extends React.Component {
   static propTypes = {
     open: PropTypes.bool,
-    title: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
     message: PropTypes.string.isRequired,
+    detail: PropTypes.string,
     onDismiss: PropTypes.func
   }
 
   render() {
-    const { onDismiss, open } = this.props
+    const { onDismiss, open, icon, message, detail } = this.props
 
     return (
-      <Modal open={open} onCancel={onDismiss}>
-        <Column>
-          <Column.Item>
-            <Text>{this.props.title}</Text>
-          </Column.Item>
-          <Column.Item>
-            <Text>{this.props.message}</Text>
-          </Column.Item>
-          <Column.Item>
-            <Button onClick={onDismiss}>OK</Button>
-          </Column.Item>
-        </Column>
+      <Modal open={open} width={400} onCancel={onDismiss}>
+        <Row>
+          <Row.Item>
+            <Icon name={icon} size={150} />
+          </Row.Item>
+          <Row.Item grow>
+            <Column height='100%'>
+              <Column.Item height={15} />
+              <Column.Item grow>
+                <Text width='100%' align='center'>{message}</Text>
+              </Column.Item>
+              <Column.Item>
+                <Text width='100%' align='center' tone='dimmed' size='small'>{detail}</Text>
+              </Column.Item>
+              <Column.Item height={15} />
+              <Column.Item height={sizeInfo.buttonHeight}>
+                <Row>
+                  <Row.Item grow />
+                  <Row.Item>
+                    <Button onClick={onDismiss}>OK</Button>
+                  </Row.Item>
+                  <Row.Item grow />
+                </Row>
+              </Column.Item>
+              <Column.Item height={15} />
+            </Column>
+          </Row.Item>
+          <Row.Item width={10} />
+        </Row>
       </Modal>
     )
   }

website/src/assets/icons/hold.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 221 237" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
+    <title>hold</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Modal" transform="translate(-117.000000, -103.000000)" fill="#DD6363" fill-rule="nonzero">
+            <g id="hold" transform="translate(117.000000, 103.000000)">
+                <path d="M188.712926,14.3636364 C183.595783,14.3636364 178.75344,15.5608455 174.450649,17.6909727 C169.108932,7.20049091 158.210251,0 145.663494,0 C135.348132,0 126.147034,4.86783636 120.232042,12.4281364 C115.162254,9.11229091 109.108786,7.18181818 102.614062,7.18181818 C84.8102513,7.18181818 70.3269874,21.6797545 70.3269874,39.5 L70.3269874,136.8438 L46.736616,124.832209 C42.2853048,122.6001 37.2887007,121.420127 32.2870741,121.420127 C14.4839815,121.420127 0,135.918064 0,153.738309 C0,166.060155 6.84198975,177.139545 17.857622,182.655182 L110.049416,228.801236 C120.554912,234.165336 132.376286,237 144.24071,237 C164.387127,237 183.521882,229.163918 198.120662,214.9353 C212.875137,200.555864 221,181.554927 221,161.433627 L221,46.6818182 C221,28.8615727 206.516019,14.3636364 188.712926,14.3636364 Z M199.475284,161.433627 C199.475284,190.716055 174.180873,215.454545 144.241427,215.454545 C135.627954,215.454545 127.404077,213.482418 119.799395,209.592745 C119.771413,209.578382 119.744148,209.564736 119.716166,209.550373 L27.4856275,163.385645 C23.809206,161.544945 21.5247161,157.848464 21.5247161,153.739027 C21.5247161,147.798945 26.3527099,142.9663 32.2870741,142.9663 C33.9817868,142.9663 35.5997279,143.346218 37.036144,144.066555 L76.2096923,164.011182 C79.5474583,165.711118 83.5259433,165.550964 86.7159062,163.592482 C89.9065866,161.634 91.8517035,158.155845 91.8517035,154.409091 L91.8517035,39.5 C91.8517035,33.5599182 96.6796973,28.7272727 102.614062,28.7272727 C108.547708,28.7272727 113.37642,33.5599182 113.37642,39.5 L113.37642,96.9545455 C113.37642,102.903964 118.195086,107.727273 124.138778,107.727273 C130.082469,107.727273 134.901136,102.903964 134.901136,96.9545455 L134.901136,39.5 L134.901136,32.3181818 C134.901136,26.3781 139.729129,21.5454545 145.663494,21.5454545 C151.59714,21.5454545 156.425852,26.3781 156.425852,32.3181818 L156.425852,39.5 L156.425852,46.6818182 L156.425852,96.9545455 C156.425852,102.903964 161.244518,107.727273 167.18821,107.727273 C173.131901,107.727273 177.950568,102.903964 177.950568,96.9545455 L177.950568,46.6818182 C177.950568,40.7417364 182.778562,35.9090909 188.712926,35.9090909 C194.64729,35.9090909 199.475284,40.7417364 199.475284,46.6818182 L199.475284,161.433627 Z" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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 = {