From 6a0ef91c14e0e9d493ed7c024500d96fe0baac72 Mon Sep 17 00:00:00 2001
From: Janis <janis.meister87@gmail.com>
Date: Wed, 28 Jun 2023 17:43:47 +0200
Subject: [PATCH] [feature] add proper styles

---
 src/App.tsx            |  1 -
 src/styles/Viewer.scss | 29 ++++++++++++++++++++++-------
 src/styles/index.scss  |  1 +
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5a22e42..85309a8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -50,7 +50,6 @@ export default function App() {
   return (
     <div className="App">
       <Viewer
-        showChannelName={true}
         clients={
           clients.map((client) => {
             if (client.channel?.id === currentChannel?.id) {
diff --git a/src/styles/Viewer.scss b/src/styles/Viewer.scss
index 0ea77d7..dc4ad81 100644
--- a/src/styles/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -2,23 +2,38 @@
   display: flex;
   flex-direction: column;
   gap: 0 0;
+  padding: 1rem;
+
   h3 {
-    font-size: 1.3rem;
-    margin-bottom: 10px;
+    font-size: 1.5rem;
+    font-weight: 500;
+    margin: 0;
   }
 
   .client {
     display: flex;
-    height: 30px;
+    flex-direction: row;
+    gap: 0 0;
     align-items: center;
-    gap: 0 10px;
+    margin: 0.5rem 0;
 
     svg {
-      width: 23px;
-      height: 23px;
+      width: 2.8rem;
+      height: 2.8rem;
+      margin-right: 0.5rem;
     }
     p {
-      font-size: 1rem;
+      margin: 0;
+      color: white;
+      background-color: rgba(47, 49, 54, 0.5);
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+
+      // ellipsis after 22 characters
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 20ch;
     }
   }
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9c18e58..b07f00f 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,4 +1,5 @@
 * {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
+  font-size: 3rem;
 }