some style edits

src/app/components/shared/content-groups/content-groups.component.scss

 @import '../../../../theme/default-theme/_variables.scss';
 
 #contentGroup {
-  background-color: var(--primary);
+  background-color: var(--secondary);
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   position: relative;
@@ -11,7 +11,7 @@
   margin-top: 10px;
   max-height: 50px;
   padding: 5px;
-  color: var(--on-primary);
+  color: var(--on-secondary);
 
   &:hover {
     cursor: pointer;

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

@@ -8,12 +8,12 @@
   <mat-expansion-panel [disabled]="true" id="matPanelHeader">
     <mat-expansion-panel-header>
       <mat-panel-title class="headerTitle">Name</mat-panel-title>
-      <mat-panel-description class="headerTitle">Session-Id</mat-panel-description>
+      <mat-panel-description class="headerTitle">Session-ID</mat-panel-description>
     </mat-expansion-panel-header>
   </mat-expansion-panel>
   <mat-expansion-panel *ngFor="let room of rooms" class="matPanel">
     <mat-expansion-panel-header class="matPanelListHeader">
-      <button mat-button routerLink="/{{ baseUrl }}/room/{{ room.shortId }}" (click)="setCurrentRoom(room.shortId)">
+      <button mat-mini-fab routerLink="/{{ baseUrl }}/room/{{ room.shortId }}" (click)="setCurrentRoom(room.shortId)">
         <mat-icon>input</mat-icon>
       </button>
       <mat-panel-title class="panelTitle">