Selected Component changes color on ComponentDisplay and Tree text is white

Author: Dean Ohashi

src/components/ComponentDisplay.vue

@@ -124,7 +124,11 @@ export default {
 
 .component-box {
   color: white;
-  border: 3px dashed rgb(227, 203, 71);
+  border: 1px dashed rgb(227, 203, 71);
   background-color: rgba(186, 99, 99, 0.529);
 }
+
+.active {
+  background-color: rgba(57, 63, 84, 0.5);
+}
 </style>

src/components/Tree.vue

@@ -34,7 +34,6 @@ export default {
   },
   methods: {
     formatComponentMap (compMap) {
-      console.log('\n Map : ', compMap, '\n')
       let result = []
       Object.values(compMap).forEach(compData => {
         result.push({
@@ -49,29 +48,16 @@ export default {
       const nodes = {}
       const formattedData = this.formatComponentMap(data)
 
-      // console.log('\n >>>> Formatted data <<<<');
-      // console.log('FormattedData: ', formattedData, '\n');
-
-      // console.log('\n >>>> TRANSFORM TO TREE <<<< \n');
-
       formattedData.forEach(component => {
         if (!nodes[component.name]) {
           nodes[component.name] = { name: component.name, children: [] }
           result = nodes
         }
-        // console.log('CURRENT COMPONENT: ', component.name);
         component.children.forEach(child => {
-          // if(typeof child === 'object') child = child.componentName;
           nodes[child] = { name: child, children: [] }
           nodes[component.name].children.push(nodes[child])
-          // console.log('Adding child: ', typeof child, child);
-          // console.log('\n');
         })
       })
-
-      console.log('\n >>>> RESULTS <<<< ')
-      console.log(result)
-      console.log('\n >>>> ______ <<<<')
       return result
     },
 
@@ -96,7 +82,7 @@ export default {
   cursor: pointer;
   text-shadow: none !important;
   font-weight: bold;
-
+  fill: #FFF;
   /* none of these classes work
   color: white !important;
   background: white;