[feature] add proper styles

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) {

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;
     }
   }
 }

src/styles/index.scss

@@ -1,4 +1,5 @@
 * {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
+  font-size: 3rem;
 }