Merge branch 'fab-comment-button' into 'master'

Change add comment button to FAB

Closes #255

See merge request arsnova/arsnova-lite!214

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

@@ -9,7 +9,7 @@
     <mat-icon>close</mat-icon>
   </button>
 
-  <span class="fill-remaining-space"></span>
+   <!-- <span class="fill-remaining-space"></span> -->
 
   <div class="button-bar" fxLayoutAlign="center center">
     <div *ngIf="comments && comments.length > 0">
@@ -29,9 +29,9 @@
       <mat-icon class="searchBarIcon">sort</mat-icon>
     </button>
 
-    <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value" (click)="openCreateDialog()"
+    <button mat-fab class="addButton" *ngIf="!searchBox.value" (click)="openCreateDialog()"
             matTooltip="{{ 'comment-list.add-comment' | translate }}">
-      <mat-icon class="searchBarIcon">add_circle</mat-icon>
+      <mat-icon class="addCommentIcon">add</mat-icon>
     </button>
   </div>
 

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

@@ -35,11 +35,22 @@ input {
   width: 45px !important;
   height: 45px !important;
   text-align: center;
-  min-width: 50px;
-  margin: 0 2% 0 0;
+  margin: 1% 2% 1% 1%;
   color: var(--secondary);
 }
 
+.addButton {
+  width: 40px;
+  height: 40px;
+  margin: 0 5% 0 0;
+  background-color: var(--secondary);
+}
+
+.addCommentIcon {
+  transform: scale(1.5);
+  color: var(--primary-variant)
+}
+
 .close {
   margin: 5px 0 5px 0;
 }