From eba30772a3e6f7c63d94ebc2d4c8db9cec3d46e2 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Tue, 21 Feb 2023 23:34:42 +0100
Subject: [PATCH] openvidu-components: Improved activities toolbar tags styles

---
 .../components/toolbar/toolbar.component.css  |  7 +++++++
 .../components/toolbar/toolbar.component.html | 21 +++++++++++--------
 2 files changed, 19 insertions(+), 9 deletions(-)

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 f6b58257..dcc89c5f 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
@@ -70,6 +70,13 @@
 	flex-direction: column;
 }
 
+#activities-tag {
+	display: inline-flex;
+}
+
+#activities-tag > div {
+	margin-left: 5px;
+}
 .recording-tag,
 .broadcasting-tag {
 	padding: 0 10px;
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html
index cecc799a..f3c22f80 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html
@@ -4,16 +4,19 @@
 			<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
 			<div id="session-info-container" [class.colapsed]="recordingStatus === _recordingStatus.STARTED">
 				<span id="session-name" *ngIf="!isMinimal && session && session.sessionId && showSessionName">{{ session.sessionId }}</span>
-				<div *ngIf="recordingStatus === _recordingStatus.STARTED" id="recording-tag" class="recording-tag">
-					<mat-icon class="blink">radio_button_checked</mat-icon>
-					<span class="blink">REC</span>
-					<span> | {{ recordingTime | date : 'H:mm:ss' }}</span>
-				</div>
-				<div *ngIf="broadcastingStatus === _broadcastingStatus.STARTED" id="broadcasting-tag" class="broadcasting-tag">
-					<mat-icon class="blink">sensors</mat-icon>
-					<span class="blink">LIVE</span>
-					<span> | {{ broadcastingTime | date : 'H:mm:ss' }}</span>
+				<div id="activities-tag">
+					<div *ngIf="recordingStatus === _recordingStatus.STARTED" id="recording-tag" class="recording-tag">
+						<mat-icon class="blink">radio_button_checked</mat-icon>
+						<span class="blink">REC</span>
+						<span> | {{ recordingTime | date : 'H:mm:ss' }}</span>
+					</div>
+					<div *ngIf="broadcastingStatus === _broadcastingStatus.STARTED" id="broadcasting-tag" class="broadcasting-tag">
+						<mat-icon class="blink">sensors</mat-icon>
+						<span class="blink">LIVE</span>
+						<span> | {{ broadcastingTime | date : 'H:mm:ss' }}</span>
+					</div>
 				</div>
+
 			</div>
 		</div>
 	</div>