From 4d851e7b74b834eab67e899f0f9cdf7dd6dfaba5 Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <rkritesh078@gmail.com>
Date: Sun, 10 Jul 2016 15:19:42 +0530
Subject: [PATCH 1/2] add transition to latest added log

---
 .../ui/components/action_logger/index.js      | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/modules/ui/components/action_logger/index.js b/src/modules/ui/components/action_logger/index.js
index 4706ef1e9006..37b8a799132b 100755
--- a/src/modules/ui/components/action_logger/index.js
+++ b/src/modules/ui/components/action_logger/index.js
@@ -43,11 +43,12 @@ const countStyle = {
 };
 
 const logDivStyle = {
-  margin: 5,
-  paddingBottom: 3,
-  marginBottom: 4,
+  marginLeft: 5,
+  padding: 3,
+  paddingLeft: 0,
   overflow: 'auto',
   borderBottom: '1px solid #fafafa',
+  backgroundColor: 'white',
 };
 
 const inspectorStyle = {
@@ -71,24 +72,34 @@ const actionNameStyle = {
 };
 
 class ActionLogger extends Component {
+  componentDidUpdate() {
+    if (this.refs.latest) {
+      this.refs.latest.style.backgroundColor = '#FFFCE0';
+      setTimeout(() => {
+        this.refs.latest.style.backgroundColor = logDivStyle.backgroundColor;
+      }, 500);
+    }
+  }
 
   getActionData() {
     return this.props.actions
-      .map((action) => (
-      <div style={logDivStyle} key={action.id}>
-        <div style={countWrapper}>
-          { action.count > 1 && <span style={ countStyle }>{ action.count }</span> }
-        </div>
-        <div style={inspectorStyle}>
-          <Inspector
-            showNonenumerable
-            name={action.data.name}
-            data={action.data.args || action.data}
-          />
-        </div>
-        <span style={actionNameStyle}>{action.data.name}</span>
-      </div>
-      ));
+      .map((action, i) => {
+        const ref = i ? '' : 'latest';
+        return (
+          <div style={logDivStyle} key={action.id} ref={ref}>
+            <div style={countWrapper}>
+              { action.count > 1 && <span style={ countStyle }>{ action.count }</span> }
+            </div>
+            <div style={inspectorStyle}>
+              <Inspector
+                showNonenumerable
+                name={action.data.name}
+                data={action.data.args || action.data}
+              />
+            </div>
+            <span style={actionNameStyle}>{action.data.name}</span>
+          </div>
+      );});
   }
 
   render() {

From 9aba7593d9b452dd78fc15f8a2a1b50dc80e55f0 Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <rkritesh078@gmail.com>
Date: Sun, 10 Jul 2016 15:35:05 +0530
Subject: [PATCH 2/2] add CSS fixes

---
 src/modules/ui/components/action_logger/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/modules/ui/components/action_logger/index.js b/src/modules/ui/components/action_logger/index.js
index 37b8a799132b..794cbad2b6d8 100755
--- a/src/modules/ui/components/action_logger/index.js
+++ b/src/modules/ui/components/action_logger/index.js
@@ -55,6 +55,8 @@ const inspectorStyle = {
   marginLeft: 5,
   float: 'none',
   display: 'inline-block',
+  width: 'calc(100% - 140px)',
+  whiteSpace: 'initial'
 };
 
 const countWrapper = {