diff --git a/mobile/.expo/packager-info.json b/mobile/.expo/packager-info.json index dd224fa..24e8ec3 100644 --- a/mobile/.expo/packager-info.json +++ b/mobile/.expo/packager-info.json @@ -1,5 +1,5 @@ { - "expoServerPort": 19000, - "packagerPort": 19001, - "packagerPid": 12109 + "expoServerPort": null, + "packagerPort": null, + "packagerPid": null } \ No newline at end of file diff --git a/website/src/Auth/Login.js b/website/src/Auth/Login.js index 54aec8b..c0abdd8 100644 --- a/website/src/Auth/Login.js +++ b/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 { - + - + @@ -148,8 +149,9 @@ export class Login extends React.Component { ) diff --git a/website/src/Modal/MessageModal.js b/website/src/Modal/MessageModal.js index 0f1a1e2..9169e8d 100644 --- a/website/src/Modal/MessageModal.js +++ b/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 ( - - - - {this.props.title} - - - {this.props.message} - - - - - + + + + + + + + + + {message} + + + {detail} + + + + + + + + + + + + + + + + ) } diff --git a/website/src/assets/icons/folder-icon.png b/website/src/assets/icons/folder-icon.png deleted file mode 100644 index 7d93766..0000000 Binary files a/website/src/assets/icons/folder-icon.png and /dev/null differ diff --git a/website/src/assets/icons/folder-open-2.png b/website/src/assets/icons/folder-open-2.png deleted file mode 100644 index 270ffc7..0000000 Binary files a/website/src/assets/icons/folder-open-2.png and /dev/null differ diff --git a/website/src/assets/icons/hold.svg b/website/src/assets/icons/hold.svg new file mode 100644 index 0000000..14d910d --- /dev/null +++ b/website/src/assets/icons/hold.svg @@ -0,0 +1,14 @@ + + + + hold + Created with Sketch. + + + + + + + + + diff --git a/website/src/assets/icons/open-folder.png b/website/src/assets/icons/open-folder.png deleted file mode 100644 index d05a078..0000000 Binary files a/website/src/assets/icons/open-folder.png and /dev/null differ diff --git a/website/src/ui/BoundButton.js b/website/src/ui/BoundButton.js index fa19a44..8fcfd69 100644 --- a/website/src/ui/BoundButton.js +++ b/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 ( ) diff --git a/website/src/ui/Button.js b/website/src/ui/Button.js index 46887b4..0b0edae 100644 --- a/website/src/ui/Button.js +++ b/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 ( ) diff --git a/website/src/ui/Column.js b/website/src/ui/Column.js index b6d6ed6..e9977f5 100644 --- a/website/src/ui/Column.js +++ b/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 ( -
{children}
+
{children}
) } } @@ -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 ( -
+
{children}
) diff --git a/website/src/ui/Icon.js b/website/src/ui/Icon.js index fc8f09e..b81c08e 100644 --- a/website/src/ui/Icon.js +++ b/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'), } diff --git a/website/src/ui/Modal.js b/website/src/ui/Modal.js index 409192d..111cd9b 100644 --- a/website/src/ui/Modal.js +++ b/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 ( - -
- {this.props.children} + +
+ {children}
) diff --git a/website/src/ui/Modal.style.js b/website/src/ui/Modal.style.js index 4b632f6..1a1cc83 100644 --- a/website/src/ui/Modal.style.js +++ b/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' } diff --git a/website/src/ui/Row.js b/website/src/ui/Row.js index 63250fb..01c8958 100644 --- a/website/src/ui/Row.js +++ b/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 ( -
{children}
+
{children}
) } } diff --git a/website/src/ui/Text.js b/website/src/ui/Text.js index 625e9b2..5f174d7 100644 --- a/website/src/ui/Text.js +++ b/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 ( {this.props.children} ) } diff --git a/website/src/ui/style.js b/website/src/ui/style.js index 13e5280..41a1aea 100644 --- a/website/src/ui/style.js +++ b/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 = {