Fixes textcolor in dark modes

src/app/components/creator/room-creator-page/room-creator-page.component.html

@@ -7,7 +7,7 @@
         <span class="fill-remaining-space"></span>
         <mat-card-header fxLayoutAlign="center" fxLayout="row">
           <mat-card-title fxLayoutAlign="center">
-            <h2>{{ room.name }}</h2>
+            <h2  class="oldtypo-h2">{{ room.name }}</h2>
           </mat-card-title>
           <mat-card-subtitle fxLayoutAlign="center">
             <span class="room-short-id">

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

@@ -69,7 +69,8 @@
 
 <div *ngIf="comments && comments.length < 1 && !isLoading" fxLayout="row" fxLayoutAlign="center center"
      class="no-comments">
-  <p>{{ 'comment-page.no-comments' | translate }}</p>
+  <!-- no question present-->
+  <p class="oldtypo-p">{{ 'comment-page.no-comments' | translate }}</p>
 </div>
 
 <div class="visually-hidden">

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

@@ -146,10 +146,10 @@
                 [parseVote]="getVote(current)" [userRole]="userRole" [moderator]="false" (clickedOnTag)="clickedOnTag($event)">
               </app-comment>
 </div>
-
+<!-- No Questions Present -->
 <div *ngIf="comments && comments.length < 1 && !isLoading" fxLayout="row" fxLayoutAlign="center center"
      class="no-comments">
-  <p>{{ 'comment-page.no-comments' | translate }}</p>
+  <p class="oldtypo-p">{{ 'comment-page.no-comments' | translate }}</p>
 </div>
 
 <!--Hidden Div's for a11y-Descriptions-->

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

@@ -10,7 +10,7 @@
 
     </button>
     <span class="fill-remaining-space"></span>
-    <h2 *ngIf="router.url.includes('comments') && user.role === 3 && deviceType === 'desktop'"
+    <h2 class="oldtypo-h2" *ngIf="router.url.includes('comments') && user.role === 3 && deviceType === 'desktop'"
         fxLayoutAlign="center center">
       {{cTime}}
     </h2>
@@ -24,7 +24,7 @@
       gavel
     </mat-icon>
   </span>
-    <h2 id="shortId-header" *ngIf="router.url.includes('comments')"
+    <h2 class="oldtypo-h2" id="shortId-header" *ngIf="router.url.includes('comments')"
         fxLayoutAlign="center center">
       {{'header.id' | translate}}: {{ shortId.slice(0, 4) }} {{  shortId.slice(4, 8) }}
     </h2>
@@ -82,7 +82,7 @@
             (click)=login(false) aria-labelledby="login-label">
       <div class="label-icon">
         <mat-icon class="header-icons">account_circle</mat-icon>
-        <h2 *ngIf="deviceType === 'desktop'">{{'header.login' | translate}}</h2>
+        <h2 class="oldtypo-h2" *ngIf="deviceType === 'desktop'">{{'header.login' | translate}}</h2>
       </div>
     </button>
 

src/styles.scss

@@ -58,7 +58,7 @@ markdown {
 
 .oldtypo {
   &-h2 {
-   color: var(--on-surface) !important;
+    color: var(--on-surface) !important;
     font-size: 24px !important;
   }
 
@@ -66,6 +66,11 @@ markdown {
     color: var(--on-surface) !important;
     font-size: 18px !important;
   }
+
+  &-p {
+    color: var(--on-surface);
+    hyphens: auto;
+  }
 }
 
 .oldtypo h4 {