diff --git a/website/src/App.js b/website/src/App.js index b022407..02534e9 100644 --- a/website/src/App.js +++ b/website/src/App.js @@ -7,7 +7,7 @@ import { HeaderButton, Column, Row, Text, Box } from 'ui' import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' import logoImage from 'images/logo.png' import { versionInfo } from './version' -import { sizeInfo } from 'ui/style' +import { sizeInfo, colorInfo } from 'ui/style' import { api } from 'src/API' import { reactAutoBind } from 'auto-bind2' @@ -59,7 +59,7 @@ export class App extends Component { - + {headerButtonsLeft} @@ -67,24 +67,20 @@ export class App extends Component { - + + + + + + + + + + + + - - - - - - - - - - - - - - - - + {'v' + versionInfo.version} {versionInfo.copyright} diff --git a/website/src/Auth/Login.js b/website/src/Auth/Login.js index dd50c81..7fcefda 100644 --- a/website/src/Auth/Login.js +++ b/website/src/Auth/Login.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Component, Fragment } from 'react' import PropTypes from 'prop-types' import { regExpPattern } from 'regexp-pattern' import { api } from 'src/API' @@ -10,7 +10,7 @@ import { FormBinder } from 'react-form-binder' import { reactAutoBind } from 'auto-bind2' import { sizeInfo } from 'ui/style' -export class Login extends React.Component { +export class Login extends Component { static propTypes = { history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) } @@ -96,68 +96,74 @@ export class Login extends React.Component { const { messageModal, waitModal } = this.state return ( - - - -
- - - - - - - - - - - - - - - - - - - - Forgot your password? - - - - - - - - - - - - - - - - - - - - Please contact {versionInfo.supportEmail} to request login credentials. - - - -
- - + + + + + + +
+ + + + + + + + + + + + + + + + + + + + Forgot your password? + + + + + + + + + + + + + + + + + + + + Please contact {versionInfo.supportEmail} to request login credentials. + + + +
+ + + + + + - - - - + + + ) } } diff --git a/website/src/Home/Home.js b/website/src/Home/Home.js index 7cd091b..66e5608 100644 --- a/website/src/Home/Home.js +++ b/website/src/Home/Home.js @@ -1,21 +1,21 @@ -import React from 'react' +import React, { Component, Fragment } from 'react' import PropTypes from 'prop-types' import { Row, Column, PanelButton } from 'ui' -export class Home extends React.Component { +export class Home extends Component { static propTypes = { history: PropTypes.object } render() { return ( - + - (this.props.history.replace('/users'))} /> + (this.props.history.push('/users'))} /> @@ -29,7 +29,7 @@ export class Home extends React.Component { - + ) } } diff --git a/website/src/Modal/ChangeEmailModal.js b/website/src/Modal/ChangeEmailModal.js index 4837ebd..6388a40 100644 --- a/website/src/Modal/ChangeEmailModal.js +++ b/website/src/Modal/ChangeEmailModal.js @@ -68,7 +68,7 @@ export class ChangeEmailModal extends React.Component { binder={this.state.binder} /> - + OK + ) } diff --git a/website/src/ui/Button.style.js b/website/src/ui/Button.style.js index 9298d40..91afc60 100644 --- a/website/src/ui/Button.style.js +++ b/website/src/ui/Button.style.js @@ -1,12 +1,9 @@ -import { colorInfo, fontInfo } from './style' +import { colorInfo } from './style' export default { base: { height: '100%', - borderRadius: '10px', - fontFamily: fontInfo.family, - color: '#FFFFFF', - fontSize: fontInfo.size.large, + borderRadius: 10, background: colorInfo.buttonBackgroundHover, verticalAlign: 'middle', padding: '0 15px 0 15px', @@ -16,6 +13,10 @@ export default { }, ':disabled': { background: colorInfo.disabledButtonBackground, + }, + ':active': { + borderWidth: 0, + background: colorInfo.buttonBackgroundActive, } } } diff --git a/website/src/ui/Column.js b/website/src/ui/Column.js index e9977f5..08cfcef 100644 --- a/website/src/ui/Column.js +++ b/website/src/ui/Column.js @@ -7,13 +7,17 @@ class Column extends Component { children: PropTypes.node, minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + fillParent: PropTypes.bool, } render() { - const { children, minHeight, height } = this.props + const { children, minHeight, height, fillParent } = this.props return ( -
{children}
+
{children}
) } } @@ -31,7 +35,7 @@ Column.Item = Radium(class StackLayoutItem extends Component { const flexGrow = grow ? 1 : null return ( -
+
{children}
) diff --git a/website/src/ui/Icon.js b/website/src/ui/Icon.js index ee1c353..26bc6ee 100644 --- a/website/src/ui/Icon.js +++ b/website/src/ui/Icon.js @@ -8,10 +8,12 @@ export default class Icon extends Component { static propTypes = { name: PropTypes.string.isRequired, size: PropTypes.number, + margin: PropTypes.number, } static defaultProps = { - size: 50 + size: 50, + margin: sizeInfo.iconMargin, } static svgs = { @@ -25,9 +27,8 @@ export default class Icon extends Component { } render() { - let { size, name } = this.props + let { size, name, margin } = this.props let source = Icon.svgs[name] || Icon.svgs['placeholder'] - const margin = sizeInfo.iconMargin size -= margin * 2 diff --git a/website/src/ui/List.js b/website/src/ui/List.js index e1b98c0..c6324d1 100644 --- a/website/src/ui/List.js +++ b/website/src/ui/List.js @@ -1,30 +1,99 @@ import Radium from 'radium' import PropTypes from 'prop-types' import React, { Component } from 'react' -import { fontInfo } from './style' +import { Box, Icon } from '.' +import { sizeInfo, colorInfo, fontInfo } from './style' class List extends Component { static propTypes = { - size: PropTypes.string, - margin: PropTypes.number, children: PropTypes.node } - static defaultProps = { - size: 'medium', - margin: 0 - } - render() { + const { children } = this.props + const listGapItem = (
) + return ( - {this.props.children} + }}> + + {listGapItem} +
+ {children} +
+ {listGapItem} + +
) } } +List.Item = Radium(class ListItem extends Component { + static propTypes = { + children: PropTypes.node, + active: PropTypes.bool, + onClick: PropTypes.func + } + + render() { + const { children, active, onClick } = this.props + + return ( +
+ {children} +
+ ) + } +}) + +List.Icon = Radium(class ListIcon extends Component { + static propTypes = { + name: PropTypes.string, + size: PropTypes.number, + } + + render() { + const { size, name } = this.props + let source = Icon.svgs[name] || Icon.svgs['placeholder'] + + return ( + + ) + } +}) +List.Text = Radium(class ListText extends Component { + static propTypes = { + children: PropTypes.node, + } + + render() { + const { children } = this.props + + return ( + {children} + ) + } +}) + export default Radium(List) diff --git a/website/src/ui/PanelButton.js b/website/src/ui/PanelButton.js index ea48488..27eb7c6 100644 --- a/website/src/ui/PanelButton.js +++ b/website/src/ui/PanelButton.js @@ -22,7 +22,7 @@ class PanelButton extends Component { ]} onClick={onClick}>
- + {children}
+
{children}
) } } @@ -31,7 +35,9 @@ Row.Item = Radium(class RowLayoutItem extends Component { const flexGrow = grow ? 1 : null return ( -
{children}
+
+ {children} +
) } }) diff --git a/website/src/ui/Text.js b/website/src/ui/Text.js index a780c7f..75c4ab6 100644 --- a/website/src/ui/Text.js +++ b/website/src/ui/Text.js @@ -10,6 +10,7 @@ class Text extends Component { margin: PropTypes.number, children: PropTypes.node, width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + hidden: PropTypes.bool, align: PropTypes.string, } @@ -21,10 +22,10 @@ class Text extends Component { } render() { - const { margin, width, align, children } = this.props + const { margin, width, align, hidden, children } = this.props return ( - {children} + }, hidden && { visibility: 'hidden' }]}>{children} ) } } diff --git a/website/src/ui/style.js b/website/src/ui/style.js index be23456..7f16fad 100644 --- a/website/src/ui/style.js +++ b/website/src/ui/style.js @@ -6,9 +6,11 @@ let colorInfo = { grayText: '#B0B0B0', buttonBackground: '#3498DB', buttonBackgroundHover: '#3CB0FD', + buttonBackgroundActive: '#1A72AC', headerButtonBackground: '#FAFAFA', headerButtonBackgroundHover: '#DADADA', headerButtonBackgroundActive: '#AAAAAA', + headerBorder: '#B2B2B2', disabledButtonBackground: '#E0E0E0', modalBackground: '#FFFFFF', uncheckedCheckbox: '#A0A0A0', @@ -20,6 +22,10 @@ Object.assign(colorInfo, { panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover, panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive, disabledPanelButtonBackground: colorInfo.disabledButtonBackground, + listBackground: '#FFFFFF', + listBackgroundHover: colorInfo.headerButtonBackgroundHover, + listBackgroundActive: '#E7E5E5', + listBorder: colorInfo.headerBorder, }) const sizeInfo = { @@ -27,12 +33,15 @@ const sizeInfo = { imageMargin: 5, // The margin around images iconMargin: 10, // The margin around icons headerBorderWidth: 1, + listBorderWidth: 1, buttonHeight: 40, minButtonWidth: 100, checkboxSize: 25, panelButtonSize: 200, panelIconSize: 170, - panelTextOffset: 130, + panelTextOffset: 120, + formBoxRadius: 5, + listTopBottomGap: 10, } const fontInfo = {