Home screen and PanelButtons

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)