style: tweak log styles

src/api/logs.js

@@ -18,6 +18,7 @@ function getURLAndInit() {
 
 const Size = 300;
 
+let even = false;
 const store = {
   logs: [],
   size: Size,
@@ -28,6 +29,7 @@ const store = {
     // mutate input param in place intentionally
     o.time = time;
     o.id = now - 0;
+    o.even = even = !even;
     this.logs.unshift(o);
     if (this.logs.length > this.size) this.logs.pop();
     // TODO consider throttle this

src/components/Logs.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 
 import Icon from 'c/Icon';
 import ContentHeader from 'c/ContentHeader';
@@ -9,22 +10,30 @@ import yacd from 's/yacd.svg';
 
 import s0 from 'c/Logs.module.scss';
 const colors = {
-  debug: '#8a8a8a',
-  info: '#147d14',
+  debug: 'none',
+  // debug: '#8a8a8a',
+  info: '#454545',
+  // info: '#147d14',
   warning: '#b99105',
   error: '#c11c1c'
 };
+
+const logLineStyleEven = {
+  background: '#282828'
+}
 class LogLine extends Component {
   static propTypes = {
     time: PropTypes.string,
+    even: PropTypes.bool,
     type: PropTypes.string.isRequired,
     payload: PropTypes.string.isRequired
   };
 
   render() {
-    const { time, type, payload } = this.props;
+    const { time, type, payload, even } = this.props;
+    const className = cx({ even });
     return (
-      <li>
+      <li className={className}>
         <div className={s0.logMeta}>
           <div className={s0.logTime}>{time}</div>
           <div className={s0.logType} style={{ backgroundColor: colors[type] }}>

src/components/Logs.module.scss

@@ -13,7 +13,7 @@ $heightHeader: 76px;
   color: $colorf;
   flex-shrink: 0;
   text-align: center;
-  width: 56px;
+  width: 66px;
   background: green;
   border-radius: 5px;
   padding: 3px 5px;
@@ -31,7 +31,9 @@ $heightHeader: 76px;
   display: flex;
   font-family: 'Source Code Pro', Menlo, monospace;
   align-items: center;
-  padding: 8px 0 0;
+  padding: 8px 0;
+  // force wrap
+  width: 100%;
 }
 
 //////////
@@ -42,11 +44,13 @@ $heightHeader: 76px;
   list-style: none;
   color: $colorf;
 
-  li:nth-child(2n) {
-    background: #282828;
-  }
-  li:nth-child(2n + 1) {
-    background: #1f1f1f;
+  :global {
+    li {
+      background: #1f1f1f;
+    }
+    li.even {
+      background: #282828;
+    }
   }
 }