diff --git a/website/src/Home/Home.js b/website/src/Home/Home.js index 296063c..4939e0c 100644 --- a/website/src/Home/Home.js +++ b/website/src/Home/Home.js @@ -1,9 +1,30 @@ import React from 'react' +import { Row, Column, PanelButton } from 'ui' export class Home extends React.Component { render() { return ( -
+ + + + + + + + + + + + + + + + + + + + + ) } } diff --git a/website/src/Users/Users.js b/website/src/Users/Users.js index 5a80447..06b3b31 100644 --- a/website/src/Users/Users.js +++ b/website/src/Users/Users.js @@ -1,5 +1,5 @@ import React from 'react' -import { autoBind } from 'auto-bind2' +import { reactAutoBind } from 'auto-bind2' import { UserList } from './UserList' import { UserForm } from './UserForm' import { UserFormPlaceholder } from './UserFormPlaceholder' @@ -10,7 +10,7 @@ import { YesNoMessageModal, MessageModal, ChangeEmailModal, WaitModal } from '.. export class Users extends React.Component { constructor() { super() - autoBind(this, (name) => (name.startsWith('handle'))) + reactAutoBind(this) this.state = { selectedUser: null, users: [], @@ -239,16 +239,12 @@ export class Users extends React.Component { return (
Users
- - {/* User List - Displayed on left hand side. */} - - {/* User Info - Displayed on right hand side. */} { this.state.selectedUser diff --git a/website/src/assets/icons/system.svg b/website/src/assets/icons/system.svg new file mode 100644 index 0000000..9380d82 --- /dev/null +++ b/website/src/assets/icons/system.svg @@ -0,0 +1,18 @@ + + + + system + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/src/assets/icons/teams.png b/website/src/assets/icons/teams.png new file mode 100644 index 0000000..191de46 Binary files /dev/null and b/website/src/assets/icons/teams.png differ diff --git a/website/src/assets/icons/teams.svg b/website/src/assets/icons/teams.svg new file mode 100644 index 0000000..bf31c59 --- /dev/null +++ b/website/src/assets/icons/teams.svg @@ -0,0 +1,28 @@ + + + + teams + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/src/assets/icons/users.png b/website/src/assets/icons/users.png new file mode 100644 index 0000000..372bb2f Binary files /dev/null and b/website/src/assets/icons/users.png differ diff --git a/website/src/assets/icons/users.svg b/website/src/assets/icons/users.svg new file mode 100644 index 0000000..b2d963c --- /dev/null +++ b/website/src/assets/icons/users.svg @@ -0,0 +1,27 @@ + + + + users + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/src/ui/HeaderButton.js b/website/src/ui/HeaderButton.js index 1326988..c53ae8b 100644 --- a/website/src/ui/HeaderButton.js +++ b/website/src/ui/HeaderButton.js @@ -9,7 +9,7 @@ class HeaderButton extends Component { static propTypes = { onClick: PropTypes.func, icon: PropTypes.string, - image: PropTypes.object, + image: PropTypes.string, } render() { diff --git a/website/src/ui/Icon.js b/website/src/ui/Icon.js index b81c08e..ee1c353 100644 --- a/website/src/ui/Icon.js +++ b/website/src/ui/Icon.js @@ -18,6 +18,9 @@ export default class Icon extends Component { logout: require('icons/logout.svg'), profile: require('icons/profile.svg'), hold: require('icons/hold.svg'), + users: require('icons/users.svg'), + teams: require('icons/teams.svg'), + system: require('icons/system.svg'), placeholder: require('icons/placeholder.svg'), } diff --git a/website/src/ui/PanelButton.js b/website/src/ui/PanelButton.js new file mode 100644 index 0000000..ea48488 --- /dev/null +++ b/website/src/ui/PanelButton.js @@ -0,0 +1,43 @@ +import Radium from 'radium' +import PropTypes from 'prop-types' +import React, { Component } from 'react' +import style from './PanelButton.style' +import { Icon } from '.' +import { sizeInfo, fontInfo } from 'ui/style' + +class PanelButton extends Component { + static propTypes = { + onClick: PropTypes.func, + icon: PropTypes.string.isRequired, + text: PropTypes.string.isRequired, + } + + render() { + const { onClick, icon, text } = this.props + + return ( + + ) + } +} + +export default Radium(PanelButton) diff --git a/website/src/ui/PanelButton.style.js b/website/src/ui/PanelButton.style.js new file mode 100644 index 0000000..2596154 --- /dev/null +++ b/website/src/ui/PanelButton.style.js @@ -0,0 +1,22 @@ +import { colorInfo } from './style' + +export default { + button: { + borderWidth: 2, + borderRadius: '10px', + padding: '0 0 0 0', + background: colorInfo.panelButtonBackground, + verticalAlign: 'middle', + outline: 'none', + ':hover': { + background: colorInfo.panelButtonBackgroundHover, + }, + ':disabled': { + background: colorInfo.disabledPanelButtonBackground, + }, + ':active': { + borderWidth: 0, + background: colorInfo.panelButtonBackgroundActive, + } + } +} diff --git a/website/src/ui/index.js b/website/src/ui/index.js index cf6195d..06e0c77 100644 --- a/website/src/ui/index.js +++ b/website/src/ui/index.js @@ -2,6 +2,7 @@ export { default as Anime } from './Anime' export { default as Box } from './Box' export { default as Button } from './Button' export { default as HeaderButton } from './HeaderButton' +export { default as PanelButton } from './PanelButton' export { default as Checkbox } from './Checkbox' export { default as Input } from './Input' export { default as Image } from './Image' diff --git a/website/src/ui/style.js b/website/src/ui/style.js index 8528c70..be23456 100644 --- a/website/src/ui/style.js +++ b/website/src/ui/style.js @@ -1,4 +1,4 @@ -export const colorInfo = { +let colorInfo = { text: '#000000', textInverse: '#FFFFFF', textPlaceholder: '#EEEEEE', @@ -15,7 +15,14 @@ export const colorInfo = { uncheckedCheckboxHover: '#808080', } -export const sizeInfo = { +Object.assign(colorInfo, { + panelButtonBackground: colorInfo.headerButtonBackground, + panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover, + panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive, + disabledPanelButtonBackground: colorInfo.disabledButtonBackground, +}) + +const sizeInfo = { headerHeight: 60, imageMargin: 5, // The margin around images iconMargin: 10, // The margin around icons @@ -23,9 +30,12 @@ export const sizeInfo = { buttonHeight: 40, minButtonWidth: 100, checkboxSize: 25, + panelButtonSize: 200, + panelIconSize: 170, + panelTextOffset: 130, } -export const fontInfo = { +const fontInfo = { family: 'Hind, sans-serif', // https://fonts.google.com/specimen/Hind?selection.family=Hind size: { small: '10pt', @@ -40,3 +50,5 @@ export const fontInfo = { 'dimmed': colorInfo.grayText, } } + +export { colorInfo, sizeInfo, fontInfo }