move css styles of settings-tab to its own file

src/app/tabs/settings-tab.js

@@ -5,83 +5,10 @@ var QueryParams = require('../../lib/query-params')
 var remixLib = require('remix-lib')
 var Storage = remixLib.Storage
 var styleGuide = remixLib.ui.themeChooser
-
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styles = styleGuide.chooser()
 var helper = require('../../lib/helper')
 var modal = require('../ui/modal-dialog-custom')
 
-var css = csjs`
+var css = require('./styles/settings-tab-styles')
-  .settingsTabView {
-    padding: 2%;
-    display: flex;
-  }
-  .info {
-    ${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
-    margin-bottom: 1em;
-    word-break: break-word;
-  }
-  .title {
-    font-size: 1.1em;
-    font-weight: bold;
-    margin-bottom: 1em;
-  }
-  .crow {
-    display: flex;
-    overflow: auto;
-    clear: both;
-    padding: .2em;
-  }
-  .checkboxText {
-    font-weight: normal;
-  }
-  .crow label {
-    cursor:pointer;
-  }
-  .crowNoFlex {
-    overflow: auto;
-    clear: both;
-  }
-  .attention {
-    margin-bottom: 1em;
-    padding: .5em;
-    font-weight: bold;
-  }
-  .select {
-    font-weight: bold;
-    margin-top: 1em;
-    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
-  }
-  .heading {
-    margin-bottom: 0;
-  }
-  .explaination {
-    margin-top: 3px;
-    margin-bottom: 3px;
-  }
-  input {
-    margin-right: 5px;
-    cursor: pointer;
-  }
-  input[type=radio] {
-    margin-top: 2px;
-  }
-  .pluginTextArea {
-    font-family: unset;
-  }
-  .pluginLoad {
-    vertical-align: top;
-  }
-  i.warnIt {
-    color: ${styles.appProperties.warningText_Color};
-  }
-  .icon {
-    margin-right: .5em;
-  }
-}
-`
-module.exports = SettingsTab
 
 function SettingsTab (container, appAPI, appEvents, opts) {
   if (typeof container === 'string') container = document.querySelector(container)
@@ -305,3 +232,5 @@ function loadVersion (version, queryParams, appAPI, el) {
     setVersionText('(loading)', el)
   }
 }
+
+module.exports = SettingsTab

src/app/tabs/styles/settings-tab-styles.js

@@ -0,0 +1,76 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .settingsTabView {
+    padding: 2%;
+    display: flex;
+  }
+  .info {
+    ${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
+    margin-bottom: 1em;
+    word-break: break-word;
+  }
+  .title {
+    font-size: 1.1em;
+    font-weight: bold;
+    margin-bottom: 1em;
+  }
+  .crow {
+    display: flex;
+    overflow: auto;
+    clear: both;
+    padding: .2em;
+  }
+  .checkboxText {
+    font-weight: normal;
+  }
+  .crow label {
+    cursor:pointer;
+  }
+  .crowNoFlex {
+    overflow: auto;
+    clear: both;
+  }
+  .attention {
+    margin-bottom: 1em;
+    padding: .5em;
+    font-weight: bold;
+  }
+  .select {
+    font-weight: bold;
+    margin-top: 1em;
+    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
+  }
+  .heading {
+    margin-bottom: 0;
+  }
+  .explaination {
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
+  input {
+    margin-right: 5px;
+    cursor: pointer;
+  }
+  input[type=radio] {
+    margin-top: 2px;
+  }
+  .pluginTextArea {
+    font-family: unset;
+  }
+  .pluginLoad {
+    vertical-align: top;
+  }
+  i.warnIt {
+    color: ${styles.appProperties.warningText_Color};
+  }
+  .icon {
+    margin-right: .5em;
+  }
+}
+`
+
+module.exports = css