Fix room-list-view

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

@@ -13,7 +13,7 @@
   </mat-expansion-panel>
   <mat-expansion-panel *ngFor="let room of rooms" class="matPanel">
     <mat-expansion-panel-header class="matPanelListHeader">
-      <button mat-mini-fab routerLink="/{{ baseUrl }}/room/{{ room.shortId }}" (click)="setCurrentRoom(room.shortId)">
+      <button mat-flat-button routerLink="/{{ baseUrl }}/room/{{ room.shortId }}" (click)="setCurrentRoom(room.shortId)">
         <mat-icon>input</mat-icon>
       </button>
       <mat-panel-title class="panelTitle">

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

 button {
   margin-right: 10px;
-  color: var(--primary);
+  background-color: var(--secondary);
+  color: var(--on-secondary);
 }
 
 .mat-expansion-panel-header-description {
@@ -10,19 +11,19 @@ button {
 
 
 .matPanel {
-  background-color: var(--grey);
+  background-color: var(--primary-variant);
   margin-bottom: 5px;
-  color: black!important;
+  color: var(--on-surface)!important;
 }
 
 #matPanelHeader {
-  background-color: var(--grey-light);
+  background-color: var(--primary-variant);
   margin-bottom: 5px;
-  color: white;
+  color: var(--on-surface);
 }
 
 .matPanelListHeader {
-  background-color: var(--grey) !important;
+  background-color: var(--primary-variant) !important;
 }
 
 mat-panel-title {
@@ -33,12 +34,12 @@ mat-panel-title {
 
 .headerTitle {
   width: 8%;
-  color: var(--on-background)!important;
+  color: var(--on-surface)!important;
 }
 
 .panelTitle {
   width: 8%;
-  color: black!important;
+  color: var(--on-surface)!important;
 }
 
 

src/theme/dark-theme/darkTheme.const.ts

 export const dark = {
 
   '--primary' : '#bb86fc',
-  '--primary-variant': '#3700b3',
+  '--primary-variant': '#616161',
 
   '--secondary': '#03dac6',
   '--secondary-variant': '#6f74dd',