john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Clean all sizes, fonts and colors into style.js

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-07 11:01:55 -08:00
parent c06669873f
commit 9adca547f7
48 changed files with 152 additions and 3179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/src/App.js
View File

@@ -102,7 +102,7 @@ export class App extends Component {
</Switch>
<Column.Item>
<Box background={colorInfo.headerButtonBackground} borderTop={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}>
<Text color='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
<Text color='dimmed' margin={sizeInfo.footerTextMargin}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
</Box>
</Column.Item>
</Column>

8
website/src/Auth/Login.js
View File

@@ -101,14 +101,14 @@ export class Login extends Component {
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item width='450px'>
<Row.Item width={sizeInfo.modalWidth}>
<form onSubmit={this.handleSubmit} id='loginForm'>
<Column minHeight='100%'>
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item>
<Image source={headerLogo} width={250} />
<Image source={headerLogo} width={sizeInfo.loginLogoWidth} />
</Row.Item>
<Row.Item grow />
</Row>
@@ -133,7 +133,7 @@ export class Login extends Component {
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}>
<Row>
<Row.Item grow />
@@ -142,7 +142,7 @@ export class Login extends Component {
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Text>
Please contact <Link to={`mailto:${versionInfo.supportEmail}`}>{versionInfo.supportEmail}</Link> to request login credentials.

4
website/src/Auth/ResetPassword.js
View File

@@ -70,12 +70,12 @@ export class ResetPassword extends React.Component {
<Column.Item>
<BoundInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password'
width={16} binder={this.state.binder} />
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank'
width={16} binder={this.state.binder} />
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<Text>

5
website/src/Home/Home.js
View File

@@ -1,6 +1,7 @@
import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import { Row, Column, PanelButton } from 'ui'
import { sizeInfo } from 'ui/style'
export class Home extends Component {
static propTypes = {
@@ -26,11 +27,11 @@ export class Home extends Component {
<Row.Item>
<PanelButton icon='users' text='Users' onClick={() => (this.props.history.push('/users'))} />
</Row.Item>
<Row.Item width={30} />
<Row.Item width={sizeInfo.panelButtonSpacing} />
<Row.Item>
<PanelButton icon='teams' text='Teams' />
</Row.Item>
<Row.Item width={30} />
<Row.Item width={sizeInfo.panelButtonSpacing} />
<Row.Item>
<PanelButton icon='system' text='System' />
</Row.Item>

15
website/src/Modal/ChangeEmailModal.js
View File

@@ -4,6 +4,7 @@ import { autoBind } from 'auto-bind2'
import { Modal, Button, Row, Column, BoundInput, BoundButton, Text } from 'ui'
import { regExpPattern } from 'regexp-pattern'
import { FormBinder } from 'react-form-binder'
import { sizeInfo } from 'ui/style'
export class ChangeEmailModal extends React.Component {
static propTypes = {
@@ -60,29 +61,29 @@ export class ChangeEmailModal extends React.Component {
closeOnDimmerClick={false}>
<form id='emailForm' onSubmit={this.handleSubmit}>
<Column>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Row>
<Row.Item width={20} />
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item grow>
<Column>
<Column.Item>
<Text>{this.props.oldEmail}</Text>
</Column.Item>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<BoundInput label='New Email' name='newEmail'
message='Your new email address, e.g. xyz@abc.com, cannot be blank'
binder={this.state.binder} />
</Column.Item>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item>
<Button onClick={this.handleClick} text='Cancel' />
</Row.Item>
<Row.Item width={20} />
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<BoundButton submit='emailForm' name='submit' binder={this.state.binder} text='OK' />
</Row.Item>
@@ -90,10 +91,10 @@ export class ChangeEmailModal extends React.Component {
</Column.Item>
</Column>
</Row.Item>
<Row.Item width={20} />
<Row.Item width={sizeInfo.formRowSpacing} />
</Row>
</Column.Item>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
</Column>
</form>
</Modal>

6
website/src/Modal/ChangePasswordModal.js
View File

@@ -74,17 +74,17 @@ export class ChangePasswordModal extends React.Component {
<Column.Item>
<BoundInput label='Current Password' password name='oldPassword'
message='Your existing password, cannot be blank'
width={8} binder={this.state.binder} />
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password'
width={8} binder={this.state.binder} />
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank'
width={8} binder={this.state.binder} />
binder={this.state.binder} />
</Column.Item>
</Column>
</Column.Item>

12
website/src/Modal/MessageModal.js
View File

@@ -33,22 +33,22 @@ export class MessageModal extends React.Component {
const { open, icon, message, detail } = this.props
return (
<Modal open={open} width={400}>
<Modal open={open} width={sizeInfo.modalWidth}>
<form onSubmit={this.onSubmit} id='messageModal'>
<Row>
<Row.Item>
<Icon name={icon} size={150} />
<Icon name={icon} size={sizeInfo.messageModalIcon} />
</Row.Item>
<Row.Item grow>
<Column height='100%'>
<Column.Item height={15} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item grow>
<Text width='100%' align='center'>{message}</Text>
</Column.Item>
<Column.Item>
<Text width='100%' align='center' color='dimmed' size='small'>{detail}</Text>
</Column.Item>
<Column.Item height={15} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}>
<Row>
<Row.Item grow />
@@ -58,10 +58,10 @@ export class MessageModal extends React.Component {
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item height={15} />
<Column.Item height={sizeInfo.formColumnSpacing} />
</Column>
</Row.Item>
<Row.Item width={10} />
<Row.Item width={sizeInfo.formRowSpacing} />
</Row>
</form>
</Modal>

14
website/src/Modal/YesNoMessageModal.js
View File

@@ -31,36 +31,36 @@ export class YesNoMessageModal extends React.Component {
const { open, question } = this.props
return (
<Modal open={open} width={400}>
<Modal open={open} width={sizeInfo.modalWidth}>
<form onSubmit={this.onSubmit} id='messageModal'>
<Row>
<Row.Item>
<Icon name='help' size={150} />
<Icon name='help' size={sizeInfo.messageModalIcon} />
</Row.Item>
<Row.Item grow>
<Column height='100%'>
<Column.Item height={15} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item grow>
<Text width='100%' align='center'>{question}</Text>
</Column.Item>
<Column.Item height={15} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}>
<Row>
<Row.Item grow />
<Row.Item>
<Button submit='messageModal' text='Yes' onClick={(e) => this.onSubmit(e, true)} />
</Row.Item>
<Row.Item width={10} />
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<Button submit='messageModal' text='No' onClick={(e) => this.onSubmit(e, false)} />
</Row.Item>
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item height={15} />
<Column.Item height={sizeInfo.formColumnSpacing} />
</Column>
</Row.Item>
<Row.Item width={10} />
<Row.Item width={sizeInfo.formRowSpacing} />
</Row>
</form>
</Modal>

12
website/src/Profile/ProfileForm.js
View File

@@ -94,25 +94,25 @@ export class ProfileForm extends React.Component {
<form onSubmit={this.handleSubmit} id='profileForm'>
<Column stackable>
<Column.Item>
<BoundInput label='First Name' name='firstName' width={8}
<BoundInput label='First Name' name='firstName'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Last Name' name='lastName' width={8}
<BoundInput label='Last Name' name='lastName'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Email' name='email' width={8} message='Required. Must be a valid email address.'
<BoundInput label='Email' name='email' message='Required. Must be a valid email address.'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<Button fluid content={'Change Email'} label='&nbsp;'
width={4} onClick={this.props.onChangeEmail} />
onClick={this.props.onChangeEmail} />
<Button fluid content={'Change Password'} label='&nbsp;'
width={4} onClick={this.props.onChangePassword} />
onClick={this.props.onChangePassword} />
</Column.Item>
<Column.Item>
<BoundButton submit primary width={4} size='medium' content='Save' label='&nbsp;' name='save'
<BoundButton submit primary size='medium' content='Save' label='&nbsp;' name='save'
binder={this.state.binder} />
</Column.Item>
</Column>

24
website/src/Users/UserForm.js
View File

@@ -113,9 +113,9 @@ export class UserForm extends React.Component {
return (
<form style={{ width: '100%', height: '100%', overflow: 'scroll' }} id='userForm' onSubmit={this.handleSubmit}>
<Column>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Row>
<Row.Item width={20} />
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item grow>
<Column.Item>
<Column>
@@ -124,7 +124,7 @@ export class UserForm extends React.Component {
<Row.Item grow>
<BoundInput label='First Name' name='firstName' message='Must not be empty' binder={binder} />
</Row.Item>
<Row.Item width={20} />
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item grow>
<BoundInput label='Last Name' name='lastName' binder={binder} />
</Row.Item>
@@ -135,27 +135,27 @@ export class UserForm extends React.Component {
<Row.Item grow>
<BoundInput label='Email' name='email' message='Must be a valid email address. Required.' binder={binder} />
</Row.Item>
<Row.Item width={10} />
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<BoundEmailIcon name='emailValidated' binder={binder} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item minHeight={sizeInfo.buttonHeight}>
<Row>
<Row.Item>
<BoundButton text='Change Email' name='changeEmail' binder={binder}
width={220} onClick={this.handleChangeEmail} />
width={sizeInfo.formButtonLarge} onClick={this.handleChangeEmail} />
</Row.Item>
<Row.Item grow />
<Row.Item>
<BoundButton text='Resend Confirmation Email' name='resendEmail' binder={binder}
width={220} onClick={this.handleResendEmail} />
width={sizeInfo.formButtonLarge} onClick={this.handleResendEmail} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Row>
<Row.Item>
@@ -164,7 +164,7 @@ export class UserForm extends React.Component {
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item minHeight={sizeInfo.buttonHeight}>
<Row>
<Row.Item>
@@ -174,7 +174,7 @@ export class UserForm extends React.Component {
<Row.Item>
<BoundButton text='Remove' name='remove' binder={binder} onClick={this.props.onRemove} />
</Row.Item>
<Row.Item width={20} />
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<BoundButton submit='userForm' text={binder._id ? 'Save' : 'Add'} name='submit' binder={binder} />
</Row.Item>
@@ -183,9 +183,9 @@ export class UserForm extends React.Component {
</Column>
</Column.Item>
</Row.Item>
<Row.Item width={20} />
<Row.Item width={sizeInfo.formRowSpacing} />
</Row>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
</Column>
</form>
)

6
website/src/Users/UserList.js
View File

@@ -37,18 +37,18 @@ export class UserList extends React.Component {
? this.state.users.map((user, index) =>
(<List.Item key={user._id || '0'} onClick={(e) => (this.props.onUserListClick(e, index))}
active={user === this.props.selectedUser}>
<List.Icon name={user.administrator ? 'admin' : 'profile'} size={25} />
<List.Icon name={user.administrator ? 'admin' : 'profile'} size={sizeInfo.listIcon} />
<List.Text>
{ user._id ? user.firstName + ' ' + user.lastName : '[New User]' }
</List.Text>
{ user === selectedUser && selectionModified ? <List.Icon name='edit' size={25} /> : null }
{ user === selectedUser && selectionModified ? <List.Icon name='edit' size={sizeInfo.listIcon} /> : null }
</List.Item>)
)
: null
}
</List>
</Column.Item>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}>
<Button width='100%' color='inverse' onClick={this.props.onAddNewUser} text='Add New User' />
</Column.Item>

10
website/src/Users/Users.js
View File

@@ -253,16 +253,16 @@ export class Users extends Component {
return (
<Fragment>
<Column.Item height={20} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item grow>
<Row fillParent>
<Row.Item width={20} />
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item width='25vw'>
<UserList users={this.state.users} selectedUser={this.state.selectedUser}
selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
onAddNewUser={this.handleAddNewUser} />
</Row.Item>
<Row.Item width={20} />
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item grow>
<Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
{
@@ -274,10 +274,10 @@ export class Users extends Component {
}
</Box>
</Row.Item>
<Row.Item width={20} />
<Row.Item width={sizeInfo.formRowSpacing} />
</Row>
</Column.Item>
<Column.Item height={20}>
<Column.Item height={sizeInfo.formColumnSpacing}>
<ChangeEmailModal open={!!changeEmailModal}
oldEmail={changeEmailModal && changeEmailModal.oldEmail}
onDismiss={this.handleChangeEmailDismiss} />

3
website/src/ui/BoundEmailIcon.js
View File

@@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Text, Icon } from 'ui'
import { sizeInfo } from 'ui/style'
export default class BoundEmailIcon extends React.Component {
static propTypes = {
@@ -26,7 +27,7 @@ export default class BoundEmailIcon extends React.Component {
<div>
<Text>&nbsp;</Text>
<br />
<Icon name={value ? 'confirmed' : 'warning'} size={30} margin={0} />
<Icon name={value ? 'confirmed' : 'warning'} size={sizeInfo.formBoundIcon} margin={sizeInfo.formBoundIconMargin} />
</div>
)
}

4
website/src/ui/Button.js
View File

@@ -29,13 +29,13 @@ class Button extends Component {
borderRadius: 10,
background: colorInfo.buttonBackgroundHover,
verticalAlign: 'middle',
padding: '0 15px 0 15px',
padding: sizeInfo.buttonPadding,
outline: 'none',
':hover': {
background: colorInfo.buttonBackground,
},
':disabled': {
background: colorInfo.disabledButtonBackground,
background: colorInfo.buttonDisabledBackground,
},
':active': {
background: colorInfo.buttonBackgroundActive,

10
website/src/ui/Checkbox.js
View File

@@ -32,14 +32,14 @@ class Checkbox extends Component {
},
checkboxUnchecked: {
backgroundColor: colorInfo.uncheckedCheckbox,
backgroundColor: colorInfo.checkboxUnchecked,
':hover': {
backgroundColor: colorInfo.uncheckedCheckboxHover,
backgroundColor: colorInfo.checkboxUncheckedHover,
}
},
checkboxDisabled: {
backgroundColor: colorInfo.disabledButtonBackground,
backgroundColor: colorInfo.buttonDisabledBackground,
},
checkmark: {
@@ -50,8 +50,8 @@ class Checkbox extends Component {
width: 6,
height: 12,
borderStyle: 'solid',
borderColor: '#FFFFFF',
borderWidth: '0 3px 3px 0',
borderColor: colorInfo.checkmark,
borderWidth: sizeInfo.checkmarkBorder,
transform: 'rotate(45deg)',
},

2
website/src/ui/Icon.js
View File

@@ -13,7 +13,7 @@ export default class Icon extends Component {
static defaultProps = {
size: 50,
margin: sizeInfo.iconMargin,
margin: sizeInfo.iconDefaultMargin,
}
static svgs = {

2
website/src/ui/Image.js
View File

@@ -12,7 +12,7 @@ class Image extends Component {
render() {
let { source, width, height } = this.props
const margin = sizeInfo.imageMargin
const margin = sizeInfo.imageDefaultMargin
width = width ? (width - margin * 2) : null
height = height ? (height - margin * 2) : null

17
website/src/ui/Input.js
View File

@@ -1,6 +1,7 @@
import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { colorInfo, sizeInfo, fontInfo } from 'ui/style'
// See https://stackoverflow.com/a/6891562/576235 for why we wrap the <input /> element
@@ -18,28 +19,28 @@ class Input extends Component {
static style = {
div: {
padding: '5px',
padding: sizeInfo.inputPadding,
borderWidth: 1,
borderColor: '#b2b2b2',
backgroundColor: '#ffffff',
borderColor: colorInfo.border,
backgroundColor: colorInfo.inputBackground,
borderStyle: 'solid',
borderRadius: '5px',
borderRadius: sizeInfo.inputBorderRadius,
':focus': {
outline: 'none'
},
},
input: {
fontSize: '16px',
color: '#000000',
fontSize: fontInfo.size.medium,
color: colorInfo.text,
borderWidth: 0,
padding: 0,
margin: 0,
width: '100%',
outline: 'none',
':disabled': {
color: '#AAAAAA',
background: '#ffffff'
color: colorInfo.textDisabled,
background: colorInfo.inputBackground,
}
},
}

2
website/src/ui/List.js
View File

@@ -76,7 +76,7 @@ List.Icon = Radium(class ListIcon extends Component {
verticalAlign: 'middle',
width: size,
height: size,
margin: '5px 10px 5px 10px', // TODO: Put in style.js
margin: sizeInfo.listIconMargin,
}} />
)
}

19
website/src/ui/Loader.js
View File

@@ -1,25 +1,12 @@
import React from 'react'
import Radium from 'radium'
import PropTypes from 'prop-types'
import { colorInfo } from 'ui/style'
import { colorInfo, sizeInfo } from 'ui/style'
import anime from 'animejs'
class Loader extends React.Component {
static propTypes = {
color: PropTypes.string,
size: PropTypes.number,
margin: PropTypes.string
}
static defaultProps = {
color: '#000000',
size: 15,
margin: '2px'
}
render() {
const size = 20
const spacing = 5
const size = sizeInfo.loaderSize
const spacing = sizeInfo.loaderSpacing
const addAnimation = (elem, i) => {
anime({

11
website/src/ui/Modal.js
View File

@@ -1,8 +1,8 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from './Modal.style'
import Radium from 'radium'
import { Dimmer } from 'ui'
import { colorInfo, sizeInfo } from 'ui/style'
class Modal extends Component {
static propTypes = {
@@ -15,12 +15,19 @@ class Modal extends Component {
width: '60%',
}
static style = {
zIndex: 101,
background: colorInfo.modalBackground,
borderRadius: 4,
boxShadow: `0 0 ${sizeInfo.modalShadowWidth} ${colorInfo.modalShadow}`
}
render() {
const { open, children, width } = this.props
return (
<Dimmer active={open}>
<div style={[style.modal, { width }]}>
<div style={[Modal.style, { width }]}>
{children}
</div>
</Dimmer>

10
website/src/ui/Modal.style.js
View File

@@ -1,10 +0,0 @@
import { colorInfo } from './style'
export default {
modal: {
zIndex: 101,
background: colorInfo.modalBackground,
borderRadius: 4,
boxShadow: '0 0 25px #000000'
}
}

10
website/src/ui/PanelButton.js
View File

@@ -13,8 +13,8 @@ class PanelButton extends Component {
static style = {
button: {
borderWidth: 2,
borderRadius: '10px',
borderWidth: sizeInfo.panelButtonBorderWidth,
borderRadius: sizeInfo.panelButtonBorderRadius,
padding: '0 0 0 0',
background: colorInfo.panelButtonBackground,
verticalAlign: 'middle',
@@ -23,7 +23,7 @@ class PanelButton extends Component {
background: colorInfo.panelButtonBackgroundHover,
},
':disabled': {
background: colorInfo.disabledPanelButtonBackground,
background: colorInfo.panelDisabledButtonBackground,
},
':active': {
borderWidth: 0,
@@ -38,11 +38,11 @@ class PanelButton extends Component {
return (
<button type='button'
style={[
PanelButton.style.button, { height: sizeInfo.panelButtonSize, width: sizeInfo.panelButtonSize }
PanelButton.style.button, { height: sizeInfo.panelButton, width: sizeInfo.panelButton }
]}
onClick={onClick}>
<div style={{ position: 'relative' }}>
<Icon name={icon} size={sizeInfo.panelIconSize} margin={0} />
<Icon name={icon} size={sizeInfo.panelButtonIcon} margin={sizeInfo.panelButtonIconMargin} />
<span style={{
position: 'absolute',
top: sizeInfo.panelTextOffset,

62
website/src/ui/style.js
View File

@@ -2,26 +2,38 @@ let colorInfo = {
text: '#000000',
textInverse: '#FFFFFF',
textPlaceholder: '#EEEEEE',
alertText: '#FF0000',
grayText: '#B0B0B0',
textAlert: '#FF0000',
textGray: '#B0B0B0',
textDisabled: '#AAAAAA',
border: '#B2B2B2',
modalShadow: '#000000',
modalBackground: '#FFFFFF',
inputBackground: '#FFFFFF',
buttonBackground: '#3498DB',
buttonBackgroundHover: '#3CB0FD',
buttonBackgroundActive: '#1A72AC',
buttonDisabledBackground: '#E0E0E0',
headerBorder: '#B2B2B2',
headerButtonBackground: '#FAFAFA',
headerButtonBackgroundHover: '#DADADA',
headerButtonBackgroundActive: '#AAAAAA',
headerBorder: '#B2B2B2',
disabledButtonBackground: '#E0E0E0',
modalBackground: '#FFFFFF',
uncheckedCheckbox: '#A0A0A0',
uncheckedCheckboxHover: '#808080',
checkboxUnchecked: '#A0A0A0',
checkboxUncheckedHover: '#808080',
checkmark: '#FFFFFF',
}
Object.assign(colorInfo, {
panelButtonBackground: colorInfo.headerButtonBackground,
panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover,
panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive,
disabledPanelButtonBackground: colorInfo.disabledButtonBackground,
panelDisabledButtonBackground: colorInfo.buttonDisabledBackground,
listBackground: '#FFFFFF',
listBackgroundHover: colorInfo.headerButtonBackgroundHover,
listBackgroundActive: '#E7E5E5',
@@ -30,18 +42,40 @@ Object.assign(colorInfo, {
const sizeInfo = {
headerHeight: 60,
imageMargin: 5, // The margin around images
iconMargin: 10, // The margin around icons
imageDefaultMargin: 5,
iconDefaultMargin: 10,
headerBorderWidth: 1,
listBorderWidth: 1,
buttonHeight: 40,
buttonPadding: '0 15px 0 15px',
minButtonWidth: 100,
checkboxSize: 25,
panelButtonSize: 200,
panelIconSize: 170,
checkmarkBorder: '0 3px 3px 0',
panelButton: 200,
panelButtonIcon: 170,
panelButtonIconMargin: 0,
panelTextOffset: 120,
formBoxRadius: 5,
listTopBottomGap: 10,
modalWidth: 450,
modalShadowWidth: 25,
inputPadding: 5,
inputBorderRadius: 5,
listIconMargin: '5px 10px 5px 10px',
loaderSize: 20,
loaderSpacing: 5,
panelButtonBorderRadius: 25,
panelButtonBorderWidth: 2,
messageModalIcon: 150,
formColumnSpacing: 20,
formRowSpacing: 20,
loginLogoWidth: 250,
footerTextMargin: 10,
panelButtonSpacing: 30,
formBoundIcon: 30,
formBoundIconMargin: 0,
listIcon: 25,
formButtonLarge: 225,
}
const fontInfo = {
@@ -55,8 +89,8 @@ const fontInfo = {
color: {
'normal': colorInfo.text,
'inverse': colorInfo.textInverse,
'alert': colorInfo.alertText,
'dimmed': colorInfo.grayText,
'alert': colorInfo.textAlert,
'dimmed': colorInfo.textGray,
}
}

4
website/src/version.js
View File

@@ -1,6 +1,6 @@
export const versionInfo = {
version: '0.1.0',
fullVersion: '0.1.0-20180226.0',
version: '0.2.0',
fullVersion: '0.2.0-20180307.0',
title: 'Deighton AR System',
copyright: '© 2018, Kingston Software Solutions.',
supportEmail: 'support@kss.us.com',