From 65b499d7a3ed264229053bf0e40aa1ce1d3ee749 Mon Sep 17 00:00:00 2001
From: sualko <klaus@jsxc.org>
Date: Thu, 17 Mar 2022 14:36:26 +0100
Subject: [PATCH] feat: change button color

depending on room state
---
 ts/Manager/App.scss    | 10 ++++++++++
 ts/Manager/RoomRow.tsx |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/ts/Manager/App.scss b/ts/Manager/App.scss
index 57c8ae7..7b1f295 100644
--- a/ts/Manager/App.scss
+++ b/ts/Manager/App.scss
@@ -102,6 +102,16 @@ pre {
     margin-bottom: 1em;
   }
 
+  .button.success {
+    background-color: var(--color-success);
+    border-color: var(--color-success-hover);
+    color: var(--color-primary-text);
+
+    &:hover {
+      background-color: var(--color-success-hover);
+    }
+  }
+
   .icon {
     display: inline-block;
     opacity: 0;
diff --git a/ts/Manager/RoomRow.tsx b/ts/Manager/RoomRow.tsx
index d346a10..40de45b 100644
--- a/ts/Manager/RoomRow.tsx
+++ b/ts/Manager/RoomRow.tsx
@@ -188,7 +188,7 @@ const RoomRow: React.FC<Props> = (props) => {
 		<>
 			<tr className={showRecordings ? 'selected-row' : ''}>
 				<td className="start">
-					<a href={api.getRoomUrl(room)} className="button primary" target="_blank" rel="noopener noreferrer" title={t('bbb', 'Open room')}>
+					<a href={api.getRoomUrl(room)} className={`button ${room.running ? 'success' : 'primary'}`} target="_blank" rel="noopener noreferrer" title={t('bbb', 'Open room')}>
 						{room.running ? t('bbb', 'Join') : t('bbb', 'Start')}
 					</a>
 				</td>