Fix routing issues. Fix panel layout.

website/src/ui/Icon.js

@@ -1,14 +1,17 @@
+import Radium from 'radium'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { sizeInfo } from './style'
 
 // See https://www.flaticon.com/packs/free-basic-ui-elements
 
+@Radium
 export class Icon extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     size: PropTypes.number,
     margin: PropTypes.number,
+    style: PropTypes.object,
   }
 
   static defaultProps = {
@@ -33,11 +36,11 @@ export class Icon extends Component {
   }
 
   render() {
-    let { size, name, margin } = this.props
+    let { size, name, margin, style } = this.props
     let source = Icon.svgs[name] || Icon.svgs['placeholder']
 
     size -= margin * 2
 
-    return <img style={{ width: size, height: size, margin }} src={source} />
+    return <img style={[{ width: size, height: size, margin }, style]} src={source} />
   }
 }

website/src/ui/PanelButton.js

@@ -43,7 +43,10 @@ export class PanelButton extends Component {
         ]}
         onClick={onClick}>
         <div style={{ position: 'relative' }}>
-          <Icon name={icon} size={sizeInfo.panelButtonIcon} margin={sizeInfo.panelButtonIconMargin} />
+          <Icon
+            name={icon} size={sizeInfo.panelButtonIcon}
+            margin={sizeInfo.panelButtonIconMargin}
+            style={{ position: 'relative', top: sizeInfo.panelButtonIconOffset }} />
           <span style={{
             position: 'absolute',
             top: sizeInfo.panelButtonTextOffset,

website/src/ui/style.js

@@ -61,9 +61,10 @@ const sizeInfo = {
   panelButton: 200,
   panelButtonIcon: 170,
   panelButtonIconMargin: 0,
+  panelButtonIconOffset: -10,
   panelButtonBorderRadius: 25,
   panelButtonBorderWidth: 2,
-  panelButtonTextOffset: 125,
+  panelButtonTextOffset: 120,
   panelButtonSpacing: 30,
 
   formBoxRadius: 5,