Fix colors in several components

src/app/components/home/_dialogs/password-reset/password-reset.component.html

@@ -11,7 +11,7 @@
     </mat-error>
   </mat-form-field>
 
-  <button mat-raised-button color="primary" type="submit">
+  <button mat-raised-button type="submit">
     {{ 'password-reset.reset-password' | translate }}
   </button>
 </form>

src/app/components/home/_dialogs/password-reset/password-reset.component.scss

+mat-form-field {
+  color: var(--on-surface);
+}
+
+.mat-raised-button {
+  color: var(--on-primary);
+  background-color: var(--primary);
+}

src/app/components/home/_dialogs/register/register.component.scss

+mat-form-field {
+  color: var(--on-surface);
+}
+
+.mat-raised-button {
+  color: var(--on-primary);
+  background-color: var(--primary);
+}

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

@@ -16,6 +16,7 @@ app-comment-list {
 
 textarea {
   line-height: 120%;
+  color: var(--on-surface);
 }
 
 .send {

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

@@ -2,3 +2,27 @@
   background-color: var(--primary);
   color: var(--on-primary);
 }
+
+input {
+  color: var(--on-surface);
+}
+
+.placeholder {
+  color: var(--on-surface);
+}
+
+::ng-deep .mat-form-field-label {
+  color: var(--on-surface)!important;
+}
+
+::ng-deep .mat-form-field-underline {
+  background-color: var(--on-surface)!important;
+}
+
+::ng-deep .mat-form-field-ripple {
+  background-color: var(--on-surface)!important;
+}
+
+mat-form-field {
+  color: var(--on-surface);
+}

src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss

@@ -19,3 +19,11 @@ mat-chip {
   display: flex;
   justify-content: center;
 }
+
+h3 {
+  color: var(--on-surface);
+}
+
+mat-icon {
+  color: var(--on-surface);
+}

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

@@ -24,5 +24,18 @@ input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px var(--dialog) inset;
 }
 
+::ng-deep .mat-form-field-label {
+  color: var(--on-surface)!important;
+}
 
+::ng-deep .mat-form-field-underline {
+  background-color: var(--on-surface)!important;
+}
 
+::ng-deep .mat-form-field-ripple {
+  background-color: var(--on-surface)!important;
+}
+
+mat-form-field {
+  color: var(--on-surface);
+}

src/app/components/shared/statistics-page/statistics-page.component.html

@@ -4,7 +4,7 @@
       <mat-card-header>
         <h2>{{'statistic.answer-statistic' | translate}}</h2>
         <span class="fill-remaining-space"></span>
-        <button mat-icon-button (click)="showHelp()"><mat-icon color="primary">help</mat-icon></button>
+        <button mat-icon-button (click)="showHelp()"><mat-icon>help</mat-icon></button>
       </mat-card-header>
       <mat-divider></mat-divider>
       <div *ngIf="isLoading"                                                                                                                                                                                                                                                                                                                                                          fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>

src/app/components/shared/statistics-page/statistics-page.component.scss

@@ -8,3 +8,19 @@ mat-card {
 h2 {
   color: var(--on-surface);
 }
+
+.mat-icon-button {
+  color: var(--secondary);
+}
+
+::ng-deep .mat-tab-label {
+  color: var(--on-surface);
+}
+
+::ng-deep .mat-tab-label-active {
+  color: var(--on-surface);
+}
+
+::ng-deep .mat-ink-bar {
+  background-color: var(--primary) !important;
+}