fix style

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

@@ -2,9 +2,12 @@
   <div fxLayout="row" fxLayoutAlign="center center">
     <mat-card-title>{{comment.subject}}</mat-card-title>
     <span class="fill-remaining-space"></span>
-    <button mat-icon-button [disabled]="userRole === 0" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Anwort richtig' : null">
+    <button mat-icon-button [disabled]="userRole === 0" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Antwort richtig' : null">
       <mat-icon [ngClass]="{'correct-icon' : comment.correct === true}">check_circle</mat-icon>
     </button>
+    <button mat-icon-button [disabled]="userRole === 0" (click)="setRead(comment)" [matTooltip]="comment.read ? 'mark me as unread' : 'mark me as read'">
+      <mat-icon [ngClass]="{'read-icon' : comment.read === true}">visibility</mat-icon>
+    </button>
   </div>
   <mat-divider></mat-divider>
   <mat-card-content>

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

@@ -19,8 +19,8 @@ mat-toolbar {
   border-radius: 2px;
 }
 
-.outer-card {
-  border-radius: 8px;
+.card-container :hover {
+  cursor: pointer;
 }
 
 mat-icon {
@@ -35,6 +35,10 @@ mat-icon {
   color: green;
 }
 
+.read-icon {
+  color: blue;
+}
+
 mat-card-title {
   margin: 0px;
 }

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

@@ -37,6 +37,7 @@ export class CommentComponent implements OnInit {
   }
 
   setRead(comment: Comment): void {
+    comment.read = !comment.read;
     this.commentService.updateComment(comment).subscribe();
   }