Fix input element styling madness

website/src/ui/PanelButton.js

@@ -1,9 +1,8 @@
 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'
+import { sizeInfo, fontInfo, colorInfo } from 'ui/style'
 
 class PanelButton extends Component {
   static propTypes = {
@@ -12,13 +11,34 @@ class PanelButton extends Component {
     text: PropTypes.string.isRequired,
   }
 
+  static style = {
+    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,
+      }
+    }
+  }
+
   render() {
     const { onClick, icon, text } = this.props
 
     return (
       <button type='button'
         style={[
-          style.button, { height: sizeInfo.panelButtonSize, width: sizeInfo.panelButtonSize }
+          PanelButton.style.button, { height: sizeInfo.panelButtonSize, width: sizeInfo.panelButtonSize }
         ]}
         onClick={onClick}>
         <div style={{ position: 'relative' }}>