Inline styles instead of .less

src/react/LogMonitor.js

@@ -1,9 +1,12 @@
 import React, { PropTypes, findDOMNode } from 'react';
 import LogMonitorEntry from './LogMonitorEntry';
 
-if(BROWSER){
+const ulStyle = {
-   require("./LogMonitorEntries.less");
+   listStyle: "none",
-}
+   padding: "20px 0 20px",
+   position: "relative"
+};
+
 export default class LogMonitor {
   constructor() {
     window.addEventListener('keydown', ::this.handleKeyPress);
@@ -138,7 +141,7 @@ export default class LogMonitor {
             </a>
           </div>
         </div>
-         <ul className="redux-devtool-entries">
+         <ul style={ulStyle}>
             {elements}
          </ul>
         <div>

src/react/LogMonitorEntries.less

@@ -1,43 +0,0 @@
-.redux-devtool-entries {
-   list-style: none;
-   padding: 20px 0 20px;
-   position: relative;
-   pre {
-      background-color: transparent;
-      color: white;
-      border: 0;
-      margin: 0;
-      padding: 0;
-   }
-   > li {
-      margin-bottom: 20px;
-      position: relative;
-   }
-   > li:before, > li:after {
-      content: " ";
-      display: table;
-   }
-   > li:after {
-      clear: both;
-   }
-   > li:before, > li:after {
-      content: " ";
-      display: table;
-   }
-   > li:after {
-      clear: both;
-   }
-   .wrap-1{
-      whiteSpace: nowrap;
-      overflow: auto;
-   }
-   .wrap-2{
-      display: table;
-      tableLayout: fixed;
-      width: 100%;
-   }
-   .wrap-3{
-      width: 400px;
-      display: table-cell;
-   }
-}

src/react/LogMonitorEntry.js

@@ -1,5 +1,30 @@
 import React, { PropTypes, Component } from 'react';
 
+const preStyle = {
+   backgroundColor: "transparent",
+   color: "white",
+   border: 0,
+   margin: 0,
+   padding: 0
+};
+const liStyle = {
+   marginBottom: "20px",
+   position: "relative"
+};
+const wrap1Style = {
+   whiteSpace: "nowrap",
+   overflow: "auto"
+};
+const wrap2Style = {
+   display: "table",
+   tableLayout: "fixed",
+   width: "100%"
+};
+const wrap3Style = {
+   width: "800px",
+   display: "table-cell"
+};
+
 function hsvToRgb(h, s, v) {
    const i = Math.floor(h);
    const f = h - i;
@@ -95,7 +120,7 @@ export default class LogMonitorEntry extends Component {
             {" " + action.type}
          </h4>
       ) : (
-         <pre>
+         <pre style={preStyle}>
            <a style={colorStyle}>
               <i className="fa fa-minus-square"></i>
               {JSON.stringify(action, null, 2)}
@@ -110,17 +135,17 @@ export default class LogMonitorEntry extends Component {
             {" State: object {...}"}
          </h4>
       ) : (
-         <pre>
+         <pre style={preStyle}>
             <i className="fa fa-minus-square"></i>
             {this.printState(state, error)}
          </pre>
       );
 
       return (
-         <li>
+         <li style={liStyle}>
-            <div className={"wrap-1"}>
+            <div style={wrap1Style}>
-               <div className={"wrap-2"}>
+               <div style={wrap2Style}>
-                  <div className={"wrap-3"}>
+                  <div style={wrap3Style}>
                      <a onClick={::this.handleCollapseClick} href="javascript:;">
                         <i className={"fa fa-" + (collapsed ? "ban" : "check")}></i>
                         {!collapsed ? " Enabled" : " Disabled"}