From 02e3fb0d4e36dd87bd6c17606f9c7c1b4679783c Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Tue, 5 Nov 2024 15:54:18 +0100
Subject: [PATCH] ov-components: Updated css styles for improving custom color
 support

---
 .../dialogs/delete-recording.component.ts     |  9 ++--
 .../components/dialogs/dialog.component.ts    |  6 ++-
 .../dialogs/recording-dialog.component.ts     |  6 ++-
 .../activities-panel.component.scss           | 13 ++++-
 .../broadcasting-activity.component.html      |  1 +
 .../broadcasting-activity.component.scss      | 16 ++----
 .../recording-activity.component.html         |  5 +-
 .../recording-activity.component.scss         | 49 ++++++++++++-------
 .../background-effects-panel.component.html   |  4 +-
 .../background-effects-panel.component.scss   |  3 ++
 .../chat-panel/chat-panel.component.scss      |  5 +-
 .../lib/components/panel/panel.component.scss |  5 ++
 .../participant-panel-item.component.scss     | 11 ++++-
 .../settings-panel.component.html             |  4 +-
 .../settings-panel.component.scss             | 10 ++++
 .../pre-join/pre-join.component.scss          |  6 ++-
 .../audio-devices.component.scss              | 11 +++--
 .../lang-selector.component.html              |  2 +-
 .../lang-selector.component.scss              | 13 ++++-
 .../participant-name-input.component.scss     | 15 +++---
 .../video-devices.component.scss              | 12 +++--
 .../components/toolbar/toolbar.component.scss | 10 +++-
 .../src/lib/lang/es.json                      |  2 +-
 openvidu-components-angular/src/styles.scss   | 26 ----------
 24 files changed, 153 insertions(+), 91 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts
index 181c890928..54ead971ee 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts
@@ -17,18 +17,21 @@ import { MatDialogRef } from '@angular/material/dialog';
 	`,
 	styles: [
 		`
+			::ng-deep .mat-mdc-dialog-content {
+				color: var(--ov-text-surface-color) !important;
+			}
 			::ng-deep .mat-mdc-dialog-surface {
 				background-color: var(--ov-surface-color);
 				border-radius: var(--ov-surface-radius);
 			}
 			#delete-recording-confirm-btn {
-				background-color: var(--ov-error-color);
-				color: var(--ov-text-primary-color);
+				background-color: var(--ov-error-color) !important;
+				color: var(--ov-secondary-action-color);
 			}
 			.mat-mdc-button,
 			.mat-mdc-button:not(:disabled),
 			::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
-				color: var(--ov-text-primary-color);
+				color: var(--ov-secondary-action-color);
 				background-color: var(--ov-primary-action-color) !important;
 				border-radius: var(--ov-surface-radius);
 			}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts
index 89c4f012d4..9ce48c7098 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts
@@ -17,6 +17,10 @@ import { DialogData } from '../../models/dialog.model';
 	`,
 	styles: [
 		`
+			::ng-deep .mat-mdc-dialog-content {
+				color: var(--ov-text-surface-color) !important;
+			}
+
 			::ng-deep .mat-mdc-dialog-surface {
 				background-color: var(--ov-surface-color);
 				border-radius: var(--ov-surface-radius);
@@ -24,7 +28,7 @@ import { DialogData } from '../../models/dialog.model';
 			.mat-mdc-button,
 			.mat-mdc-button:not(:disabled),
 			::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
-				color: var(--ov-text-primary-color);
+				color: var(--ov-secondary-action-color);
 				background-color: var(--ov-primary-action-color) !important;
 				border-radius: var(--ov-surface-radius);
 			}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts
index d9e28424bb..bbfccdc7ac 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts
@@ -17,6 +17,10 @@ import { RecordingDialogData } from '../../models/dialog.model';
 	`,
 	styles: [
 		`
+			::ng-deep .mat-mdc-dialog-content {
+				color: var(--ov-text-surface-color) !important;
+			}
+
 			::ng-deep .mat-mdc-dialog-surface {
 				background-color: var(--ov-surface-color);
 				border-radius: var(--ov-surface-radius);
@@ -29,7 +33,7 @@ import { RecordingDialogData } from '../../models/dialog.model';
 			.mat-mdc-button,
 			.mat-mdc-button:not(:disabled),
 			::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
-				color: var(--ov-text-primary-color);
+				color: var(--ov-secondary-action-color);
 				background-color: var(--ov-primary-action-color) !important;
 				border-radius: var(--ov-surface-radius);
 			}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss
index cdb42f735d..d34408358b 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss
@@ -1,3 +1,5 @@
+$ov-activity-status-color: #afafaf;
+
 :host {
 	.activities-body-container {
 		display: block !important;
@@ -6,9 +8,18 @@
 		padding: 10px;
 	}
 
+	.activity-status {
+		color: var(--ov-text-surface-color);
+		display: inline;
+		padding: 3px;
+		font-size: 11px;
+		border-radius: var(--ov-surface-radius);
+		background-color: $ov-activity-status-color;
+	}
+
 	.activity-icon {
 		display: inherit;
-		background-color: var(--ov-secondary-action-color);
+		background-color: $ov-activity-status-color;;
 		border-radius: var(--ov-surface-radius);
 		margin: 10px 0px !important;
 		padding: 10px;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
index 2a8fbd65ae..cac42c8151 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
@@ -34,6 +34,7 @@ <h3 matListItemTitle class="activity-title">{{ 'PANEL.STREAMING.TITLE' | transla
 				<div class="activity-action-buttons" matListItemMeta>
 					<div
 						id="broadcasting-status"
+						class="activity-status"
 						[ngClass]="{
 							started: broadcastingStatus === broadcastingStatusEnum.STARTED,
 							stopped: broadcastingStatus === broadcastingStatusEnum.STOPPED,
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss
index 24ba9c3039..17d722db9a 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss
@@ -1,13 +1,5 @@
 $ov-broadcasting-color: #5903ca;
 
-#broadcasting-status {
-	color: var(--ov-text-surface-color);
-	display: inline;
-	padding: 3px;
-	font-size: 11px;
-	border-radius: var(--ov-surface-radius);
-}
-
 .time-container {
 	padding: 2px;
 }
@@ -19,7 +11,7 @@ $ov-broadcasting-color: #5903ca;
 }
 
 #broadcasting-icon {
-	color: var(--ov-primary-action-color) !important;
+	color: $ov-broadcasting-color !important;
 }
 
 .broadcasting-duration {
@@ -128,9 +120,9 @@ mat-expansion-panel {
 	padding: 10px;
 	margin: 10px;
 	border-radius: var(--ov-surface-radius);
-    order: 3;
-    justify-content: space-evenly;
-    align-items: center;
+	order: 3;
+	justify-content: space-evenly;
+	align-items: center;
 }
 
 .input-container input {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
index df0f4b2504..9017fa1457 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
@@ -26,6 +26,7 @@ <h3 matListItemTitle class="activity-title">{{ 'PANEL.RECORDING.TITLE' | transla
 				<div class="activity-action-buttons" matListItemMeta>
 					<div
 						id="recording-status"
+						class="activity-status"
 						[ngClass]="{
 							started: recordingStatus === recStatusEnum.STARTED,
 							stopped: recordingStatus === recStatusEnum.STOPPED,
@@ -48,8 +49,8 @@ <h3 matListItemTitle class="activity-title">{{ 'PANEL.RECORDING.TITLE' | transla
 				/>
 			</div>
 
-			<h2 *ngIf="recordingList.length === 0">{{ 'PANEL.RECORDING.CONTENT_TITLE' | translate }}</h2>
-			<span *ngIf="recordingList.length === 0">{{ 'PANEL.RECORDING.CONTENT_SUBTITLE' | translate }}</span>
+			<h2 *ngIf="recordingList.length === 0" class="recording-title">{{ 'PANEL.RECORDING.CONTENT_TITLE' | translate }}</h2>
+			<span *ngIf="recordingList.length === 0" class="recording-subtitle">{{ 'PANEL.RECORDING.CONTENT_SUBTITLE' | translate }}</span>
 
 			<!-- Recording button -->
 			<div class="item recording-action-buttons">
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
index b64d0c1745..b6f0d64dcb 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
@@ -1,10 +1,8 @@
 :host {
-	#recording-status {
-		color: var(--ov-text-primary-color);
-		display: inline;
-		padding: 3px;
-		font-size: 11px;
-		border-radius: var(--ov-surface-radius);
+	$ov-activity-status-color: #afafaf;
+	.recording-title,
+	.recording-subtitle {
+		color: var(--ov-text-surface-color);
 	}
 
 	.recording-title {
@@ -27,10 +25,11 @@
 	}
 
 	.recording-duration {
-		background-color: var(--ov-secondary-action-color);
+		background-color: $ov-activity-status-color;
 		padding: 4px 8px;
 		border-radius: var(--ov-surface-radius);
 		font-weight: 500;
+		color: var(--ov-text-surface-color);
 	}
 
 	.recording-duration mat-icon {
@@ -41,22 +40,22 @@
 
 	.started {
 		background-color: #3b7430 !important;
-		color: var(--ov-text-primary-color);
+		color: #ffffff !important;
 	}
 
 	.activity-icon.started,
 	.failed {
 		background-color: var(--ov-error-color) !important;
-		color: var(--ov-text-primary-color);
+		// color: var(--ov-secondary-action-color);
 	}
 	.stopped {
-		background-color: var(--ov-secondary-action-color);
+		// background-color: var(--ov-secondary-action-color);
 		color: var(--ov-text-surface-color) !important;
 	}
 
 	.starting {
 		background-color: var(--ov-warn-color) !important;
-		color: var(--ov-text-surface-color) !important;
+		color: #000000 !important;
 	}
 
 	.panel-body-container {
@@ -100,17 +99,13 @@
 	#start-recording-btn {
 		width: 100%;
 		background-color: var(--ov-primary-action-color);
-		color: var(--ov-text-primary-color);
+		color: var(--ov-secondary-action-color);
 	}
 
 	#stop-recording-btn {
 		width: 100%;
 		background-color: var(--ov-error-color);
-		color: var(--ov-text-primary-color);
-	}
-
-	.delete-recording-btn {
-		color: var(--ov-error-color);
+		color: var(--ov-secondary-action-color);
 	}
 
 	#reset-recording-status-btn {
@@ -133,6 +128,7 @@
 		width: 40px !important;
 		height: 40px !important;
 		padding: 5px !important;
+		color: var(--ov-text-surface-color);
 	}
 	#play-recording-btn > .mat-icon,
 	#download-recording-btn > .mat-icon,
@@ -140,6 +136,13 @@
 		height: 20px !important;
 	}
 
+	#delete-recording-btn {
+		color: var(--ov-error-color);
+	}
+	#download-recording-btn {
+		color: var(--ov-accent-action-color);
+	}
+
 	mat-expansion-panel {
 		margin: 0px 0px 5px 0px;
 	}
@@ -156,6 +159,18 @@
 		height: 0px !important;
 	}
 
+	::ng-deep .mdc-list-item__secondary-text,
+	::ng-deep .mdc-list-item__primary-text {
+		color: var(--ov-text-surface-color);
+	}
+
+	// ::ng-deep .mat-mdc-list-item:hover {
+	// 	color: #000000 !important;
+	// }
+	::ng-deep .mat-mdc-list-item:hover .mat-mdc-list-item-title {
+		color: var(--ov-text-surface-color) !important;
+	}
+
 	.blink {
 		animation: blinker 1.5s linear infinite !important;
 	}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html
index b1d82b48b3..6388dabd8c 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html
@@ -8,7 +8,7 @@ <h3 class="panel-title">{{ 'PANEL.BACKGROUND.TITLE' | translate }}</h3>
 
 	<div class="effects-container" fxFlex="100%" fxLayoutAlign="space-evenly none">
 		<div>
-			<h4>{{ 'PANEL.BACKGROUND.BLURRED_SECTION' | translate }}</h4>
+			<h4 class="background-title">{{ 'PANEL.BACKGROUND.BLURRED_SECTION' | translate }}</h4>
 			<div>
 				<button
 					*ngFor="let effect of noEffectAndBlurredBackground"
@@ -29,7 +29,7 @@ <h4>{{ 'PANEL.BACKGROUND.BLURRED_SECTION' | translate }}</h4>
 		</div>
 		<hr />
 		<div>
-			<h4>{{ 'PANEL.BACKGROUND.IMAGES_SECTION' | translate }}</h4>
+			<h4 class="background-title">{{ 'PANEL.BACKGROUND.IMAGES_SECTION' | translate }}</h4>
 
 			<div class="grid">
 				<div
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss
index 22b818563e..be921ec297 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss
@@ -1,3 +1,6 @@
+.background-title {
+	color: var(--ov-text-surface-color);
+}
 .effects-container {
 	display: block !important;
 	overflow-y: auto;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss
index 08dc83e52f..4a34afa6f7 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss
@@ -9,6 +9,7 @@ $ov-selection-color: #d4d6d7;
 
 .text-info {
 	margin: auto;
+	color: var(--ov-text-surface-color);
 }
 
 .vertical-align {
@@ -36,6 +37,7 @@ $ov-selection-color: #d4d6d7;
 	order: 3;
 	justify-content: space-evenly;
 	align-items: none;
+
 }
 
 .input-container textarea {
@@ -56,6 +58,7 @@ $ov-selection-color: #d4d6d7;
 	-moz-box-shadow: none;
 	box-shadow: none;
 	font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
+	color: var(--ov-text-surface-color);
 }
 
 .message {
@@ -76,7 +79,7 @@ $ov-selection-color: #d4d6d7;
 .participant-name-container p {
 	font-size: 13px;
 	font-style: italic;
-	color: var(--ov-primary-action-color);
+	color: var(--ov-text-surface-color);
 	padding: 5px;
 }
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss
index 3dc72ca993..e69f2c3664 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss
@@ -16,6 +16,11 @@
 	align-items: center;
 }
 
+.panel-title,
+.panel-close-button {
+	color: var(--ov-text-surface-color);
+}
+
 .panel-title {
 	margin-left: 5px;
 	margin-top: auto;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss
index ce059ed08f..e97f5b425d 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss
@@ -4,13 +4,14 @@
 		border-radius: var(--ov-surface-radius);
 		margin: auto !important;
 		padding: 10px;
-		color: var(--ov-text-surface-color);
+		color: #000000;
 	}
 
 	.participant-subtitle {
 		font-style: italic;
 		font-size: 11px !important;
 		margin: 0;
+		color: var(--ov-text-surface-color);
 	}
 	.participant-name {
 		font-weight: bold !important;
@@ -34,6 +35,13 @@
 		padding-bottom: 10px !important;
 	}
 
+	::ng-deep .mat-mdc-list-item:hover {
+		color: #000000 !important;
+	}
+	::ng-deep .mat-mdc-list-item:hover .mat-mdc-list-item-title {
+		color: var(--ov-text-surface-color) !important;
+	}
+
 	mat-list {
 		padding: 3px;
 	}
@@ -50,6 +58,7 @@
 
 	#mute-btn {
 		border-radius: var(--ov-buttons-radius);
+		color: var(--ov-text-surface-color);
 	}
 
 	.warn-btn {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
index 39b63274b1..f4673e7495 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
@@ -57,10 +57,10 @@ <h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3>
 
 		<div class="item-content">
 			<div *ngIf="selectedOption === settingsOptions.GENERAL">
-				<mat-label>{{ 'PREJOIN.NICKNAME' | translate }}</mat-label>
+				<mat-label class="input-label">{{ 'PREJOIN.NICKNAME' | translate }}</mat-label>
 				<ov-participant-name-input></ov-participant-name-input>
 				<mat-list>
-					<mat-list-item>
+					<mat-list-item class="lang-selector">
 						<mat-icon matListItemIcon>translate</mat-icon>
 						<div matListItemTitle>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
 						<ov-lang-selector matListItemMeta (onLangChanged)="onLangChanged.emit($event)"></ov-lang-selector>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss
index ff95ec7594..5b1ec429cd 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss
@@ -38,6 +38,7 @@
 	}
 
 	mat-list-option[aria-selected='false'] {
+		::ng-deep .mdc-list-item__primary-text,
 		mat-icon {
 			color: var(--ov-text-surface-color) !important;
 		}
@@ -50,4 +51,13 @@
 	.mat-mdc-list-base {
 		--mdc-list-list-item-focus-state-layer-color: transparent !important;
 	}
+
+	::ng-deep .lang-selector .expand-more-icon {
+		color: var(--ov-secondary-action-color) !important;
+	}
+
+	::ng-deep .lang-selector div,
+	.input-label {
+		color: var(--ov-text-surface-color) !important;
+	}
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
index 64c6be8849..12bf48d404 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
@@ -39,6 +39,10 @@
 		font-size: 14px !important;
 	}
 
+	::ng-deep .lang-btn mat-icon {
+		color: var(--ov-text-surface-color) !important;
+	}
+
 	.video-container {
 		margin: auto;
 		min-height: 45vh;
@@ -80,7 +84,7 @@
 
 	#join-button {
 		background-color: var(--ov-primary-action-color);
-		color: var(--ov-text-primary-color);
+		color: var(--ov-secondary-action-color);
 		font-weight: bold;
 		border-radius: var(--ov-surface-radius);
 		width: 100%;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss
index 94cf0975bd..cc20fb5f9c 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss
@@ -1,9 +1,10 @@
-$ov-selection-color: #d4d6d7;
+$ov-selection-color-btn: #afafaf;
+$ov-selection-color: #cccccc;
 
 :host {
 	.device-container-element {
 		border-radius: var(--ov-surface-radius);
-		border: 1px solid $ov-selection-color;
+		border: 1px solid $ov-selection-color-btn;
 	}
 	.device-container-element.mute-btn {
 		border: 1px solid var(--ov-error-color);
@@ -34,7 +35,7 @@ $ov-selection-color: #d4d6d7;
 	::ng-deep .mat-mdc-text-field-wrapper {
 		padding-left: 0px;
 		padding-right: 10px;
-		background-color: var(--ov-surface-color) !important;
+		background-color: $ov-selection-color !important;
 		border-radius: var(--ov-surface-radius);
 	}
 	::ng-deep .mdc-button--unelevated {
@@ -42,7 +43,7 @@ $ov-selection-color: #d4d6d7;
 		border-bottom-left-radius: var(--ov-surface-radius);
 		border-bottom-right-radius: 0px !important;
 		border-top-right-radius: 0px !important;
-		background-color: $ov-selection-color !important;
+		background-color: $ov-selection-color-btn !important;
 		width: 48px !important;
 		min-width: 48px !important;
 		padding: 0;
@@ -84,7 +85,7 @@ $ov-selection-color: #d4d6d7;
 	}
 }
 ::ng-deep .mat-mdc-select-panel {
-	background-color: var(--ov-surface-color) !important;
+	background-color: #ffffff !important;
 }
 
 ::ng-deep .mat-mdc-option {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.html
index d6a7acb55c..b99fbb3a53 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.html
@@ -1,6 +1,6 @@
 <button *ngIf="!compact" mat-flat-button [matMenuTriggerFor]="menu" class="lang-button" id="lang-btn">
 	<span id="lang-selected-name">{{ langSelected?.name }}</span>
-	<mat-icon>expand_more</mat-icon>
+	<mat-icon class="expand-more-icon">expand_more</mat-icon>
 </button>
 <button id="lang-btn-compact" *ngIf="compact" mat-icon-button [matMenuTriggerFor]="menu">
 	<mat-icon>translate</mat-icon>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.scss
index 2f496c0ce8..c08a249707 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.scss
@@ -1,10 +1,21 @@
+$ov-surface-color-lighter: color-mix(in srgb, var(--ov-surface-color), #fff 5%);
 
 .lang-button {
 	background-color: var(--ov-primary-action-color) !important;
 	color: var(--ov-secondary-action-color);
 }
+.lang-button .mat-icon {
+	color: var(--ov-secondary-action-color);
+
+}
 ::ng-deep .mat-mdc-menu-panel {
 	border-radius: var(--ov-surface-radius) !important;
-	background-color: var(--ov-surface-color) !important;
+	background-color: $ov-surface-color-lighter !important;
 	box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2) !important;
 }
+
+::ng-deep .mat-mdc-menu-item,
+.mat-mdc-menu-item:visited,
+.mat-mdc-menu-item:link {
+	color: var(--ov-text-surface-color) !important;
+}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss
index 9a0bd864b6..143d5a18f1 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss
@@ -1,6 +1,6 @@
-$ov-selection-color: #d4d6d7;
+$ov-selection-color-btn: #afafaf;
+$ov-selection-color: #cccccc;
 :host {
-
 	#name-input-container {
 		height: 70px;
 		border-radius: var(--ov-surface-radius);
@@ -18,8 +18,8 @@ $ov-selection-color: #d4d6d7;
 	::ng-deep .mat-mdc-text-field-wrapper {
 		padding: 0;
 		height: 70px;
-		background-color: var(--ov-surface-color) !important;
-
+		background-color: $ov-selection-color !important;
+		border-radius: var(--ov-surface-radius);
 	}
 	::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
 		border: 0px !important;
@@ -29,7 +29,7 @@ $ov-selection-color: #d4d6d7;
 		border-bottom-left-radius: var(--ov-surface-radius) !important;
 		border-bottom-right-radius: 0px !important;
 		border-top-right-radius: 0px !important;
-		background-color: $ov-selection-color !important;
+		background-color: $ov-selection-color-btn !important;
 		width: 48px !important;
 		min-width: 48px !important;
 		padding: 0;
@@ -56,11 +56,12 @@ $ov-selection-color: #d4d6d7;
 		border-bottom-right-radius: var(--ov-surface-radius) !important;
 		border-bottom-left-radius: 0px !important;
 		border-top-left-radius: 0px !important;
-		border: 1px solid $ov-selection-color;
+		border: 1px solid $ov-selection-color-btn;
 		color: #000000;
+		caret-color: #000000 !important;
 	}
 }
 
 ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
 	color: var(--ov-primary-action-color) !important;
-}
\ No newline at end of file
+}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss
index bbdca9ce56..ef3137d9de 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss
@@ -1,8 +1,10 @@
-$ov-selection-color: #d4d6d7;
+$ov-selection-color-btn: #afafaf;
+$ov-selection-color: #cccccc;
+
 :host {
 	.device-container-element {
 		border-radius: var(--ov-surface-radius);
-		border: 1px solid $ov-selection-color;
+		border: 1px solid $ov-selection-color-btn;
 	}
 	.device-container-element.mute-btn {
 		border: 1px solid var(--ov-error-color);
@@ -33,7 +35,7 @@ $ov-selection-color: #d4d6d7;
 	::ng-deep .mat-mdc-text-field-wrapper {
 		padding-left: 0px;
 		padding-right: 10px;
-		background-color: var(--ov-surface-color) !important;
+		background-color: $ov-selection-color !important;
 		border-radius: var(--ov-surface-radius);
 	}
 	::ng-deep .mdc-button--unelevated {
@@ -41,7 +43,7 @@ $ov-selection-color: #d4d6d7;
 		border-bottom-left-radius: var(--ov-surface-radius);
 		border-bottom-right-radius: 0px !important;
 		border-top-right-radius: 0px !important;
-		background-color: $ov-selection-color !important;
+		background-color: $ov-selection-color-btn !important;
 		width: 48px !important;
 		min-width: 48px !important;
 		padding: 0;
@@ -86,7 +88,7 @@ $ov-selection-color: #d4d6d7;
 }
 
 ::ng-deep .mat-mdc-select-panel {
-	background-color: var(--ov-surface-color) !important;
+	background-color: #e2e2e2 !important;
 }
 
 ::ng-deep .mat-mdc-option {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
index 6139302211..b51ee8c66f 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
@@ -2,7 +2,6 @@ $ov-broadcasting-blinking-color: #5903ca;
 $ov-recording-blinking-color: #eb5144;
 
 :host {
-
 	#toolbar {
 		height: 100%;
 		background-color: transparent;
@@ -61,6 +60,8 @@ $ov-recording-blinking-color: #eb5144;
 		color: var(--ov-secondary-action-color);
 	}
 
+
+
 	#media-buttons-container > button,
 	::ng-deep #media-buttons-container > button,
 	#media-buttons-container:not(#media-buttons-container > button) button,
@@ -99,6 +100,7 @@ $ov-recording-blinking-color: #eb5144;
 		font-size: 15px;
 		height: fit-content;
 		padding: 0px 5px;
+		color: var(--ov-text-primary-color);
 	}
 	#session-info-container {
 		display: flex;
@@ -233,6 +235,12 @@ $ov-recording-blinking-color: #eb5144;
 	}
 }
 
+::ng-deep .mat-mdc-menu-item {
+	color: var(--ov-text-surface-color) !important;
+}
+::ng-deep .mat-mdc-menu-item mat-icon {
+	color: var(--ov-text-surface-color) !important;
+}
 ::ng-deep #toolbar-broadcasting-btn > .mat-icon {
 	color: $ov-broadcasting-blinking-color !important;
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
index f75597ff9b..c393d53607 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/lang/es.json
@@ -114,7 +114,7 @@
 			"SUBTITLE": "Graba tus llamadas para la posteridad",
 			"CONTENT_TITLE": "Graba tu video conferencia",
 			"CONTENT_SUBTITLE": "Cuando la grabación haya finalizado, podrás descargarla con facilidad",
-			"STARTING": "Iniciando grabación",
+			"STARTING": "Iniciando grabación...",
 			"STOPPING": "Parando grabación",
 			"IN_PROGRESS": "Grabación en curso",
 			"PLAY": "Reproducir",
diff --git a/openvidu-components-angular/src/styles.scss b/openvidu-components-angular/src/styles.scss
index f38b2a8462..9af9852d70 100644
--- a/openvidu-components-angular/src/styles.scss
+++ b/openvidu-components-angular/src/styles.scss
@@ -45,29 +45,3 @@ body {
 	--ov-video-radius: 5px;
 	--ov-surface-radius: 5px;
 }
-
-/*
---ov-primary-color: #303030; -> --ov-background-color
-
-						+		-> --ov-primary-action-color
---ov-secondary-color: #3e3f3f; -> --ov-secondary-action-color
---ov-tertiary-color: #598eff;  -> REMOVED (se usará --ov-accent-color)
-
-
---ov-warn-color: #eb5144; -> --ov-warn-color
-						+ -> --ov-error-color
---ov-accent-color: #ffae35; -> --ov-accent-action-color
---ov-light-color: #e6e6e6;  -> REMOVED
-
---ov-logo-background-color: #3a3d3d; -> REMOVED (se usará --ov-secondary-color)
---ov-text-color: #ffffff; -> --ov-text-primary-color
- 						-> --ov-text-secondary-color
-
---ov-panel-text-color: #1d1d1d; -> --ov-text-color-surface
---ov-panel-background: #ffffff; -> --ov-surface-color
-
---ov-buttons-radius: 50%;
---ov-leave-button-radius: 10px;
---ov-video-radius: 5px;
---ov-panel-radius: 5px; -> --ov-surface-radius
-*/