Update traits styles

src/trait_manager/index.js

@@ -1,9 +1,10 @@
 import { defaults, isElement } from 'underscore';
 
+const defaultOpts = require('./config/config');
+const TraitsView = require('./view/TraitsView');
+
 module.exports = () => {
   let c = {};
-  const defaultOpts = require('./config/config');
-  const TraitsView = require('./view/TraitsView');
   let TraitsViewer;
 
   return {

src/trait_manager/view/TraitsView.js

@@ -16,10 +16,12 @@ module.exports = DomainViews.extend({
     color: TraitColorView
   },
 
-  initialize(o) {
-    this.config = o.config || {};
+  initialize(o = {}) {
+    const config = o.config || {};
+    this.config = config;
     this.em = o.editor;
-    this.pfx = this.config.stylePrefix || '';
+    this.pfx = config.stylePrefix || '';
+    this.ppfx = config.pStylePrefix || '';
     this.className = this.pfx + 'traits';
     this.listenTo(this.em, 'change:selectedComponent', this.updatedCollection);
     this.updatedCollection();
@@ -30,7 +32,8 @@ module.exports = DomainViews.extend({
    * @private
    */
   updatedCollection() {
-    this.el.className = this.className;
+    const ppfx = this.ppfx;
+    this.el.className = `${this.className} ${ppfx}one-bg ${ppfx}two-color`;
     var comp = this.em.get('selectedComponent');
     if (comp) {
       this.collection = comp.get('traits');