Style buttons

* Use flexbox for alignment
* Add more obvious disabled state
* Add more subtle hover state

src/react/LogMonitor.js

@@ -13,14 +13,18 @@ const styles = {
     fontSize: '0.95em'
   },
   buttonBar: {
-    height: 40,
-    textAlign: 'center'
+    textAlign: 'center',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderColor: 'transparent',
+    zIndex: 1,
+    display: 'flex'
   },
   elements: {
     position: 'absolute',
     left: 0,
     right: 0,
-    top: 40,
+    top: 38,
     bottom: 0,
     overflowX: 'hidden',
     overflowY: 'auto'
@@ -158,7 +162,7 @@ export default class LogMonitor {
 
     return (
       <div style={{...styles.container, backgroundColor: theme.base00}}>
-        <div style={styles.buttonBar}>
+        <div style={{...styles.buttonBar, borderColor: theme.base02}}>
           <LogMonitorButton theme={theme} onClick={::this.handleReset}>Reset</LogMonitorButton>
           <LogMonitorButton theme={theme} onClick={::this.handleRollback} enabled={computedStates.length}>Revert</LogMonitorButton>
           <LogMonitorButton theme={theme} onClick={::this.handleSweep} enabled={Object.keys(skippedActions).some(key => skippedActions[key])}>Sweep</LogMonitorButton>

src/react/LogMonitorButton.js

@@ -1,15 +1,17 @@
 import React from 'react';
+import brighten from '../utils/brighten';
 
 const styles = {
   base: {
+    cursor: 'pointer',
+    fontWeight: 'bold',
+    borderRadius: 3,
+    padding: 4,
+    marginLeft: 3,
+    marginRight: 3,
     marginTop: 5,
-    marginLeft: 4,
-    minWidth: 40,
-    paddingLeft: 6,
-    paddingRight: 6,
-    height: 30,
-    borderRadius: 4,
-    lineHeight: "30px",
+    marginBottom: 5,
+    flexGrow: 1,
     display: 'inline-block',
     fontSize: '0.8em'
   }
@@ -52,18 +54,20 @@ export default class LogMonitorButton extends React.Component {
   render() {
     let style = {
       ...styles.base,
-      backgroundColor: this.props.theme.base01
+      backgroundColor: this.props.theme.base02
     };
     if (this.props.enabled && this.state.hovered) {
       style = {
         ...style,
-        backgroundColor: this.props.theme.base00
+        backgroundColor: brighten(this.props.theme.base02, 0.2)
       };
     }
     if (!this.props.enabled) {
       style = {
         ...style,
-        opacity: 0.5
+        opacity: 0.2,
+        cursor: 'text',
+        backgroundColor: 'transparent'
       }
     }
     return (

src/utils/brighten.js

@@ -0,0 +1,16 @@
+export default function(hex, lum) {
+  hex = String(hex).replace(/[^0-9a-f]/gi, "");
+  if (hex.length < 6) {
+      hex = hex.replace(/(.)/g, '$1$1');
+  }
+  lum = lum || 0;
+
+  var rgb = "#",
+      c;
+  for (var i = 0; i < 3; ++i) {
+      c = parseInt(hex.substr(i * 2, 2), 16);
+      c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
+      rgb += ("00" + c).substr(c.length);
+  }
+  return rgb;
+};