styling

Author: eternalee

public/app.css

@@ -74,7 +74,7 @@ h2{
     margin: 6px;
     font-size: 1.2em;
     font-weight: 500;
-    letter-spacing: 0.8px;
+    letter-spacing: 0.4px;
     line-height: 15px;
   }
 }

public/stateContainer.css

@@ -20,10 +20,11 @@
   box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
   0 5px 15px 0 rgba(0,0,0,0.08);
   margin-bottom: 15px;
-  padding: 10px;
+  padding: 0px 10px;
 }
 
 .state-span{
+  font-family: 'Roboto';
   margin: 6px;
   font-size: 1.2em;
   font-weight: 500;

src/containers/StateContainer.jsx

@@ -22,18 +22,33 @@ const StateContainer = ({ stateDiffs, clearLog }) => {
         return (
           <div className='stateDiff-div'>
             <span className='state-span'>
-              <ReactJson
-                key={i}
-                src={el}
-                name={null}
-                iconStyle='triangle'
-                indentWidth={1}
-                groupArraysAfterLength={20}
-                enableClipboard={false}
-                collapsed={1}
-                displayDataTypes={false}
-                displayObjectSize={false}
-              />
+              <div key={i}>
+                <div><b>{el.component}: </b>{Object.keys(el.oldState)[0]}</div>
+                <div><b>Old: </b>{el.oldState[Object.keys(el.oldState)[0]]}</div>
+                  {/* <ReactJson
+                  src={el.oldState[Object.keys(el.oldState)[0]]}
+                  name={null}
+                  iconStyle='triangle'
+                  indentWidth={1}
+                  groupArraysAfterLength={20}
+                  enableClipboard={false}
+                  collapsed={1}
+                  displayDataTypes={false}
+                  displayObjectSize={false}
+                  /> */}
+                <div><b>New: </b>{el.newState[Object.keys(el.newState)[0]]}</div>
+                  {/* <ReactJson
+                  src={el.newState[Object.keys(el.newState)[0]]}
+                  name={null}
+                  iconStyle='triangle'
+                  indentWidth={1}
+                  groupArraysAfterLength={20}
+                  enableClipboard={false}
+                  collapsed={1}
+                  displayDataTypes={false}
+                  displayObjectSize={false}
+                  /> */}
+              </div>
             </span>
           </div>
         );