Home screen and PanelButtons

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() {

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

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 (
+      <button type='button'
+        style={[
+          style.button, { height: sizeInfo.panelButtonSize, width: sizeInfo.panelButtonSize }
+        ]}
+        onClick={onClick}>
+        <div style={{ position: 'relative' }}>
+          <Icon name={icon} size={sizeInfo.panelIconSize} />
+          <span style={{
+            position: 'absolute',
+            top: sizeInfo.panelTextOffset,
+            left: 0,
+            display: 'block',
+            fontSize: fontInfo.size.huge,
+            fontFamily: fontInfo.family,
+            color: fontInfo.color.text,
+            textAlign: 'center',
+            width: '100%',
+          }}>{text}</span>
+        </div>
+      </button>
+    )
+  }
+}
+
+export default Radium(PanelButton)

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

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'

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 }