From 0d3317802cfbcd1692cccb6c6df945b3899f2d7e Mon Sep 17 00:00:00 2001
From: Janis Meister <janis.meister87@gmail.com>
Date: Fri, 30 Jun 2023 13:25:44 +0200
Subject: [PATCH] [refactor] update channel name style

---
 src/Viewer.tsx         |  6 +++++-
 src/styles/Viewer.scss | 17 +++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/Viewer.tsx b/src/Viewer.tsx
index 11b9b50..7682bc3 100644
--- a/src/Viewer.tsx
+++ b/src/Viewer.tsx
@@ -16,7 +16,11 @@ export default function Viewer({
 }) {
   return (
     <div className="viewer">
-      {showChannelName ? <h3>{channel?.properties.name}</h3> : null}
+      {showChannelName ? (
+        <div className="channelNameContainer">
+          <h3>{channel?.properties.name}</h3>
+        </div>
+      ) : null}
       {clients?.map((client, i) => {
         //* Client limit
         if (clientLimit != 0 && i >= clientLimit) {
diff --git a/src/styles/Viewer.scss b/src/styles/Viewer.scss
index dc4ad81..951bf25 100644
--- a/src/styles/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -4,10 +4,19 @@
   gap: 0 0;
   padding: 1rem;
 
-  h3 {
-    font-size: 1.5rem;
-    font-weight: 500;
-    margin: 0;
+  .channelNameContainer {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    h3 {
+      font-size: 1.7rem;
+      font-weight: 500;
+      margin: 0;
+      background-color: rgba(47, 49, 54, 0.5);
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      color: white;
+    }
   }
 
   .client {