move file-explorer styles to its own file

src/app/files/file-explorer.js

@@ -1,5 +1,4 @@
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
 var Treeview = require('remix-debugger').ui.TreeView
 var modalDialog = require('../ui/modaldialog')
 var modalDialogCustom = require('../ui/modal-dialog-custom')
@@ -8,49 +7,7 @@ var EventManager = remixLib.EventManager
 
 var helper = require('../../lib/helper')
 
-var styleGuide = remixLib.ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .fileexplorer       {
-    box-sizing        : border-box;
-  }
-  input[type="file"] {
-      display: none;
-  }
-  .folder,
-  .file               {
-    font-size         : 14px;
-    cursor            : pointer;
-  }
-  .file               {
-    color             : ${styles.leftPanel.text_Teriary};
-  }
-  .hasFocus           {
-    background-color  : ${styles.leftPanel.backgroundColor_FileExplorer};
-  }
-  .rename             {
-    background-color  : ${styles.leftPanel.backgroundColor_Panel};
-  }
-  .remove             {
-    margin-left       : auto;
-    padding-left      : 5px;
-    padding-right     : 5px;
-  }
-  .activeMode         {
-    display           : flex;
-    width             : 100%;
-    margin-right      : 10px;
-    padding-right     : 19px;
-  }
-  .activeMode > div   {
-    min-width         : 10px;
-  }
-  ul                  {
-    padding           : 0;
-  }
-`
-module.exports = fileExplorer
+var css = require('./styles/file-explorer-styles')
 
 function fileExplorer (appAPI, files) {
   var self = this
@@ -278,3 +235,5 @@ fileExplorer.prototype.ensureRoot = function (cb) {
     if (cb) cb()
   })
 }
+
+module.exports = fileExplorer

src/app/files/styles/file-explorer-styles.js

@@ -0,0 +1,46 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .fileexplorer       {
+    box-sizing        : border-box;
+  }
+  input[type="file"] {
+      display: none;
+  }
+  .folder,
+  .file               {
+    font-size         : 14px;
+    cursor            : pointer;
+  }
+  .file               {
+    color             : ${styles.leftPanel.text_Teriary};
+  }
+  .hasFocus           {
+    background-color  : ${styles.leftPanel.backgroundColor_FileExplorer};
+  }
+  .rename             {
+    background-color  : ${styles.leftPanel.backgroundColor_Panel};
+  }
+  .remove             {
+    margin-left       : auto;
+    padding-left      : 5px;
+    padding-right     : 5px;
+  }
+  .activeMode         {
+    display           : flex;
+    width             : 100%;
+    margin-right      : 10px;
+    padding-right     : 19px;
+  }
+  .activeMode > div   {
+    min-width         : 10px;
+  }
+  ul                  {
+    padding           : 0;
+  }
+`
+
+module.exports = css