Display search bar only if comments exist

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

-<div fxLayout="row" id="search-container">
+<div fxLayout="row" id="search-container" *ngIf="comments.length > 0">
   <mat-label fxLayoutAlign="center center">
     <mat-icon class="search-icon">search</mat-icon>
   </mat-label>
@@ -72,6 +72,13 @@
   </mat-menu>
 </div>
 
+<div fxLayout="row" fxLayoutAlign="center" *ngIf="comments.length < 1">
+  <button mat-fab class="fab-extended" (click)="openCreateDialog()">
+    {{'comment-list.add-comment' | translate}}
+    <mat-icon class="add">add</mat-icon>
+  </button>
+</div>
+
 <div *ngIf="!isLoading">
 <app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current" [parseVote]="getVote(current)"></app-comment>
 </div>

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

@@ -65,7 +65,7 @@ input {
 }
 
 .no-comments {
-  margin-top: 30%;
+  margin-top: 10%;
 }
 
 h4  {
@@ -115,3 +115,21 @@ h4  {
   color: var(--on-surface);
   opacity: 1;
 }
+
+.fab-extended {
+  width: 50%;
+  min-width: 270px;
+  height: 40px;
+  border-radius: 32px;
+  margin: 10% 0 10% 0;
+  font-size: large;
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+
+.add {
+  transform: scale(1.4);
+  padding-right: 5px;
+  padding-left: 5px;
+  color: var(--on-primary);
+}