From b970463325460096f26b156688e13f1cb813240c Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Thu, 23 May 2024 11:39:01 +0200
Subject: [PATCH] ov-components: Removed Angular Material legacy modules

---
 .../admin/dashboard/dashboard.component.css   |  2 +
 .../admin/dashboard/dashboard.component.html  |  2 +-
 .../src/lib/admin/login/login.component.css   | 15 ++++++--
 .../src/lib/admin/login/login.component.html  |  2 +-
 .../dialogs/delete-recording.component.ts     |  2 +-
 .../components/dialogs/dialog.component.ts    |  2 +-
 .../dialogs/pro-feature-dialog.component.ts   |  2 +-
 .../dialogs/recording-dialog.component.ts     | 12 +++---
 .../activities-panel.component.css            | 38 ++++++++++++++-----
 .../activities-panel.component.html           |  6 +--
 .../broadcasting-activity.component.html      | 27 ++++++++-----
 .../recording-activity.component.css          | 24 +++++++++++-
 .../recording-activity.component.html         | 19 ++++++----
 .../background-effects-panel.component.css    |  2 +
 .../lib/components/panel/panel.component.css  |  5 +++
 .../participant-panel-item.component.css      | 29 +++++++++++---
 .../participant-panel-item.component.html     | 16 ++++----
 .../settings-panel.component.css              | 35 +++++++++++++----
 .../settings-panel.component.html             | 22 ++++++-----
 .../pre-join/pre-join.component.css           |  3 +-
 .../components/session/session.component.css  | 10 +++--
 .../settings/captions/captions.component.css  | 14 +++----
 .../settings/captions/captions.component.html |  2 +-
 .../lang-selector/lang-selector.component.css |  3 ++
 .../lang-selector.component.html              | 18 ++++++---
 .../lang-selector/lang-selector.component.ts  |  4 +-
 .../nickname-input.component.css              |  2 +-
 .../nickname-input.component.html             |  4 +-
 .../components/stream/stream.component.css    | 17 ++++++++-
 .../components/stream/stream.component.html   |  2 +-
 .../lib/components/stream/stream.component.ts |  2 +-
 .../components/toolbar/toolbar.component.css  | 10 ++---
 .../components/toolbar/toolbar.component.ts   |  2 +-
 .../openvidu-angular/src/lib/lang/cn.json     |  3 +-
 .../openvidu-angular/src/lib/lang/de.json     |  3 +-
 .../openvidu-angular/src/lib/lang/en.json     |  3 +-
 .../openvidu-angular/src/lib/lang/es.json     |  3 +-
 .../openvidu-angular/src/lib/lang/fr.json     |  3 +-
 .../openvidu-angular/src/lib/lang/hi.json     |  3 +-
 .../openvidu-angular/src/lib/lang/it.json     |  3 +-
 .../openvidu-angular/src/lib/lang/ja.json     |  3 +-
 .../openvidu-angular/src/lib/lang/nl.json     |  3 +-
 .../openvidu-angular/src/lib/lang/pt.json     |  3 +-
 .../lib/models/notification-options.model.ts  |  4 +-
 .../lib/openvidu-angular.material.module.ts   | 28 +++++++-------
 .../services/action/action.service.spec.ts    |  4 +-
 .../src/lib/services/action/action.service.ts |  4 +-
 .../src/app/app.module.ts                     |  6 +--
 .../src/app/openvidu-call/call.component.html |  6 +--
 .../openvidu-webcomponent.component.scss      |  8 ++--
 openvidu-components-angular/src/styles.scss   | 10 ++---
 51 files changed, 301 insertions(+), 154 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.css
index c663c62686..b0e2bbd14b 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.css
@@ -177,11 +177,13 @@
 	display: table;
 	text-align: center;
 }
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
 	padding: 0px !important;
 	background-color: var(--ov-light-color) !important;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 ::ng-deep .mat-form-field-wrapper {
 	height: 100% !important;
 }
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
index f898c805cd..92d5c02e3b 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
@@ -62,7 +62,7 @@
 				"
 				class="item"
 			>
-				<mat-card class="recording-card">
+				<mat-card appearance="outlined" class="recording-card">
 					<mat-card-content>
 						<div class="video-div-container">
 							<img *ngIf="!!recording.url" [src]="recording.url | thumbnailUrl" />
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.css
index aaa938cb04..f1e3e74419 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.css
@@ -1,13 +1,17 @@
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
 mat-card {
 	max-width: 220px;
 	margin: auto;
 	margin-top: 10vh;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
 mat-card-content {
 	margin-bottom: 8px;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
 mat-card-actions {
 	padding-top: 0px;
 }
@@ -21,7 +25,7 @@ mat-card-actions {
 mat-spinner {
 	margin: auto;
 }
-.mat-card-actions {
+.mat-mdc-card-actions {
 	margin: 0;
 }
 
@@ -52,17 +56,20 @@ mat-spinner {
 	width: 100%;
 }
 
-::ng-deep .mat-input-element {
+::ng-deep .mat-mdc-input-element {
 	caret-color: #000000;
 }
-::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
+/* TODO(mdc-migration): The following rule targets internal classes of option that may no longer apply for the MDC version. */
+::ng-deep .mat-primary .mat-mdc-option.mat-selected:not(.mat-option-disabled) {
 	color: #000000;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 ::ng-deep .mat-form-field-label {
 	color: var(--ov-panel-text-color) !important;
 }
 
-::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+::ng-deep .mat-mdc-form-field.mat-focused .mat-form-field-ripple {
 	background-color: var(--ov-panel-text-color) !important;
 }
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.html
index 1134fa8390..db5eb5da09 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/login/login.component.html
@@ -9,7 +9,7 @@
 	</div>
 </div>
 
-<mat-card *ngIf="!checkingLogged">
+<mat-card appearance="outlined" *ngIf="!checkingLogged">
 	<mat-card-content>
 		<form ngNativeValidate #loginForm (ngSubmit)="login()">
 			<table class="full-width" cellspacing="0">
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/delete-recording.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/delete-recording.component.ts
index 9d79ae55b5..018aa9dfbb 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/delete-recording.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/delete-recording.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 /**
  * @internal
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/dialog.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/dialog.component.ts
index 537843e951..eadad33db4 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/dialog.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { DialogData } from '../../models/dialog.model';
 
 /**
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts
index 888793988a..edb47a7522 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { DialogData } from '../../models/dialog.model';
 
 
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts
index 9011189637..e1927a0b25 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { RecordingDialogData } from '../../models/dialog.model';
 
 /**
@@ -17,11 +17,11 @@ import { RecordingDialogData } from '../../models/dialog.model';
 	`,
 	styles: [
 		`
-			video {
-				max-height: 64vh;
-				max-width: 100%;
-			}
-		`
+  			video {
+  				max-height: 64vh;
+  				max-width: 100%;
+  			}
+  		`
 	]
 })
 export class RecordingDialogComponent {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css
index a3a547eed1..fbf42f8af5 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.css
@@ -9,34 +9,49 @@
 	display: inherit;
 	background-color: var(--ov-light-color);
 	border-radius: var(--ov-panel-radius);
+	margin: auto;
+	padding: 10px;
 }
 
-.activity-icon mat-icon {
-	margin: auto;
+::ng-deep .mat-mdc-list-item-icon {
+	margin: auto !important;
 }
 
+
+.activity-title,
 .activity-subtitle {
-	font-style: italic;
-	font-size: 11px !important;
+	margin: 0;
+	color: var(--ov-panel-text-color);
 }
+
 .activity-title {
 	font-weight: bold !important;
 }
 
+.activity-subtitle {
+	font-style: italic;
+	font-size: 11px !important;
+}
+
 .activity-action-buttons {
 	font-weight: 600;
 	position: absolute;
 	right: 15px;
-	top: 15px;
+	top: 0px;
 }
 
 ::ng-deep .mat-content {
 	display: block !important;
-
 }
 
-::ng-deep .mat-list-text {
+/* .activity-icon mat-icon {
+	margin: auto;
+} */
+
+/* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version. */
+::ng-deep .mdc-list-item__content {
 	padding-left: 10px !important;
+	align-self: center !important;
 }
 
 ::ng-deep .mat-expansion-panel-header {
@@ -44,7 +59,7 @@
 	height: 65px !important;
 }
 
-::ng-deep .mat-list-base .mat-list-item .mat-list-item-content,
+::ng-deep .mat-mdc-list-base .mat-mdc-list-item .mat-list-item-content,
 .mat-list-base .mat-list-option .mat-list-item-content {
 	padding: 0px !important;
 }
@@ -63,4 +78,9 @@
 
 ::ng-deep .no-body .mat-expansion-panel-content {
 	display: none !important;
-}
\ No newline at end of file
+}
+
+::ng-deep .mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before {
+	max-height: 24px;
+	height: 24px;
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
index 5c73cbbf64..d470ba5159 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
@@ -1,12 +1,12 @@
-<div class="panel-container" id="activities-container" fxLayout="column" fxLayoutAlign="space-evenly none">
-	<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
+<div class="panel-container" id="activities-container">
+	<div class="panel-header-container">
 		<h3 class="panel-title">Activities</h3>
 		<button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()">
 			<mat-icon>close</mat-icon>
 		</button>
 	</div>
 
-	<div class="activities-body-container" fxFlex="75%" fxLayoutAlign="space-evenly none">
+	<div class="activities-body-container">
 		<mat-accordion [multi]="false">
 			<ov-recording-activity
 				*ngIf="showRecordingActivity"
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
index 3810db88ab..868c305651 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
@@ -3,34 +3,39 @@
 		<mat-list>
 			<mat-list-item>
 				<div
-					matListAvatar
+					matListItemIcon
 					class="activity-icon"
 					[ngClass]="{
 						started: broadcastingStatus === broadcastingStatusEnum.STARTED,
 						stopped: broadcastingStatus === broadcastingStatusEnum.STOPPED,
 						failed: broadcastingStatus === broadcastingStatusEnum.FAILED,
-						pending: broadcastingStatus === broadcastingStatusEnum.STARTING || broadcastingStatus === broadcastingStatusEnum.STOPPING
+						pending:
+							broadcastingStatus === broadcastingStatusEnum.STARTING || broadcastingStatus === broadcastingStatusEnum.STOPPING
 					}"
 				>
 					<mat-icon
 						id="broadcasting-icon"
-						*ngIf="broadcastingStatus !== broadcastingStatusEnum.FAILED && broadcastingStatus !== broadcastingStatusEnum.STARTED"
+						*ngIf="
+							broadcastingStatus !== broadcastingStatusEnum.FAILED && broadcastingStatus !== broadcastingStatusEnum.STARTED
+						"
 					>
 						sensors
 					</mat-icon>
 					<mat-icon *ngIf="broadcastingStatus === broadcastingStatusEnum.FAILED">error</mat-icon>
 					<mat-icon class="blink" *ngIf="broadcastingStatus === broadcastingStatusEnum.STARTED">sensors</mat-icon>
 				</div>
-				<h3 matLine class="activity-title">{{ 'PANEL.STREAMING.TITLE' | translate }}</h3>
-				<p matLine class="activity-subtitle">{{ 'PANEL.STREAMING.SUBTITLE' | translate }}</p>
-				<div class="activity-action-buttons">
+				<h3 matListItemLine class="activity-title">{{ 'PANEL.STREAMING.TITLE' | translate }}</h3>
+				<p matListItemLine class="activity-subtitle">{{ 'PANEL.STREAMING.SUBTITLE' | translate }}</p>
+				<div class="activity-action-buttons" matListItemMeta>
 					<div
 						id="broadcasting-status"
 						[ngClass]="{
 							started: broadcastingStatus === broadcastingStatusEnum.STARTED,
 							stopped: broadcastingStatus === broadcastingStatusEnum.STOPPED,
 							failed: broadcastingStatus === broadcastingStatusEnum.FAILED,
-							pending: broadcastingStatus === broadcastingStatusEnum.STARTING || broadcastingStatus === broadcastingStatusEnum.STOPPING
+							pending:
+								broadcastingStatus === broadcastingStatusEnum.STARTING ||
+								broadcastingStatus === broadcastingStatusEnum.STOPPING
 						}"
 					>
 						<span>{{ broadcastingStatus | uppercase }}</span>
@@ -59,7 +64,9 @@ <h3 matLine class="activity-title">{{ 'PANEL.STREAMING.TITLE' | translate }}</h3
 			>
 				<input
 					placeholder="{{ 'PANEL.STREAMING.URL' | translate }}"
-					[disabled]="broadcastingStatus !== broadcastingStatusEnum.STOPPED && broadcastingStatus !== broadcastingStatusEnum.FAILED"
+					[disabled]="
+						broadcastingStatus !== broadcastingStatusEnum.STOPPED && broadcastingStatus !== broadcastingStatusEnum.FAILED
+					"
 					autocomplete="off"
 					(keypress)="eventKeyPress($event)"
 					[(ngModel)]="broadcastUrl"
@@ -70,7 +77,9 @@ <h3 matLine class="activity-title">{{ 'PANEL.STREAMING.TITLE' | translate }}</h3
 					*ngIf="broadcastingStatus !== broadcastingStatusEnum.STARTED"
 					id="broadcasting-btn"
 					[disabled]="
-						!broadcastUrl || broadcastingStatus === broadcastingStatusEnum.STARTING || broadcastingStatus === broadcastingStatusEnum.STOPPING
+						!broadcastUrl ||
+						broadcastingStatus === broadcastingStatusEnum.STARTING ||
+						broadcastingStatus === broadcastingStatusEnum.STOPPING
 					"
 					(click)="startBroadcasting()"
 				>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.css
index db8a9fe31e..9b0052ddd6 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.css
@@ -6,13 +6,23 @@
 	border-radius: var(--ov-panel-radius);
 }
 
+.recording-title {
+	margin: 0px;
+}
+
 .time-container {
 	padding: 2px;
 }
 .recording-icon {
 	font-size: 32px !important;
-	height: 32px !important;
 	width: 32px !important;
+	margin: 0 !important;
+	align-self: center !important;
+	display: flex;
+	flex-wrap: wrap;
+	height: auto;
+	align-content: center;
+	color: var(--ov-panel-text-color) !important;
 }
 
 .recording-duration {
@@ -111,6 +121,18 @@ mat-expansion-panel {
 	margin: 0px 0px 5px 0px;
 }
 
+::ng-deep .mdc-list {
+	padding: 0px;
+}
+
+::ng-deep .mdc-list-item__secondary-text {
+	display: flex;
+}
+
+::ng-deep .mat-mdc-list-item-unscoped-content {
+	height: 0px !important;
+}
+
 .blink {
 	animation: blinker 1.5s linear infinite !important;
 }
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
index 93e7da77a8..c049e8896c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
@@ -1,9 +1,9 @@
-<mat-expansion-panel (opened)="panelOpened()" (closed)="panelClosed()" [expanded]="expanded" [ngClass]="{'no-body': !opened}">
+<mat-expansion-panel (opened)="panelOpened()" (closed)="panelClosed()" [expanded]="expanded" [ngClass]="{ 'no-body': !opened }">
 	<mat-expansion-panel-header>
 		<mat-list>
 			<mat-list-item>
 				<div
-					matListAvatar
+					matListItemIcon
 					class="activity-icon"
 					[ngClass]="{
 						started: recordingStatus === recStatusEnum.STARTED,
@@ -12,15 +12,18 @@
 						pending: recordingStatus === recStatusEnum.STARTING || recordingStatus === recStatusEnum.STOPPING
 					}"
 				>
-					<mat-icon id="recording-icon" *ngIf="recordingStatus !== recStatusEnum.FAILED && recordingStatus !== recStatusEnum.STARTED">
+					<mat-icon
+						id="recording-icon"
+						*ngIf="recordingStatus !== recStatusEnum.FAILED && recordingStatus !== recStatusEnum.STARTED"
+					>
 						video_camera_front
 					</mat-icon>
 					<mat-icon *ngIf="recordingStatus === recStatusEnum.FAILED">error</mat-icon>
 					<mat-icon class="blink" *ngIf="recordingStatus === recStatusEnum.STARTED">radio_button_checked</mat-icon>
 				</div>
-				<h3 matLine class="activity-title">{{ 'PANEL.RECORDING.TITLE' | translate }}</h3>
-				<p matLine class="activity-subtitle">{{ 'PANEL.RECORDING.SUBTITLE' | translate }}</p>
-				<div class="activity-action-buttons">
+				<h3 matListItemLine class="activity-title">{{ 'PANEL.RECORDING.TITLE' | translate }}</h3>
+				<p matListItemLine class="activity-subtitle">{{ 'PANEL.RECORDING.SUBTITLE' | translate }}</p>
+				<div class="activity-action-buttons" matListItemMeta>
 					<div
 						id="recording-status"
 						[ngClass]="{
@@ -95,9 +98,9 @@ <h2 *ngIf="recordingsList.length === 0">{{ 'PANEL.RECORDING.CONTENT_TITLE' | tra
 					</div>
 					<div mat-line class="time-container">
 						<span class="recording-duration"> {{ recording.duration | duration }} </span>
-						<span class="recording-size"> | {{ recording.size / 1024 / 1024 | number: '1.1-2' }} MBs</span>
+						<span class="recording-size"> | {{ recording.size / 1024 / 1024 | number : '1.1-2' }} MBs</span>
 					</div>
-					<div mat-line class="recording-date">{{ recording.createdAt | date: 'HH:mm - dd/MM/yyyy' }}</div>
+					<div mat-line class="recording-date">{{ recording.createdAt | date : 'HH:mm - dd/MM/yyyy' }}</div>
 
 					<button
 						mat-icon-button
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css
index 2fd5276969..b4d133008c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css
@@ -36,10 +36,12 @@
 	border-radius: var(--ov-panel-radius);
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
 ::ng-deep .mat-slider-thumb {
 	visibility: hidden;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
 ::ng-deep .mat-slider-vertical .mat-slider-track-fill,
 ::ng-deep .mat-slider-vertical .mat-slider-track-background,
 ::ng-deep .mat-slider-vertical .mat-slider-track-wrapper {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.css
index c1abda02d8..16658b2f89 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.css
@@ -4,11 +4,16 @@
 	border-radius: var(--ov-panel-radius);
 	max-height: calc(100% - 40px);
 	min-height: calc(100% - 40px);
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
 }
 
 .panel-header-container {
 	padding: 10px;
+	flex: inherit;
 	display: flex;
+	align-items: center;
 }
 
 .panel-title {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css
index 4300106b0b..0e732a540b 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css
@@ -1,16 +1,28 @@
+.participant-avatar {
+	display: inherit;
+	border-radius: var(--ov-panel-radius);
+	margin: auto !important;
+	padding: 10px;
+	color: var(--ov-panel-text-color);
+}
+
 .participant-subtitle {
 	font-style: italic;
 	font-size: 11px !important;
+	margin: 0;
 }
+
 .participant-nickname {
 	font-weight: bold !important;
+	margin: 0;
+	color: var(--ov-panel-text-color);
 }
 
-.participant-action-buttons{
+.participant-action-buttons {
 	display: flex;
 }
 
- ::ng-deep .participant-action-buttons > *:not(#mute-btn) {
+::ng-deep .participant-action-buttons > *:not(#mute-btn) {
 	display: contents;
 }
 
@@ -18,7 +30,8 @@
 	margin: auto;
 }
 
-mat-list-item {
+
+::ng-deep .mat-mdc-list-item {
 	height: max-content !important;
 	padding-bottom: 10px !important;
 }
@@ -27,8 +40,14 @@ mat-list {
 	padding: 3px;
 }
 
-.participant-avatar {
-	display: contents;
+::ng-deep .mdc-list-item__content {
+	padding-left: 10px !important;
+	align-self: center !important;
+}
+
+::ng-deep .mat-mdc-list-base {
+	--mdc-list-list-item-hover-label-text-color: unset;
+	--mdc-list-list-item-hover-leading-icon-color: unset;
 }
 
 #mute-btn {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
index 951b7aa814..b259d05680 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
@@ -1,13 +1,15 @@
 <mat-list>
 	<mat-list-item>
-		<mat-icon matListAvatar class="participant-avatar">person</mat-icon>
-		<h3 matLine class="participant-nickname">{{ _participant.nickname }}</h3>
-		<p matLine class="participant-subtitle">{{ _participant | streamTypesEnabled }}</p>
-		<!-- <p matLine>
-			<span class="participant-subtitle"></span>
-		</p> -->
+		<div matListItemIcon class="participant-avatar" [style.background-color]="_participant.colorProfile">
+			<mat-icon>person</mat-icon>
+		</div>
+		<h3 matListItemLine class="participant-nickname">
+			{{ _participant.nickname }}
+			<span *ngIf="_participant.isLocal"> ({{ 'PANEL.PARTICIPANTS.YOU' | translate }})</span>
+		</h3>
+		<p matListItemLine class="participant-subtitle">{{ _participant | streamTypesEnabled }}</p>
 
-		<div class="participant-action-buttons">
+		<div class="participant-action-buttons" matListItemMeta>
 			<button
 				mat-icon-button
 				id="mute-btn"
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.css
index 41884e48ef..e5f14616ed 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.css
@@ -1,6 +1,14 @@
+#settings-container {
+	display: flex;
+}
+
 .settings-container {
 	display: flex;
 	padding: 10px;
+	flex: 1;
+	width: auto;
+	justify-content: space-between;
+	align-items: stretch;
 }
 
 .item-menu {
@@ -18,18 +26,29 @@
 	width: min-content;
 }
 
-.option {
-	border-radius: var(--ov-panel-radius);
-}
 .lang-container button {
 	width: 100%;
 }
 
+/* .option {
+	border-radius: var(--ov-panel-radius);
+} */
 mat-list-option[aria-selected='true'] {
-	background: var(--ov-tertiary-color);
-	font-weight: bold !important;
-	color: var(--ov-panel-background);
+	background: var(--ov-tertiary-color) !important;
+	border-radius: var(--ov-panel-radius);
+}
+
+::ng-deep mat-list-option[aria-selected='true'] .mat-mdc-list-item-unscoped-content, ::ng-deep mat-list-option[aria-selected='true']  mat-icon {
+	color: var(--ov-panel-background) !important;
+}
+
+mat-list-option[aria-selected='false'] mat-icon {
+	color: var(--ov-panel-text-color) !important;
+}
+
+::ng-deep .mdc-list-item--with-leading-icon .mdc-list-item__start {
+	margin-right: 15px !important;
 }
-::ng-deep .mat-list-item-content {
-	padding: 5px !important;
+.mat-mdc-list-base {
+	--mdc-list-list-item-focus-state-layer-color: transparent !important;
 }
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
index 770fa6150e..2b79ff358c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
@@ -1,17 +1,19 @@
-<div class="panel-container" id="settings-container" fxLayout="column" fxLayoutAlign="space-evenly none">
-	<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
+<div class="panel-container" id="settings-container">
+	<div class="panel-header-container">
 		<h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3>
 		<button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()">
 			<mat-icon>close</mat-icon>
 		</button>
 	</div>
 
-	<div class="settings-container" fxFlex="100%" fxLayoutAlign="space-evenly none">
+	<div class="settings-container">
 		<div class="item-menu" [ngClass]="{ mobile: isMobile }">
 			<mat-selection-list
 				#optionList
 				(selectionChange)="onSelectionChanged(optionList.selectedOptions.selected[0]?.value)"
 				[multiple]="false"
+				[hideSingleSelectionIndicator]="true"
+				[disableRipple]="true"
 			>
 				<mat-list-option
 					class="option"
@@ -19,7 +21,7 @@ <h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3>
 					[selected]="selectedOption === settingsOptions.GENERAL"
 					[value]="settingsOptions.GENERAL"
 				>
-					<mat-icon mat-list-icon>manage_accounts</mat-icon>
+					<mat-icon matListItemIcon>manage_accounts</mat-icon>
 					<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div>
 				</mat-list-option>
 				<mat-list-option
@@ -28,7 +30,7 @@ <h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3>
 					[selected]="selectedOption === settingsOptions.VIDEO"
 					[value]="settingsOptions.VIDEO"
 				>
-					<mat-icon mat-list-icon>videocam</mat-icon>
+					<mat-icon matListItemIcon>videocam</mat-icon>
 					<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div>
 				</mat-list-option>
 				<mat-list-option
@@ -37,7 +39,7 @@ <h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3>
 					[selected]="selectedOption === settingsOptions.AUDIO"
 					[value]="settingsOptions.AUDIO"
 				>
-					<mat-icon mat-list-icon>mic</mat-icon>
+					<mat-icon matListItemIcon>mic</mat-icon>
 					<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.AUDIO' | translate }}</div>
 				</mat-list-option>
 				<mat-list-option
@@ -47,7 +49,7 @@ <h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3>
 					[value]="settingsOptions.CAPTIONS"
 					id="captions-opt"
 				>
-					<mat-icon mat-list-icon>closed_caption</mat-icon>
+					<mat-icon matListItemIcon>closed_caption</mat-icon>
 					<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div>
 				</mat-list-option>
 			</mat-selection-list>
@@ -58,9 +60,9 @@ <h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3>
 				<ov-nickname-input></ov-nickname-input>
 				<mat-list>
 					<mat-list-item>
-						<mat-icon mat-list-icon>language</mat-icon>
-						<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
-						<ov-lang-selector></ov-lang-selector>
+						<mat-icon matListItemIcon>language</mat-icon>
+						<div matListItemTitle>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
+						<ov-lang-selector matListItemMeta></ov-lang-selector>
 					</mat-list-item>
 				</mat-list>
 			</div>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css
index 65724c5328..9f851e1d7b 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css
@@ -15,8 +15,6 @@
 #toolbar ::ng-deep .lang-button {
 	height: 25px !important;
 	font-size: 14px !important;
-	line-height: 0px;
-	align-items: unset !important;
 }
 .spacer {
 	flex: 1 1 auto;
@@ -98,6 +96,7 @@ hr {
 	margin-bottom: 0px !important;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 .mat-form-field-appearance-fill .mat-form-field-flex {
 	/* background-color: var(--ov-text-color); */
 	border-radius: var(--ov-video-radius);
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
index 24cb6f6aa0..5d67f203d4 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css
@@ -85,22 +85,26 @@
 	}
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
 ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
 	padding: 1px !important;
 }
 
-::ng-deep .mat-input-element {
+::ng-deep .mat-mdc-input-element {
 	caret-color: #000000;
 }
-::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
+/* TODO(mdc-migration): The following rule targets internal classes of option that may no longer apply for the MDC version. */
+::ng-deep .mat-primary .mat-mdc-option.mat-selected:not(.mat-option-disabled) {
 	color: #000000;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 ::ng-deep .mat-form-field-label {
 	color: var(--ov-panel-text-color) !important;
 }
 
-::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+::ng-deep .mat-mdc-form-field.mat-focused .mat-form-field-ripple {
 	background-color: var(--ov-panel-text-color) !important;
 }
 
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css
index 75903da396..1d4a2d1bb5 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css
@@ -2,6 +2,10 @@
 	margin-top: 10px;
 }
 
+.lang-section-item {
+	height: fit-content !important
+}
+
 .section-description {
 	color: var(--ov-panel-text-color);
 	font-size: 12px;
@@ -18,14 +22,6 @@
 	text-align: center;
 }
 
-.pro-feture p  {
+.pro-feture p {
 	font-size: 14px;
 }
-
-::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
-	background-color: var(--ov-tertiary-color);
-}
-
-::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
-	background-color: var(--ov-light-color);
-}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html
index 6a01c75496..29e9d5774f 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html
@@ -13,7 +13,7 @@
 		</div>
 
 		<div id="lang-section">
-			<mat-list-item>
+			<mat-list-item class="lang-section-item">
 				<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
 				<button mat-flat-button [matMenuTriggerFor]="menu" [disabled]="!isSttReady" class="lang-button">
 					<span>{{ langSelected }}</span>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.css
index 492806a39a..f9c8389ff2 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.css
@@ -1,4 +1,7 @@
 .lang-button {
 	background-color: var(--ov-logo-background-color);
 	color: var(--ov-text-color);
+}
+mat-icon {
+	vertical-align: middle;
 }
\ No newline at end of file
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.html
index ae26d5c50f..ee51d649d9 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.html
@@ -1,9 +1,17 @@
 <button mat-flat-button [matMenuTriggerFor]="menu" class="lang-button">
-	<span>{{langSelected?.name}}</span>
-	<mat-icon>expand_more</mat-icon>
+	<span>
+		<span>{{ langSelected?.name }}</span>
+		<mat-icon>expand_more</mat-icon>
+	</span>
 </button>
 <mat-menu #menu="matMenu">
-	<button mat-menu-item *ngFor="let lang of languages" (click)="onLangSelected(lang.lang)" class="lang-menu-opt">
-		<span>{{lang.name}}</span>
+	<button
+		mat-menu-item
+		*ngFor="let lang of languages"
+		(click)="onLangSelected(lang.lang)"
+		[attr.id]="'lang-opt-' + lang.lang"
+		class="lang-menu-opt"
+	>
+		<span>{{ lang.name }}</span>
 	</button>
-</mat-menu>
\ No newline at end of file
+</mat-menu>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts
index 6074516c87..1e620de639 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts
@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, OnInit, Output, ViewChild, EventEmitter, OnDestroy } from '@angular/core';
-import { MatLegacyMenuTrigger as MatMenuTrigger } from '@angular/material/legacy-menu';
-import { MatLegacySelect as MatSelect } from '@angular/material/legacy-select';
+import { MatMenuTrigger } from '@angular/material/menu';
+import { MatSelect } from '@angular/material/select';
 import { StorageService } from '../../../services/storage/storage.service';
 import { TranslateService } from '../../../services/translate/translate.service';
 import { LangOption } from '../../../models/lang.model';
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.css
index f4fd326264..c15d221b60 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.css
@@ -6,7 +6,7 @@
 	margin: auto 10px auto auto;
 }
 
-#nickname-input-container button.mat-button-disabled {
+#nickname-button {
 	color: #000000 !important;
 }
 
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.html
index 2c7d3478a0..69f7cb0aef 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/nickname-input/nickname-input.component.html
@@ -1,8 +1,8 @@
 <div id="nickname-input-container">
-	<button mat-icon-button disabled>
+	<button mat-icon-button disabled id="nickname-button">
 		<mat-icon>person</mat-icon>
 	</button>
-	<mat-form-field appearance="standard">
+	<mat-form-field>
 		<mat-label>{{ 'PREJOIN.NICKNAME' | translate }}</mat-label>
 		<input
 			matInput
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
index b3783deda6..6ec1f4825b 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
@@ -47,6 +47,15 @@
 	top: 40px;
 }
 
+.video-settings-btn mat-icon {
+	position: absolute;
+	top: 5px;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	margin: auto;
+}
+
 video {
 	-o-object-fit: cover;
 	object-fit: cover;
@@ -84,7 +93,7 @@ video {
 	background-color: var(--ov-warn-color);
 }
 
-.status-icons .mat-icon-button,
+.status-icons .mat-mdc-icon-button,
 #settings-container .mat-icon-button {
 	line-height: 0px;
 }
@@ -92,6 +101,12 @@ video {
 .status-icons mat-icon,
 #settings-container mat-icon {
 	font-size: 18px;
+	position: absolute;
+	top: 5px;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	margin: auto;
 }
 
 #settings-container {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
index 4002867cc2..388468c7fc 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
@@ -51,7 +51,6 @@
 	</div>
 
 	<div *ngIf="!isMinimal && showSettingsButton" id="settings-container" class="videoButtons">
-
 		<button
 			mat-icon-button
 			(click)="toggleVideoMenu($event)"
@@ -59,6 +58,7 @@
 			matTooltipPosition="above"
 			aria-label="Video settings menu"
 			id="video-settings-btn-{{ this._stream.streamManager?.stream?.typeOfVideo }}"
+			class="video-settings-btn"
 		>
 			<mat-icon>more_vert</mat-icon>
 		</button>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
index 051c50a21f..10c0d048a5 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
@@ -1,6 +1,6 @@
 import { animate, style, transition, trigger } from '@angular/animations';
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { MatLegacyMenuPanel as MatMenuPanel, MatLegacyMenuTrigger as MatMenuTrigger } from '@angular/material/legacy-menu';
+import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
 import { PublisherProperties } from 'openvidu-browser';
 import { Subscription } from 'rxjs';
 import { VideoSizeIcon } from '../../models/icon.model';
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
index 84c706fff7..cc62f01959 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
@@ -23,8 +23,8 @@
 #media-buttons-container:not(#media-buttons-container > button) button,
 /* Applying css for external additional buttons*/
 ::ng-deep #media-buttons-container:not(#media-buttons-container > button) button {
-	width: 40px;
-	height: 40px;
+	width: 48px;
+	height: 48px;
 	background-color: var(--ov-secondary-color);
 	margin: 6px;
 }
@@ -126,7 +126,7 @@
 #leave-btn {
 	background-color: var(--ov-warn-color) !important;
 	border-radius: var(--ov-leave-button-radius) !important;
-	width: 60px !important;
+	width: 68px !important;
 }
 
 .tooltipList {
@@ -141,13 +141,13 @@
 	top: -6px;
 }
 
-.mat-icon-button[disabled] {
+.mat-mdc-icon-button[disabled] {
 	color: #fff;
 }
 .divider {
 	margin: 8px 0px;
 }
-::ng-deep .mat-menu-item {
+::ng-deep .mat-mdc-menu-item {
 	/* margin-bottom: 10px; */
 	height: 40px;
 	line-height: 40px;
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
index 2a8fb61ef4..8dac7ce4b6 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
@@ -18,7 +18,7 @@ import { DocumentService } from '../../services/document/document.service';
 import { PanelService } from '../../services/panel/panel.service';
 
 import { MediaChange } from '@angular/flex-layout';
-import { MatLegacyMenuTrigger as MatMenuTrigger } from '@angular/material/legacy-menu';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { Session } from 'openvidu-browser';
 import {
 	ToolbarAdditionalButtonsDirective,
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json
index a385a28a59..509c2e641e 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json
@@ -70,7 +70,8 @@
 		"PARTICIPANTS": {
 			"TITLE": "参与者",
 			"CAMERA": "摄像头",
-			"SCREEN": "屏幕"
+			"SCREEN": "屏幕",
+			"YOU": "你"
 		},
 		"SETTINGS": {
 			"TITLE": "设置",
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json
index 1745cfae3c..ba70ad8288 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json
@@ -70,7 +70,8 @@
 		"PARTICIPANTS": {
 			"TITLE": "Teilnehmer",
 			"CAMERA": "KAMERA",
-			"SCREEN": "BILDSCHIRM"
+			"SCREEN": "BILDSCHIRM",
+			"YOU": "Sie"
 		},
 		"SETTINGS": {
 			"TITLE": "Einstellungen",
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json
index 94cc434dae..ef22008c8a 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json
@@ -70,7 +70,8 @@
 		"PARTICIPANTS": {
 			"TITLE": "Participants",
 			"CAMERA": "CAMERA",
-			"SCREEN": "SCREEN"
+			"SCREEN": "SCREEN",
+			"YOU": "You"
 		},
 		"SETTINGS": {
 			"TITLE": "Settings",
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json
index 21bb8747c5..02580def38 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json
@@ -70,7 +70,8 @@
 		"PARTICIPANTS": {
 			"TITLE": "Participantes",
 			"CAMERA": "CÁMARA",
-			"SCREEN": "PANTALLA"
+			"SCREEN": "PANTALLA",
+			"YOU": "Tú"
 		},
 		"SETTINGS": {
 			"TITLE": "Configuración",
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json
index 9d945f9faa..574eba0689 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json
@@ -70,7 +70,8 @@
 		"PARTICIPANTS": {
 			"TITLE": "Participants",
 			"CAMERA": "CAMÉRA",
-			"SCREEN": "ÉCRAN"
+			"SCREEN": "ÉCRAN",
+			"YOU": "vous"
 		},
 		"SETTINGS": {
 			"TITLE": "Paramètres",
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json
index aec8269b0a..f45e2903f5 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json
@@ -70,7 +70,8 @@
 		"PARTICIPANTS": {
 			"TITLE": "सदस्य",
 			"CAMERA": "कैमरा",
-			"SCREEN": "स्क्रीन"
+			"SCREEN": "स्क्रीन",
+			"YOU": "आप"
 		},
 		"SETTINGS": {
 			"TITLE": "सेटिंग्स",
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json
index 2f6e9e63a9..013cc055aa 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json
@@ -70,7 +70,8 @@
 		"PARTICIPANTS": {
 			"TITLE": "Partecipanti",
 			"CAMERA": "CAMERA",
-			"SCREEN": "SCREEN"
+			"SCREEN": "SCREEN",
+			"YOU": "Tu"
 		},
 		"SETTINGS": {
 			"TITLE": "Impostazioni",
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json
index e51b09177b..ecd31f82ba 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json
@@ -70,7 +70,8 @@
 		"PARTICIPANTS": {
 			"TITLE": "参加者",
 			"CAMERA": "カメラ",
-			"SCREEN": "スクリーン"
+			"SCREEN": "スクリーン",
+			"YOU": "あなた"
 		},
 		"SETTINGS": {
 			"TITLE": "設定",
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json
index a8712ab766..c66e1ca871 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json
@@ -70,7 +70,8 @@
 		"PARTICIPANTS": {
 			"TITLE": "Deelnemers",
 			"CAMERA": "CAMERA",
-			"SCREEN": "SCHERM"
+			"SCREEN": "SCHERM",
+			"YOU": "Jij"
 		},
 		"SETTINGS": {
 			"TITLE": "Instellingen",
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json
index f5c35fb250..e7f81ea5f1 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json
@@ -70,7 +70,8 @@
 		"PARTICIPANTS": {
 			"TITLE": "Participantes",
 			"CAMERA": "CÂMERA",
-			"SCREEN": "TELA"
+			"SCREEN": "TELA",
+			"YOU": "Você"
 		},
 		"SETTINGS": {
 			"TITLE": "Configurações",
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/notification-options.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/notification-options.model.ts
index 19a182cf37..fc4fe99bd5 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/notification-options.model.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/notification-options.model.ts
@@ -1,4 +1,4 @@
-import { MatLegacySnackBarConfig as MatSnackBarConfig } from '@angular/material/legacy-snack-bar';
+import { MatSnackBarConfig } from '@angular/material/snack-bar';
 
 /**
  * @internal
@@ -8,4 +8,4 @@ export interface INotificationOptions {
 	buttonActionText?: string;
 	cssClassName?: string;
 	config?: MatSnackBarConfig;
-}
\ No newline at end of file
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.material.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.material.module.ts
index f56fdcf1bc..506f406dc7 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.material.module.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.material.module.ts
@@ -1,25 +1,25 @@
 import { MatBadgeModule } from '@angular/material/badge';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyOptionModule as MatOptionModule } from '@angular/material/legacy-core';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatLegacySliderModule as MatSliderModule } from '@angular/material/legacy-slider';
+import { MatSliderModule } from '@angular/material/slider';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatListModule } from '@angular/material/list';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
-import {MatLegacySlideToggleModule as MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.spec.ts
index ce62ea445c..77f34c2f03 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.spec.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.spec.ts
@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { ActionService } from './action.service';
 
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts
index a32ae2d0be..d630edfdeb 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Subscription } from 'rxjs';
 import { DeleteDialogComponent } from '../../components/dialogs/delete-recording.component';
 import { DialogTemplateComponent } from '../../components/dialogs/dialog.component';
diff --git a/openvidu-components-angular/src/app/app.module.ts b/openvidu-components-angular/src/app/app.module.ts
index f5bc917924..fde652c5a4 100644
--- a/openvidu-components-angular/src/app/app.module.ts
+++ b/openvidu-components-angular/src/app/app.module.ts
@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatMenuModule } from '@angular/material/menu';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app.routing.module';
diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.html b/openvidu-components-angular/src/app/openvidu-call/call.component.html
index f4266de202..e32f862f86 100644
--- a/openvidu-components-angular/src/app/openvidu-call/call.component.html
+++ b/openvidu-components-angular/src/app/openvidu-call/call.component.html
@@ -12,7 +12,7 @@
 		{ name: 'Spanish', lang: 'es-ES' },
 		{ name: 'English', lang: 'en-US' }
 	]"
-	[prejoin]="false"
+	[prejoin]="true"
 	[participantName]="'Participant'"
 	[videoMuted]="false"
 	[audioMuted]="false"
@@ -27,8 +27,8 @@
 	[toolbarParticipantsPanelButton]="true"
 	[toolbarDisplayLogo]="true"
 	[toolbarDisplaySessionName]="true"
-	[streamResolution]="'160x120'"
-	[streamFrameRate]="2"
+	[streamResolution]="'640x480'"
+	[streamFrameRate]="25"
 	[streamDisplayParticipantName]="true"
 	[streamDisplayAudioDetection]="true"
 	[streamSettingsButton]="true"
diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss
index 2f2e360c13..cc5fd13140 100644
--- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss
+++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss
@@ -13,9 +13,9 @@
 //  If you specify typography styles for the components you use elsewhere, you should delete this line.
 //  If you don't need the default component typographies but still want the hierarchy styles,
 //  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
-@include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies();
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -41,7 +41,7 @@ $openvidu-components-theme: mat.define-light-theme(
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-legacy-component-themes($openvidu-components-theme);
+@include mat.all-component-themes($openvidu-components-theme);
 
 @font-face {
 	font-family: 'Material Icons';
diff --git a/openvidu-components-angular/src/styles.scss b/openvidu-components-angular/src/styles.scss
index 8e12897591..965973bd50 100644
--- a/openvidu-components-angular/src/styles.scss
+++ b/openvidu-components-angular/src/styles.scss
@@ -16,14 +16,14 @@
 //  If you specify typography styles for the components you use elsewhere, you should delete this line.
 //  If you don't need the default component typographies but still want the hierarchy styles,
 //  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
-@include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+@include mat.all-component-typographies();
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$openvidu-components-primary: mat-palette($mat-blue-grey, 50, 300);
+$openvidu-components-primary: mat-palette($mat-blue-grey, 500, 300);
 $openvidu-components-accent: mat-palette($mat-amber, 500, 700, A100);
 
 // The warn palette is optional (defaults to red).
@@ -42,7 +42,7 @@ $openvidu-components-theme: mat.define-light-theme((
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-legacy-component-themes($openvidu-components-theme);
+@include mat.all-component-themes($openvidu-components-theme);
 
 
 // Custom openvidu-components styles