Fix visibility of status icons in participant comment

src/app/components/shared/comment/comment.component.html

@@ -5,20 +5,20 @@
       <p (click)="openPresentDialog(comment.body)">{{comment.body}}</p>
     </mat-card-content>
     <span class="fill-remaining-space"></span>
-    <button mat-icon-button [disabled]="isCreator" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
-      <mat-icon [ngClass]="{'correct-icon' : comment.correct === true}">check_circle</mat-icon>
+    <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
+      <mat-icon [ngClass]="{true : 'correct-icon', false: 'incorrect-icon'}[comment.correct]">check_circle</mat-icon>
     </button>
-    <button mat-icon-button [disabled]="isCreator" (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
-      <mat-icon [ngClass]="{'favorite-icon' : comment.favorite === true}">star</mat-icon>
+    <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent" (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
+      <mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-favorite-icon'}[comment.favorite]">star</mat-icon>
     </button>
-    <button mat-icon-button [disabled]="isCreator" (click)="setRead(comment)" [matTooltip]="comment.read ? 'Mark  as unread' : 'Mark as read'">
-      <mat-icon [ngClass]="{'read-icon' : comment.read === true}">visibility</mat-icon>
+    <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)" [matTooltip]="comment.read ? 'Mark  as unread' : 'Mark as read'">
+      <mat-icon [ngClass]="{true: 'read-icon', false: 'unread-icon'}[comment.read]">visibility</mat-icon>
     </button>
-    <button mat-icon-button [disabled]="!isCreator" (click)="voteUp(comment)">
+    <button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)">
       <mat-icon>keyboard_arrow_up</mat-icon>
     </button>
     <h4>{{comment.score}}</h4>
-    <button mat-icon-button [disabled]="!isCreator" (click)="voteDown(comment)">
+    <button mat-icon-button [disabled]="!isStudent" (click)="voteDown(comment)">
       <mat-icon>keyboard_arrow_down</mat-icon>
     </button>
   </div>

src/app/components/shared/comment/comment.component.scss

@@ -14,22 +14,30 @@ mat-toolbar {
   background-color: #bbdefb;
 }
 
-mat-icon {
-  color: white;
+.incorrect-icon {
+  color: #c8e6c9;
 }
 
 .correct-icon {
-  color: green;
+  color: #66bb6a;
 }
 
 .read-icon {
-  color: blue;
+  color: #1e88e5;
+}
+
+.unread-icon {
+  color: #e3f2fd;
 }
 
 .favorite-icon {
   color: #fdd835;
 }
 
+.not-favorite-icon {
+  color: #fffde7;
+}
+
 .proffesor-icon {
   background-size: cover;
   margin-right: 10px;

src/app/components/shared/comment/comment.component.ts

@@ -18,7 +18,7 @@ import { MatDialog } from '@angular/material';
 })
 export class CommentComponent implements OnInit {
   @Input() comment: Comment;
-  isCreator = false;
+  isStudent = false;
   isLoading = true;
 
   constructor(protected authenticationService: AuthenticationService,
@@ -34,7 +34,7 @@ export class CommentComponent implements OnInit {
 
   ngOnInit() {
     if (this.authenticationService.getRole() === 0) {
-      this.isCreator = true;
+      this.isStudent = true;
     }
     this.translateService.use(localStorage.getItem('currentLang'));
   }