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

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,
}
}