fix select-element-active css

src/frontend/app.html

@@ -21,7 +21,7 @@
     [ngModules]="ngModules"
     (tabChange)="onSelectedTabChange($event)"
     (componentsSubTabMenuChange)="onSelectedComponentsSubTabMenuChange($event)"
-    (DOMSelectionActiveChange)="onDOMSelectionActiveChange($event)"
+    (domSelectionActiveChange)="onDOMSelectionActiveChange($event)"
     (selectNode)="onSelectNode($event)"
     (inspectElement)="onInspectElement($event)"
     (collapseChildren)="onCollapseChildren($event)"

src/frontend/app.ts

@@ -327,6 +327,7 @@ export class App {
   }
 
   private onDOMSelectionActiveChange(state: boolean) {
+    console.log('setting to: ', state);
     this.mainActions.setDOMSelectionActive(state);
   }
 

src/frontend/components/app-trees/app-trees.html

@@ -4,7 +4,7 @@
    [domSelectionActive]="domSelectionActive"
    [selectedTab]="selectedTab"
    (tabChange)="onTabSelectionChanged($event)"
-   (DOMSelectionActiveChange)="onDOMSelectionActiveChange($event)">
+   (domSelectionActiveChange)="onDOMSelectionActiveChange($event)">
   <div postlude class="flex px3">
     <span *ngIf="ngVersion" class="ngVersion">
       Angular Version: {{ngVersion}}

src/frontend/components/app-trees/app-trees.ts

@@ -100,6 +100,7 @@ export class AppTrees {
   }
 
   onDOMSelectionActiveChange(state: boolean) {
+    console.log('second reaction')
     this.domSelectionActiveChange.emit(state);
   }
 

src/frontend/components/tab-menu/tab-menu.html

@@ -3,6 +3,7 @@
     <img src="../images/augury-logo.svg" class="logo">
     <div (click)="selectElement()" class="select-element"
          [ngClass]="{'select-element-active': domSelectionActive}">
+      <h1>{{domSelectionActive}}</h2>
       <svg width="16px" height="16px" viewBox="0 0 28 26" version="1.1" xmlns="http://www.w3.org/2000/svg">
         <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
           <g id="pointer" transform="translate(2.000000, 2.000000)">

src/frontend/components/tab-menu/tab-menu.ts

@@ -37,10 +37,10 @@ export class TabMenu {
   @Output() tabChange: EventEmitter<any> = new EventEmitter<any>();
   @Output() domSelectionActiveChange: EventEmitter<any> = new EventEmitter<any>();
 
-  constructor(private userActions: UserActions) {
-  }
+  constructor(private userActions: UserActions) {}
 
   selectElement() {
+    console.log("first reaction");
     if (this.domSelectionActive) {
       this.userActions.cancelFindElement();
       this.domSelectionActiveChange.emit(false);

src/styles/utils/colors.css

@@ -92,19 +92,11 @@ bt-injector-tree {
     background-color: #E5E5E5;
   }
 
-  & .select-element-active > svg * > polygon {
-     fill: #5A5A5A;
-  }
-
-  & .select-element-active > svg * > path {
-    stroke: #5A5A5A;
-  }
-
-  & .select-element-active > svg * > polygon {
+  & .select-element-active svg * polygon {
     fill: #4280EC;
   }
 
-  & .select-element-active > svg * > path {
+  & .select-element-active svg * path {
     stroke: #4280EC;
   }
 
@@ -241,23 +233,22 @@ bt-injector-tree {
     background-color: #313131;
   }
 
-  & .select-element > svg * > polygon {
-    fill: #FFCC33;
+  & .select-element-active > svg * > polygon {
+    fill: #03f4ff;
   }
 
-  & .select-element > svg * > path {
-    stroke: #FFCC33;
+  & .select-element-active > svg * > path {
+    stroke: #03f4ff;
   }
 
-  & .select-element-active > svg * > polygon {
-    fill: #A28AD0;
+  & .select-element > svg * > polygon {
+    fill: #FFCC33;
   }
 
-  & .select-element-active > svg * > path {
-    stroke: #A28AD0;
+  & .select-element > svg * > path {
+    stroke: #FFCC33;
   }
 
-
   & .node-item:hover {
     background-color: #3D3D3D;
   }