Fix placeholder colors

src/app/components/shared/_dialogs/create-comment/create-comment.component.html

 <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
   <mat-form-field class="input-block">
-      <textarea matInput #commentBody placeholder="{{ 'comment-page.enter-comment' | translate}}"
-                matTextareaAutosize matAutosizeMinRows=5 matAutosizeMaxRows=10  maxlength="255"
+      <textarea matInput #commentBody matTextareaAutosize matAutosizeMinRows=5 matAutosizeMaxRows=10  maxlength="255"
                 [formControl]="bodyForm"></textarea>
+    <mat-placeholder class="placeholder">{{ 'comment-page.enter-comment' | translate}}</mat-placeholder>
     <mat-hint align="end">{{commentBody.value.length}} / 255</mat-hint>
   </mat-form-field>
   <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">

src/app/components/shared/_dialogs/create-comment/create-comment.component.scss

@@ -27,7 +27,6 @@ mat-hint {
   color: var(--on-surface) !important;
 }
 
-::placeholder {
-  color: var(--on-primary);
-  opacity: 1;
+.placeholder {
+  color: var(--on-surface);
 }

src/app/components/shared/room-join/room-join.component.html

@@ -5,7 +5,8 @@
       <input matInput #roomId type="text" pattern="[0-9 ]*" inputmode="numeric" min="00000000" max="99999999"
              onkeydown="if(this.value.length - (this.value.split(' ').length -1) === 8 && event.keyCode != 8) return false;
                         if(this.value.length === 4 && event.keyCode != 8) this.value = this.value + ' ';"
-                        placeholder="Session-ID" [formControl]="roomFormControl" [errorStateMatcher]="matcher"/>
+                        [formControl]="roomFormControl" [errorStateMatcher]="matcher"/>
+      <mat-placeholder class="placeholder">Session-ID</mat-placeholder>
       <mat-hint align="end">{{ roomId.value.length - (roomId.value.split(' ').length -1) }} / 8</mat-hint>
       <mat-error *ngIf="roomFormControl.hasError('required')">{{ 'home-page.please-enter' | translate}}</mat-error>
       <mat-error *ngIf="roomFormControl.hasError('pattern')">{{ 'home-page.only-numbers' | translate}}</mat-error>

src/app/components/shared/room-join/room-join.component.scss

@@ -26,7 +26,6 @@ mat-hint {
   color: var(--on-surface) !important;
 }
 
-::placeholder {
+.placeholder {
   color: var(--on-surface);
-  opacity: 1;
 }