Login screen looking good

website/src/App.js

@@ -25,7 +25,8 @@ export class App extends React.Component {
             </Row>
           </Box>
         </Column.Item>
-        <Column.Item grow>
+        <Column.Item grow />
+        <Column.Item>
           <Router basename='/'>
             <Switch>
               <Route path='/login' component={Login} />
@@ -40,9 +41,10 @@ export class App extends React.Component {
             </Switch>
           </Router>
         </Column.Item>
+        <Column.Item grow />
         <Column.Item>
           <Box color='#FAFAFA' borderTop='1px solid #B2B2B2'>
-            <Text tone='dimmed' margin={10}>{versionInfo.fullVersion} {versionInfo.copyright}</Text>
+            <Text tone='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
           </Box>
         </Column.Item>
       </Column>

website/src/Auth/Login.js

@@ -4,8 +4,9 @@ import { regExpPattern } from 'regexp-pattern'
 import { api } from '../helpers'
 import { Validator, ValidatedInput, ValidatedCheckbox, ValidatedButton } from '../Validated'
 import { WaitDialog, MessageDialog } from '../Dialog'
-import { Image, Link, Text, Column } from 'ui'
+import { Image, Link, Text, Row, Column } from 'ui'
 import headerLogo from 'images/deighton.png'
+import { versionInfo } from '../version'
 
 export class Login extends React.Component {
   static propTypes = {
@@ -87,41 +88,61 @@ export class Login extends React.Component {
   }
 
   render() {
-    return null && (
-      <div>
-        <form onSubmit={this.handleSubmit}>
-          <Column>
-            <Column.Item>
-              <Image source={headerLogo} width={279} height={73} />
-            </Column.Item>
-            <Column.Item>
-              <ValidatedInput label='Email' name='email'
-                placeholder='example@xyz.com' validator={this.state.validator}
-                message='Enter the email address associated with your account.' width={16} />
-            </Column.Item>
-            <Column.Item>
-              <ValidatedInput password label='Password' name='password'
-                validator={this.state.validator} message='Enter your password.' width={16} />
-            </Column.Item>
-            <Column.Item>
-              <Link to='/forgot-password'>Forgot your password?</Link>
-            </Column.Item>
-            <Column.Item>
-              <ValidatedCheckbox label='Remember Me'
-                name='rememberMe' onChange={this.handleChange} validator={this.state.validator}
-                message='Should we keep you logged in on this computer?' className='login-checkbox' />
-            </Column.Item>
-            <Column.Item>
-              <ValidatedButton className='submit' name='submit' content='Login'
-                submit validator={this.state.validator} />
-            </Column.Item>
-            <Column.Item>
-              <Text>
-                Please contact <Link to='mailto:support@jamoki.com'>support@jamoki.com</Link> to request login credentials.
-              </Text>
-            </Column.Item>
-          </Column>
-        </form>
+    return (
+      <Row minHeight='100%'>
+        <Row.Item grow>&nbsp;</Row.Item>
+        <Row.Item width='450px'>
+          <form onSubmit={this.handleSubmit}>
+            <Column minHeight='100%'>
+              <Column.Item>
+                <Row>
+                  <Row.Item grow />
+                  <Row.Item>
+                    <Image source={headerLogo} width={250} />
+                  </Row.Item>
+                  <Row.Item grow />
+                </Row>
+              </Column.Item>
+              <Column.Item>
+                <ValidatedInput label='Email' name='email'
+                  placeholder='example@xyz.com' validator={this.state.validator}
+                  message='Enter the email address associated with your account.' />
+              </Column.Item>
+              <Column.Item>
+                <ValidatedInput password label='Password' name='password'
+                  validator={this.state.validator} message='Enter your password.' />
+              </Column.Item>
+              <Column.Item>
+                <Row>
+                  <Row.Item>
+                    <Link to='/forgot-password'>Forgot your password?</Link>
+                  </Row.Item>
+                  <Row.Item grow />
+                  <Row.Item>
+                    <ValidatedCheckbox label='Remember Me'
+                      name='rememberMe' onChange={this.handleChange} validator={this.state.validator} />
+                  </Row.Item>
+                </Row>
+              </Column.Item>
+              <Column.Item>
+                <Row>
+                  <Row.Item grow />
+                  <Row.Item>
+                    <br />
+                    <ValidatedButton name='submit' content='Login' height={60} submit validator={this.state.validator} />
+                  </Row.Item>
+                </Row>
+              </Column.Item>
+              <Column.Item>
+                <Text>
+                  <br />
+                  Please contact <Link to={`mailto:${versionInfo.supportEmail}`}>{versionInfo.supportEmail}</Link> to request login credentials.
+                </Text>
+              </Column.Item>
+            </Column>
+          </form>
+        </Row.Item>
+        <Row.Item grow>&nbsp;</Row.Item>
 
         <WaitDialog active={this.state.waitDialog} message='Logging In' />
 
@@ -129,7 +150,7 @@ export class Login extends React.Component {
           title={this.state.messageDialog ? this.state.messageDialog.title : ''}
           message={this.state.messageDialog ? this.state.messageDialog.message : ''}
           onDismiss={this.handleMessageDialogDismiss} />
-      </div>
+      </Row>
     )
   }
 }

website/src/Users/UserFormPlaceholder.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import './UserFormPlaceholder.scss'
 
 export const UserFormPlaceholder = () => (
   <div className='user-form-placeholder'>

website/src/Users/UserFormPlaceholder.scss

@@ -1,7 +0,0 @@
-.user-form-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}

website/src/Users/ValidatedEmailIcon.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Label, Button, Icon } from 'ui'
-import './ValidatedEmailIcon.scss'
+import { Text, Button, Icon } from 'ui'
 
 // This is a validated component with a value that cannot change itself and is specialized
 
@@ -28,15 +27,14 @@ export class ValidatedEmailIcon extends React.Component {
     if (this.state.value) {
       return (
         <div width={this.props.width}>
-          <Label>&nbsp;
-            <Icon name='mail' color='green' size='big' className='mail-validated-icon' />
-          </Label>
+          <Text>&nbsp;</Text>
+          <Icon name='mail' color='green' size='big' className='mail-validated-icon' />
         </div>
       )
     } else {
       return (
         <div width={this.props.width}>
-          <Label>&nbsp;</Label>
+          <Text>&nbsp;</Text>
           <Button fluid icon='mail outline' color='red' labelPosition='left'
             content='Resend Email' onClick={this.props.onClick} disabled={this.state.disabled} />
         </div>

website/src/Users/ValidatedEmailIcon.scss

@@ -1,3 +0,0 @@
-.mail-validated-icon {
-  padding-top: 4px;
-}

website/src/Validated/ValidatedButton.js

@@ -10,10 +10,8 @@ export class ValidatedButton extends React.Component {
     size: PropTypes.string,
     content: PropTypes.string,
     validator: PropTypes.object.isRequired,
-    primary: PropTypes.bool,
     submit: PropTypes.bool,
     color: PropTypes.string,
-    floated: PropTypes.string,
     onClick: PropTypes.func
   }
 
@@ -48,10 +46,11 @@ export class ValidatedButton extends React.Component {
       return (
         <div width={this.props.width} disabled={this.state.disabled}>
           <label>{this.props.label}</label>
-          <Button color={this.props.color} primary={this.props.primary}
-            type={this.props.submit ? 'submit' : 'button'} onClick={this.props.onClick}
-            size={this.props.size} name={this.props.name}
-            floated={this.props.floated}>
+          <Button
+            color={this.props.color}
+            submit={this.props.submit}
+            onClick={this.props.onClick}
+            size={this.props.size} name={this.props.name}>
             {this.props.content}
           </Button>
         </div>

website/src/Validated/ValidatedCheckbox.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Checkbox, Label } from 'ui'
+import { Checkbox } from 'ui'
 
 // This is an example of a validated component with a value that can change itself, that cannot ever be invalid.
 
@@ -8,9 +8,7 @@ export class ValidatedCheckbox extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     label: PropTypes.string,
-    width: PropTypes.number,
     validator: PropTypes.object.isRequired,
-    className: PropTypes.string
   }
 
   constructor(props) {
@@ -37,10 +35,7 @@ export class ValidatedCheckbox extends React.Component {
 
   render() {
     return (
-      <Label width={this.props.width} disabled={this.state.disabled} className={this.props.className}>
-        <Checkbox value={!!this.state.value} name={this.props.name} />
-        {this.props.label}
-      </Label>
+      <Checkbox value={!!this.state.value} name={this.props.name} label={this.props.label} />
     )
   }
 }

website/src/Validated/ValidatedInput.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Input, Label, Text } from 'ui'
+import { Input, Text } from 'ui'
 
 // This is an example of a validated component with a value that changes itself
 
@@ -9,7 +9,6 @@ export class ValidatedInput extends React.Component {
     name: PropTypes.string.isRequired,
     message: PropTypes.string,
     label: PropTypes.string,
-    width: PropTypes.number,
     validator: PropTypes.object.isRequired,
     password: PropTypes.bool,
     placeholder: PropTypes.string
@@ -39,16 +38,16 @@ export class ValidatedInput extends React.Component {
 
   render() {
     return (
-      <div width={this.props.width} disabled={this.state.disabled}>
-        <Label>{this.props.label}<br />
-          <Input value={this.state.value}
-            password={this.props.password}
-            name={this.props.name}
-            onChange={this.handleChange}
-            placeholder={this.props.placeholder} />
-        </Label>
+      <div style={{ width: '100%' }} disabled={this.state.disabled}>
+        <Text>{this.props.label}</Text>
         <br />
-        <Text size='small'>{this.props.message}</Text>
+        <Input value={this.state.value}
+          password={this.props.password}
+          name={this.props.name}
+          onChange={this.handleChange}
+          placeholder={this.props.placeholder} />
+        <br />
+        <Text size='small' tone='alert'>{this.props.message}</Text>
       </div>
     )
   }

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'