move renderer styles to its own file

src/app/ui/renderer.js

@@ -2,64 +2,8 @@
 
 var $ = require('jquery')
 var yo = require('yo-yo')
+var css = require('./styles/renderer-styles')
 
-// -------------- styling ----------------------
-// var csjs = require('csjs-inject')
-var styleGuide = require('remix-lib').ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = yo`<style>
-.sol.success,
-.sol.error,
-.sol.warning {
-    word-wrap: break-word;
-    cursor: pointer;
-    position: relative;
-    margin: 0.5em 0 1em 0;
-    border-radius: 5px;
-    line-height: 20px;
-    padding: 8px 15px;
-}
-
-.sol.success pre,
-.sol.error pre,
-.sol.warning pre {
-    overflow-y: hidden;
-    background-color: transparent;
-    margin: 0;
-    font-size: 12px;
-    border: 0 none;
-    padding: 0;
-    border-radius: 0;
-}
-
-.sol.success .close,
-.sol.error .close,
-.sol.warning .close {
-    font-weight: bold;
-    position: absolute;
-    color: hsl(0, 0%, 0%); /* black in style-guide.js */
-    top: 0;
-    right: 0;
-    padding: 0.5em;
-}
-
-.sol.error {
-    background-color: ${styles.rightPanel.message_Error_BackgroundColor};
-    border: .2em dotted ${styles.rightPanel.message_Error_BorderColor};
-    color: ${styles.rightPanel.message_Error_Color};
-}
-
-.sol.warning {
-  background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
-  color: ${styles.rightPanel.message_Warning_Color};
-}
-
-.sol.success {
-  background-color: ${styles.rightPanel.message_Success_BackgroundColor};
-  border: .2em dotted ${styles.rightPanel.message_Success_BorderColor};
-  color: ${styles.rightPanel.message_Success_Color};
-}</style>`
 
 /**
  * After refactor, the renderer is only used to render error/warning

src/app/ui/styles/renderer-styles.js

@@ -0,0 +1,59 @@
+var yo = require('yo-yo')
+
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = yo`<style>
+.sol.success,
+.sol.error,
+.sol.warning {
+    word-wrap: break-word;
+    cursor: pointer;
+    position: relative;
+    margin: 0.5em 0 1em 0;
+    border-radius: 5px;
+    line-height: 20px;
+    padding: 8px 15px;
+}
+
+.sol.success pre,
+.sol.error pre,
+.sol.warning pre {
+    overflow-y: hidden;
+    background-color: transparent;
+    margin: 0;
+    font-size: 12px;
+    border: 0 none;
+    padding: 0;
+    border-radius: 0;
+}
+
+.sol.success .close,
+.sol.error .close,
+.sol.warning .close {
+    font-weight: bold;
+    position: absolute;
+    color: hsl(0, 0%, 0%); /* black in style-guide.js */
+    top: 0;
+    right: 0;
+    padding: 0.5em;
+}
+
+.sol.error {
+    background-color: ${styles.rightPanel.message_Error_BackgroundColor};
+    border: .2em dotted ${styles.rightPanel.message_Error_BorderColor};
+    color: ${styles.rightPanel.message_Error_Color};
+}
+
+.sol.warning {
+  background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
+  color: ${styles.rightPanel.message_Warning_Color};
+}
+
+.sol.success {
+  background-color: ${styles.rightPanel.message_Success_BackgroundColor};
+  border: .2em dotted ${styles.rightPanel.message_Success_BorderColor};
+  color: ${styles.rightPanel.message_Success_Color};
+}</style>`
+
+module.exports = css