fix: icons and style

Author: foxhound87

README.md

@@ -24,7 +24,8 @@ npm install --save mobx-react-form-devtools
 ## Usage
 
 ```javascript
-import MobxReactFormDevTools from './mobx-react-form-devtools';
+import MobxReactFormDevTools from 'mobx-react-form-devtools';
+import 'mobx-react-form-devtools/style/devtools.css';';
 
 // register forms
 MobxReactFormDevTools.register({
@@ -37,6 +38,13 @@ MobxReactFormDevTools.register({
 MobxReactFormDevTools.select('registerForm');
 ```
 
+## Link DevTools to Demo
+
+```bash
+❯ git clone -b master [email protected]:foxhound87/mobx-react-form-devtools.git mobx-react-form-devtools--master
+❯ ln -s ../mobx-react-form-devtools--master ./mobx-react-form--demo/devtools
+```
+
 ## Contributing
 
 If you want to contribute to the development, do not hesitate to fork the repo and send pull requests.

package.json

@@ -36,6 +36,7 @@
     "devtools"
   ],
   "files": [
+    "style",
     "es6",
     "lib",
     "umd"
@@ -57,6 +58,7 @@
     "mobx-react": "^3.5.8",
     "react-dock": "0.2.3",
     "react-draggable": "^2.2.2",
+    "react-icons": "2.2.1",
     "react-json-tree": "^0.10.0",
     "react-tooltip": "^3.2.1"
   },
@@ -73,8 +75,8 @@
     "babel-plugin-transform-class-properties": "6.16.0",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
     "babel-preset-es2015": "6.16.0",
-    "babel-preset-stage-0": "6.16.0",
     "babel-preset-react": "6.16.0",
+    "babel-preset-stage-0": "6.16.0",
     "babel-register": "6.16.3",
     "chai": "3.5.0",
     "codecov": "1.0.1",
@@ -86,7 +88,6 @@
     "eslint-plugin-import": "1.16.0",
     "eslint-plugin-jsx-a11y": "2.2.3",
     "eslint-plugin-react": "6.4.1",
-    "file-loader": "^0.9.0",
     "ghooks": "1.3.2",
     "mobx": "2.6.0",
     "mocha": "3.1.2",
@@ -98,9 +99,8 @@
     "react": "15.3.2",
     "react-dom": "15.3.2",
     "rimraf": "2.5.4",
-    "semantic-release": "^4.3.5",
-    "style-loader": "^0.13.1",
-    "url-loader": "^0.5.7",
+    "semantic-release": "4.3.5",
+    "style-loader": "0.13.1",
     "webpack": "1.13.2"
   }
 }

src/Debug.jsx

@@ -7,8 +7,17 @@ import ReactTooltip from 'react-tooltip';
 import JSONTree from 'react-json-tree';
 import cx from 'classnames';
 import _ from 'lodash';
+
+import IconFaTh from 'react-icons/lib/fa/th';
+import IconFaBars from 'react-icons/lib/fa/bars';
+import IconFaCircleO from 'react-icons/lib/fa/circle-o';
+import IconFaBook from 'react-icons/lib/fa/book';
+import IconFaChevronLeft from 'react-icons/lib/fa/chevron-left';
+import IconFaChevronCircleRight from 'react-icons/lib/fa/chevron-circle-right';
+
 import theme from './theme';
 
+
 /* map object */
 function mapo(object, callback) {
   return Object.keys(object).map(key =>
@@ -132,7 +141,7 @@ const SelectInitialForm = observer(({ store, actions }) =>
           value={key}
           onClick={e => handleInitialFormSelect(e, key, actions)}
         >
-          <i className="fa fa-circle-o" /> {val}
+          <IconFaCircleO className="icon" /> {val}
         </button>
       )}
     </div>
@@ -143,7 +152,7 @@ const RenderFormData = observer(({ store, actions }) =>
   <div className="tree">
     <h3 className="clearfix">
       <div className="left title">
-        <i className="fa fa-th" /> Form
+        <IconFaTh className="icon" /> Form
       </div>
       <div className="right select">
         <SelectMenu store={store} actions={actions} />
@@ -155,7 +164,7 @@ const RenderFormData = observer(({ store, actions }) =>
       theme={theme}
       isLightTheme={false}
     />
-    <h4><i className="fa fa-bars" /> Fields</h4>
+    <h4><IconFaBars className="icon" /> Fields</h4>
     <JSONTree
       hideRoot
       data={parseFieldsData(store.selected.form.fields)}
@@ -180,19 +189,19 @@ export default observer(({ store, actions }) => (
 
     <Draggable
       axis="y"
-      handle=".handle"
+      handle=".devtools-drag"
       zIndex={99999999999}
       defaultPosition={{ x: 0, y: 0 }}
     >
       <div className={cx('draggable', { hidden: tools.open })}>
-        <div className="handle" data-tip="DRAG">
-          <i className="fa fa-bars" />
+        <div className="devtools-drag" data-tip="DRAG">
+          <IconFaBars className="icon" />
         </div>
         <button onClick={handleOnOpenTools} data-tip="OPEN">
-          <i className="fa fa-chevron-left" />
+          <IconFaChevronLeft className="icon" />
         </button>
         <button onClick={handleOnOpenDoc} data-tip="DOCS">
-          <i className="fa fa-book" />
+          <IconFaBook className="icon" />
         </button>
       </div>
     </Draggable>
@@ -204,10 +213,10 @@ export default observer(({ store, actions }) => (
           <b className={cx({ hidden: !tools.heading.sub })}>DEVTOOLS</b>
         </div>
         <button className="right" onClick={handleOnCloseTools} data-tip="CLOSE">
-          <i className="fa fa-chevron-circle-right" />
+          <IconFaChevronCircleRight className="icon" />
         </button>
         <button className="right" onClick={handleOnOpenDoc} data-tip="DOCS">
-          <i className="fa fa-book" />
+          <IconFaBook className="icon" />
         </button>
       </div>
       {(store.selected.form && store.selected.key)

src/index.js

@@ -1,4 +1,3 @@
 import DevTools from './DevTools';
-import './style.css';
 
 export default DevTools;

src/style.css renamed to style/devtools.css

@@ -57,11 +57,11 @@
   background: #ebcb8b;
 }
 
-.mobx-react-form-devtools .draggable i {
+.mobx-react-form-devtools .draggable .icon {
   font-size: 15px;
 }
 
-.mobx-react-form-devtools .draggable .fa-bars {
+.mobx-react-form-devtools .draggable .devtools-drag .icon {
   font-size: 22px;
   color: #a7adba;
 }
@@ -118,17 +118,17 @@
   text-transform: uppercase;
 }
 
-.mobx-react-form-devtools .draggable i {
+.mobx-react-form-devtools .draggable .icon {
   color: #2b303b;
 }
 
-.mobx-react-form-devtools .heading button i {
+.mobx-react-form-devtools .heading button .icon {
   color: #a3be8c;
   font-size: 25px;
   margin: 10px 10px 0 0;
 }
 
-.mobx-react-form-devtools .heading button i:hover {
+.mobx-react-form-devtools .heading button .icon:hover {
   color: #ebcb8b;
 }
 
@@ -155,7 +155,7 @@
   background: #343d46;
 }
 
-.mobx-react-form-devtools .initialMenu button i {
+.mobx-react-form-devtools .initialMenu button .icon {
   color: #ebcb8b;
 }
 
@@ -184,10 +184,6 @@
   background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=');
 }
 
-.menu select {
-  border: 1px solid #F87666;
-}
-
 @media screen and (min-width: 0px) and (max-width: 450px) {
   .mobx-react-form-devtools { display: none; }
 }

webpack.config.babel.js

@@ -7,18 +7,9 @@ const loaders = [{
   test: /\.jsx?$/,
   exclude: /node_modules/,
   loader: 'babel-loader',
-}, {
-  test: /\.json$/,
-  loader: 'json-loader',
 }, {
   test: /\.css$/,
   loader: 'style-loader!css-loader!postcss-loader',
-}, {
-  test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
-  loader: 'url-loader?mimetype=application/font-woff',
-}, {
-  test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
-  loader: 'file-loader?name=[name].[ext]',
 }];
 
 const postcss = $webpack => [