From 26e223c9cc5883393c73e08a5583f0086756e442 Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Mon, 22 Oct 2018 22:31:43 +0800
Subject: [PATCH] style: tweak log styles

---
 src/api/logs.js                 |  2 ++
 src/components/Logs.js          | 17 +++++++++++++----
 src/components/Logs.module.scss | 18 +++++++++++-------
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/api/logs.js b/src/api/logs.js
index 0ef2a1e..58f8137 100644
--- a/src/api/logs.js
+++ b/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
diff --git a/src/components/Logs.js b/src/components/Logs.js
index 3538979..d195252 100644
--- a/src/components/Logs.js
+++ b/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] }}>
diff --git a/src/components/Logs.module.scss b/src/components/Logs.module.scss
index 015a791..f3c767e 100644
--- a/src/components/Logs.module.scss
+++ b/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;
+    }
   }
 }