console BEM style

Author: therewasaguy

client/modules/IDE/components/Console.js

@@ -25,7 +25,7 @@ class Console extends React.Component {
       const args = nextProps.consoleEvent.arguments;
       const method = nextProps.consoleEvent.method;
       const nextChild = (
-        <div key={this.children.length} className={method}>
+        <div key={this.children.length} className={`preview-console__${method}`}>
           {Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
         </div>
       );

client/styles/abstracts/_variables.scss

@@ -39,3 +39,6 @@ $dark-button-active-color: $white;
 $ide-border-color: #f4f4f4;
 $editor-selected-line-color: #f3f3f3;
 $input-border-color: #979797;
+
+$console-warn-color: #ffbe05;
+$console-error-color: #ff5f52;

client/styles/components/_console.scss

@@ -4,7 +4,7 @@
 	height:60px;
 	right:0px;
 	bottom: 0px;
-	background:grey;
+	background:$dark-background-color;
 	z-index:1000;
 
 	& > {
@@ -13,15 +13,15 @@
 	}
 
 	// assign styles to different types of console messages
-	.log {
-		color: black;
+	.preview-console__log {
+		color: $dark-secondary-text-color;
 	}
 
-	.error {
-		color: red;
+	.preview-console__error {
+		color: $console-error-color;
 	}
 
-	.warn {
-		color: yellow;
+	.preview-console__warn {
+		color: $console-warn-color;
 	}
 }