From 6b89758e03cbfe8a29886ec3302544173b4a95df Mon Sep 17 00:00:00 2001
From: sanketpathak <sanketpathak95@gmail.com>
Date: Wed, 25 Apr 2018 18:39:57 +0530
Subject: [PATCH] fix(bug): notification has been removed from feedback and it
 is made more intuitive.

---
 .../component-feedback.component.html         | 12 +++++----
 .../component-feedback.component.less         | 26 +++++++++++++++++++
 .../component-feedback.component.ts           | 13 +++++++++-
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/app/stack/utils/component-feedback/component-feedback.component.html b/src/app/stack/utils/component-feedback/component-feedback.component.html
index 7078f2d..2e9cb7c 100644
--- a/src/app/stack/utils/component-feedback/component-feedback.component.html
+++ b/src/app/stack/utils/component-feedback/component-feedback.component.html
@@ -1,11 +1,13 @@
-<fab-toast-notification [notifications]="feedbackMessages"></fab-toast-notification>
+<!-- <fab-toast-notification [notifications]="feedbackMessages"></fab-toast-notification> -->
 <div class="analytics-component-feedback">
     <div *ngIf="feedback?.feedbackTemplate" class="feedback">
-        <span (click)="handleFeedback($event, true)">
-            <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
+        <span (click)="feedbackColorTypeUp=!feedbackColorTypeUp;handleFeedback($event, true, feedbackColorTypeUp);" [ngClass]="{'thumbs-up': !feedbackColorTypeUp , 'thumbs-up-true': feedbackColorTypeUp}"
+            aria-label="positive feedback">
+            <i [ngClass]="{'fa': true,'fa-thumbs-o-up': !feedbackColorTypeUp , 'fa-thumbs-up': feedbackColorTypeUp}" aria-hidden="true"></i>
         </span>
-        <span (click)="handleFeedback($event, false)">
-            <i class="fa fa-thumbs-o-down" aria-hidden="true"></i>
+        <span (click)="feedbackColorTypeDown=!feedbackColorTypeDown;handleFeedback($event, false, feedbackColorTypeDown);" [ngClass]="{'thumbs-down': !feedbackColorTypeDown , 'thumbs-down-true': feedbackColorTypeDown}"
+            aria-label="negative feedback">
+            <i [ngClass]="{'fa': true,'fa-thumbs-o-down': !feedbackColorTypeDown , 'fa-thumbs-down': feedbackColorTypeDown}" aria-hidden="true"></i>
         </span>
     </div>
     <span class="no-feedback" *ngIf="!feedback?.feedbackTemplate">-----</span>
diff --git a/src/app/stack/utils/component-feedback/component-feedback.component.less b/src/app/stack/utils/component-feedback/component-feedback.component.less
index 77163f9..62fbecb 100644
--- a/src/app/stack/utils/component-feedback/component-feedback.component.less
+++ b/src/app/stack/utils/component-feedback/component-feedback.component.less
@@ -5,6 +5,32 @@
         margin-right: 10px;
     }
 
+    .thumbs-up {
+        color:#363636;
+        &:hover {
+            color:#6ec664;
+        }
+        &:active {
+            color:#6ec664;
+        }
+        &-true {
+            color:#6ec664;
+        }
+    }
+
+    .thumbs-down {
+        color:#363636;
+        &:hover {
+            color:#c00;
+        }
+        &:active {
+            color:#c00;
+        }
+        &-true {
+            color:#c00;
+        }
+    }
+
     .no-feedback {
         font-size: unset;
     }
diff --git a/src/app/stack/utils/component-feedback/component-feedback.component.ts b/src/app/stack/utils/component-feedback/component-feedback.component.ts
index 4724427..e8351c2 100644
--- a/src/app/stack/utils/component-feedback/component-feedback.component.ts
+++ b/src/app/stack/utils/component-feedback/component-feedback.component.ts
@@ -23,10 +23,12 @@ import { ComponentFeedbackService } from './component-feedback.service';
 export class ComponentFeedbackComponent implements OnChanges {
     @Input() feedback: MComponentFeedback;
     feedbackMessages: Array<any> = [];
+    feedbackColorTypeUp: boolean = false;
+    feedbackColorTypeDown: boolean = false;
 
     constructor(private feedbackService: ComponentFeedbackService) {}
 
-    public handleFeedback(event: MouseEvent, type: boolean): void {
+    public handleFeedback(event: MouseEvent, type: boolean, colorType: boolean): void {
         event.stopPropagation();
         if (this.feedback && this.feedback.feedbackTemplate) {
             this.feedback.feedbackTemplate.feedback_type = type;
@@ -40,6 +42,15 @@ export class ComponentFeedbackComponent implements OnChanges {
                 });
             }
         }
+        if (type) {
+            if (colorType) {
+                this.feedbackColorTypeDown = false;
+            }
+        } else {
+            if (colorType) {
+                this.feedbackColorTypeUp = false;
+            }
+        }
     }
 
     ngOnChanges(changes: SimpleChanges) {