From 140449948a2477acae95cdbf8576e58efd04d457 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Thu, 12 May 2022 11:32:36 +0200
Subject: [PATCH] openvidu-components: Unified common panel styles

---
 .../activities-panel.component.css            | 31 +------
 .../activities-panel.component.html           |  8 +-
 .../activities-panel.component.ts             |  2 +-
 .../background-effects-panel.component.css    | 43 ---------
 .../background-effects-panel.component.html   |  8 +-
 .../background-effects-panel.component.ts     |  2 +-
 .../panel/chat-panel/chat-panel.component.css | 89 ++++++-------------
 .../chat-panel/chat-panel.component.html      |  8 +-
 .../panel/chat-panel/chat-panel.component.ts  |  2 +-
 .../lib/components/panel/panel.component.css  | 41 +++++++++
 .../participants-panel.component.css          | 34 ++-----
 .../participants-panel.component.html         |  8 +-
 .../participants-panel.component.ts           |  2 +-
 13 files changed, 94 insertions(+), 184 deletions(-)

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 c9555f6b..001c8736 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
@@ -1,28 +1,3 @@
-#activities-container {
-	margin: 20px;
-	background-color: var(--ov-panel-background);
-	border-radius: var(--ov-panel-radius);
-	max-height: calc(100% - 40px);
-	min-height: calc(100% - 40px);
-}
-
-.header-container {
-	padding: 10px;
-	display: flex;
-}
-
-.header-container h3 {
-	margin-left: 5px;
-	margin-top: auto;
-	margin-bottom: auto;
-	font-weight: bold;
-}
-
-.header-container button {
-	margin-left: auto;
-	border-radius: var(--ov-buttons-radius);
-}
-
 .activities-body-container {
 	display: block !important;
 	overflow-y: auto;
@@ -40,7 +15,6 @@
 	margin: auto;
 }
 
-
 .activity-subtitle {
 	font-style: italic;
 	font-size: 11px !important;
@@ -49,7 +23,7 @@
 	font-weight: bold !important;
 }
 
-.activity-action-buttons{
+.activity-action-buttons {
 	align-self: flex-start;
 	margin-top: 15px;
 	font-weight: 600;
@@ -63,7 +37,8 @@
 	padding: 0px 10px !important;
 }
 
-::ng-deep .mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content {
+::ng-deep .mat-list-base .mat-list-item .mat-list-item-content,
+.mat-list-base .mat-list-option .mat-list-item-content {
 	padding: 0px !important;
 }
 
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 9048e1aa..bbd32233 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,7 +1,7 @@
-<div class="panel" id="activities-container" fxLayout="column" fxLayoutAlign="space-evenly none">
-	<div class="header-container" fxFlex="55px" fxLayoutAlign="start center">
-		<h3>Activities</h3>
-		<button mat-icon-button matTooltip="Close" (click)="close()">
+<div class="panel-container" id="activities-container" fxLayout="column" fxLayoutAlign="space-evenly none">
+	<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
+		<h3 class="panel-title">Activities</h3>
+		<button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
 			<mat-icon>close</mat-icon>
 		</button>
 	</div>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts
index 7a699095..89ac354c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts
@@ -5,7 +5,7 @@ import { PanelService } from '../../../services/panel/panel.service';
 @Component({
 	selector: 'ov-activities-panel',
 	templateUrl: './activities-panel.component.html',
-	styleUrls: ['./activities-panel.component.css']
+	styleUrls: ['../panel.component.css','./activities-panel.component.css']
 })
 export class ActivitiesPanelComponent implements OnInit {
 	constructor(private panelService: PanelService) {}
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 24d720a2..2fd52769 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
@@ -1,28 +1,3 @@
-#background-effects-container {
-	margin: 20px;
-	background-color: var(--ov-panel-background);
-	border-radius: var(--ov-panel-radius);
-	max-height: calc(100% - 40px);
-	min-height: calc(100% - 40px);
-}
-
-.header-container {
-	padding: 10px;
-	display: flex;
-}
-
-.header-container h3 {
-	margin-left: 5px;
-	margin-top: auto;
-	margin-bottom: auto;
-	font-weight: bold;
-}
-
-.header-container button {
-	margin-left: auto;
-	border-radius: var(--ov-buttons-radius);
-}
-
 .effects-container {
 	display: block !important;
 	overflow-y: auto;
@@ -70,21 +45,3 @@
 ::ng-deep .mat-slider-vertical .mat-slider-track-wrapper {
 	width: 10px !important;
 }
-
-::-webkit-scrollbar {
-	width: 8px;
-}
-
-::-webkit-scrollbar-thumb {
-	background: #a7a7a7;
-	border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background: #7c7c7c;
-}
-
-::-webkit-scrollbar-track {
-	background: var(--ov-light-color);
-	border-radius: 4px;
-}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html
index faa30d5a..88a7b30b 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html
@@ -1,7 +1,7 @@
-<div class="panel" id="background-effects-container" fxLayout="column" fxLayoutAlign="space-evenly none">
-	<div class="header-container" fxFlex="55px" fxLayoutAlign="start center">
-		<h3>Background effects</h3>
-		<button mat-icon-button matTooltip="Close" (click)="close()">
+<div class="panel-container" id="background-effects-container" fxLayout="column" fxLayoutAlign="space-evenly none">
+	<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
+		<h3 class="panel-title">Background effects</h3>
+		<button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
 			<mat-icon>close</mat-icon>
 		</button>
 	</div>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
index 13004682..dc5fd5c4 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
@@ -8,7 +8,7 @@ import { VirtualBackgroundService } from '../../../services/virtual-background/v
 @Component({
   selector: 'ov-background-effects-panel',
   templateUrl: './background-effects-panel.component.html',
-  styleUrls: ['./background-effects-panel.component.css'],
+  styleUrls: ['../panel.component.css','./background-effects-panel.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BackgroundEffectsPanelComponent implements OnInit {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css
index b192ae0a..db507860 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css
@@ -1,28 +1,4 @@
-#chat-container {
-	margin: 20px;
-	background-color: var(--ov-panel-background);
-	border-radius: var(--ov-panel-radius);
-	max-height: calc(100% - 40px);
-	min-height: calc(100% - 40px);
-}
-
-.header-container {
-	padding: 10px;
-	display: flex;
-}
-
-.header-container h3 {
-	margin-left: 5px;
-	margin-top: auto;
-	margin-bottom: auto;
-}
-
-.header-container button {
-	margin-left: auto;
-	border-radius: var(--ov-buttons-radius);
-}
-
-.text-container{
+.text-container {
 	/* padding: 5px; */
 	background-color: var(--ov-light-color);
 	color: var(--ov-panel-text-color);
@@ -33,7 +9,6 @@
 
 .text-info {
 	margin: 3px;
-
 }
 
 .messages-container {
@@ -65,35 +40,34 @@
 	resize: none;
 	outline: none;
 
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-	font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	box-shadow: none;
+	font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
 }
 
-
-  .message {
+.message {
 	position: relative;
 	padding: 3px 0;
-  }
+}
 
-  .msg-detail {
+.msg-detail {
 	width: 95%;
 	display: inline-block;
-  }
+}
 
-  .msg-detail p {
+.msg-detail p {
 	margin: 0;
 	font-size: 14px;
-  }
+}
 
-  .nickname-container p {
+.nickname-container p {
 	font-size: 13px;
 	font-weight: bold;
 	color: var(--ov-panel-text-color);
-  }
+}
 
-  .msg-content {
+.msg-content {
 	position: relative;
 	border-radius: var(--ov-panel-radius);
 	padding: 8px;
@@ -102,12 +76,11 @@
 	max-width: 95%;
 	font-size: 13px;
 	word-break: break-all;
-  }
+}
 
-  #send-btn {
+#send-btn {
 	border-radius: var(--ov-buttons-radius);
-  }
-
+}
 
 /* Start message from other user */
 
@@ -119,30 +92,18 @@
 	float: left;
 }
 
+/* End message from other user */
 
-  /* End message from other user */
+/* Start my messages */
 
-  /* Start my messages */
-
-  .message.right .msg-detail .nickname-container {
+.message.right .msg-detail .nickname-container {
 	text-align: right;
-  }
+}
 
-  .message.right .msg-detail .msg-content {
+.message.right .msg-detail .msg-content {
 	float: right;
-  }
+}
 
-
-  /* End my messages */
-
-  ::-webkit-scrollbar {
-	width: 8px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-	background-color: #6b6b6b;
-  }
-
-  ::ng-deep a:-webkit-any-link {
+::ng-deep a:-webkit-any-link {
 	color: #1a73e8;
-}
\ No newline at end of file
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html
index b7414b3e..d819a6e6 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.html
@@ -1,7 +1,7 @@
-<div id="chat-container" fxLayout="column" fxLayoutAlign="space-evenly none" >
-	<div class="header-container" fxFlex="55px" fxLayoutAlign="start center">
-		<h3>Chat</h3>
-		<button mat-icon-button matTooltip="Close" (click)="close()">
+<div class="panel-container" id="chat-container" fxLayout="column" fxLayoutAlign="space-evenly none" >
+	<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
+		<h3 class="panel-title">Chat</h3>
+		<button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
 			<mat-icon>close</mat-icon>
 		</button>
 	</div>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
index 60bdbc88..d6e89158 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
@@ -41,7 +41,7 @@ import { PanelService } from '../../../services/panel/panel.service';
 @Component({
 	selector: 'ov-chat-panel',
 	templateUrl: './chat-panel.component.html',
-	styleUrls: ['./chat-panel.component.css'],
+	styleUrls: ['../panel.component.css','./chat-panel.component.css'],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ChatPanelComponent implements OnInit, AfterViewInit {
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 e69de29b..c1abda02 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
@@ -0,0 +1,41 @@
+.panel-container {
+	margin: 20px;
+	background-color: var(--ov-panel-background);
+	border-radius: var(--ov-panel-radius);
+	max-height: calc(100% - 40px);
+	min-height: calc(100% - 40px);
+}
+
+.panel-header-container {
+	padding: 10px;
+	display: flex;
+}
+
+.panel-title {
+	margin-left: 5px;
+	margin-top: auto;
+	margin-bottom: auto;
+}
+
+.panel-close-button {
+	margin-left: auto;
+	border-radius: var(--ov-buttons-radius);
+}
+
+::-webkit-scrollbar {
+	width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+	background: #a7a7a7;
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: #7c7c7c;
+}
+
+::-webkit-scrollbar-track {
+	background: var(--ov-light-color);
+	border-radius: 4px;
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css
index 799fd34c..2da8dc56 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css
@@ -1,29 +1,6 @@
-.participants-container {
-	margin: 20px;
-	background-color: var(--ov-panel-background);
-	border-radius: var(--ov-panel-radius);
-	max-height: calc(100% - 40px);
-	min-height: calc(100% - 40px);
-}
-
-.header-container {
-	padding: 10px;
-	display: flex;
-}
-
-.header-container h3 {
-	margin-left: 5px;
-	margin-top: auto;
-	margin-bottom: auto;
-}
-
-.header-container button {
-	margin-left: auto;
-	border-radius: var(--ov-buttons-radius);
-}
-
-.local-participant-container, .remote-participants-container {
-    margin: 5px 10px;
+.local-participant-container,
+.remote-participants-container {
+	margin: 5px 10px;
 }
 
 .scrollable {
@@ -32,7 +9,7 @@
 	overflow: auto;
 }
 
-.message-container{
+.message-container {
 	padding: 5px;
 	background-color: var(--ov-light-color);
 	color: var(--ov-panel-text-color);
@@ -41,7 +18,6 @@
 	font-size: 12px;
 }
 
-.message-container p{
+.message-container p {
 	margin: 0;
-
 }
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html
index 23d22f03..5f5d41ee 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html
@@ -1,7 +1,7 @@
-<div class="participants-container" id="participants-container">
-	<div class="header-container">
-		<h3>Participants</h3>
-		<button mat-icon-button matTooltip="Close" (click)="close()">
+<div class="panel-container" id="participants-container">
+	<div class="panel-header-container">
+		<h3 class="panel-title">Participants</h3>
+		<button class="panel-close-button" mat-icon-button matTooltip="Close" (click)="close()">
 			<mat-icon>close</mat-icon>
 		</button>
 	</div>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts
index 4dde4a85..5e593a79 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts
@@ -41,7 +41,7 @@ import { Subscription } from 'rxjs';
 @Component({
 	selector: 'ov-participants-panel',
 	templateUrl: './participants-panel.component.html',
-	styleUrls: ['./participants-panel.component.css'],
+	styleUrls: ['../../panel.component.css','./participants-panel.component.css'],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ParticipantsPanelComponent implements OnInit, OnDestroy, AfterViewInit {