diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js index 9890b01d..23438ef4 100644 --- a/src/react/LogMonitorEntry.js +++ b/src/react/LogMonitorEntry.js @@ -7,6 +7,13 @@ const preStyle = { margin: 0, padding: 0 }; +const h4Style = { + fontWeight: 500, + lineHeight: 1.1, + fontSize: "18px", + marginTop: "10px", + marginBottom: "10px" +} const liStyle = { marginBottom: "20px", position: "relative" @@ -21,6 +28,10 @@ const wrap2Style = { width: "100%" }; const wrap3Style = { + width: "100%", + display: "table-cell" +}; +const wrap3StyleMax = { width: "800px", display: "table-cell" }; @@ -113,45 +124,43 @@ export default class LogMonitorEntry extends Component { const { r, g, b } = colorFromString(action.type); const colorStyle = {color: `rgb(${r}, ${g}, ${b})`}; + // Heading - let headingComponent = !maximizedAction ? ( -

- - {" " + action.type} + const actionComponent = !maximizedAction ? ( +

+ {"+ " + action.type}

) : (
            
-              
-              {JSON.stringify(action, null, 2)}
+              {"- " + JSON.stringify(action, null, 2)}
            
         
); - // State - let stateComponent = !maximizedState ? ( -

- - {" State: object {...}"} + // Action + const stateComponent = !maximizedState ? ( +

+ {"+ State: object {...}"}

) : (
-            
-            {this.printState(state, error)}
+            {"- " + this.printState(state, error)}
          
); + const collapsedComponent = !collapsed ? ✔ Enabled : ✘ Disabled; + return (
  • -
    +
    - - {!collapsed ? " Enabled" : " Disabled"} + {collapsedComponent} this.setState({maximizedAction: !maximizedAction})} href="javascript:;"> - {headingComponent} + {actionComponent} this.setState({maximizedState: !maximizedState})} href="javascript:;"> {stateComponent}