feat: clean up logmonitor

src/react/DebugPanel.js

@@ -12,17 +12,15 @@ export function getDefaultStyle(props) {
   return {
     position: 'fixed',
     zIndex: 999,
-    fontSize: 17,
     overflow: 'auto',
-    opacity: 0.92,
-    background: 'black',
+    background: 'rgb(27, 27, 27)',
     color: 'white',
     left: left ? 0 : undefined,
     right: right ? 0 : undefined,
     top: top ? 0 : undefined,
     bottom: bottom ? 0 : undefined,
     maxHeight: (bottom && top) ? '100%' : '20%',
-    maxWidth: (left && right) ? '100%' : '20%',
+    maxWidth: (left && right) ? '100%' : '25%',
     wordWrap: 'break-word'
   };
 }

src/react/LogMonitor.js

@@ -122,48 +122,51 @@ export default class LogMonitor {
         position: 'relative',
         padding: '1rem'
       }}>
-        <div>
-          <div style={{
-            paddingBottom: '.5rem'
-          }}>
-            <small>Press Ctrl+H to hide.</small>
+        <div style={{marginBottom: 40, fontSize: 12}}>
+          <div style={{float: 'left'}}>
+            {computedStates.length > 1 &&
+              <button onClick={::this.handleRollback} style={{
+                cursor: 'hand',
+                padding: '5px 7px',
+                border: '1px solid #eee',
+                display: 'inline-block'
+              }}>
+                Rollback
+              </button>
+            }
+            {Object.keys(skippedActions).some(key => skippedActions[key]) &&
+              <button onClick={::this.handleSweep} style={{
+                cursor: 'hand',
+                padding: '5px 7px',
+                border: '1px solid #eee',
+                display: 'inline-block'
+              }}>
+                Sweep
+              </button>
+            }
+            {computedStates.length > 1 &&
+              <button onClick={::this.handleCommit} style={{
+                cursor: 'hand',
+                padding: '5px 7px',
+                border: '1px solid #eee',
+                display: 'inline-block'
+              }}>
+                Commit
+              </button>
+            }
           </div>
-          <div>
-            <a onClick={::this.handleReset}
-               style={{ textDecoration: 'underline', cursor: 'hand' }}>
-              <small>Reset</small>
-            </a>
+          <div style={{float: 'right'}}>
+            <button onClick={::this.handleReset} style={{
+              cursor: 'hand',
+              padding: '5px 7px',
+              border: '1px solid #eee',
+              display: 'inline-block'
+            }}>
+              Reset
+            </button>
           </div>
         </div>
         {elements}
-        <div>
-          {computedStates.length > 1 &&
-            <a onClick={::this.handleRollback}
-               style={{ textDecoration: 'underline', cursor: 'hand' }}>
-              Rollback
-            </a>
-          }
-          {Object.keys(skippedActions).some(key => skippedActions[key]) &&
-            <span>
-              {' • '}
-              <a onClick={::this.handleSweep}
-                 style={{ textDecoration: 'underline', cursor: 'hand' }}>
-                Sweep
-              </a>
-            </span>
-          }
-          {computedStates.length > 1 &&
-            <span>
-              <span>
-              {' • '}
-              </span>
-              <a onClick={::this.handleCommit}
-                 style={{ textDecoration: 'underline', cursor: 'hand' }}>
-                Commit
-              </a>
-            </span>
-          }
-        </div>
       </div>
     );
   }

src/react/LogMonitorEntry.js

@@ -49,7 +49,7 @@ export default class LogMonitorEntry {
     let errorText = error;
     if (!errorText) {
       try {
-        return JSON.stringify(this.props.select(state));
+        return JSON.stringify(this.props.select(state), null, 2);
       } catch (err) {
         errorText = 'Error selecting state.';
       }
@@ -77,14 +77,14 @@ export default class LogMonitorEntry {
 
     return (
       <div style={{
-        textDecoration: collapsed ? 'line-through' : 'none'
+        textDecoration: collapsed ? 'line-through' : 'none',
+        borderBottom: '1px solid #333',
+        paddingBottom: '1em'
       }}>
         <a onClick={::this.handleActionClick}
            style={{
              opacity: collapsed ? 0.5 : 1,
-             marginTop: '1em',
              display: 'block',
-             paddingBottom: '1em',
              paddingTop: '1em',
              color: `rgb(${r}, ${g}, ${b})`,
              cursor: (index > 0) ? 'hand' : 'default',
@@ -94,27 +94,16 @@ export default class LogMonitorEntry {
         </a>
 
         {!collapsed &&
-          <p style={{
-            textAlign: 'center',
-            transform: 'rotate(180deg)'
-          }}>
-            ⇧
-          </p>
-        }
-
-        {!collapsed &&
-          <div style={{
-            paddingBottom: '1em',
-            paddingTop: '1em',
-            color: 'lightyellow'
+          <pre style={{
+            backgroundColor: '#fff',
+            color: '#111',
+            padding: 10,
+            marginTop: 10,
+            fontSize: 15
           }}>
             {this.printState(state, error)}
-          </div>
+          </pre>
         }
-
-        <hr style={{
-          marginBottom: '2em'
-        }} />
       </div>
     );
   }