From 4eb61d3b96c9176b4d564c39a7ed6a0c29bcde3f Mon Sep 17 00:00:00 2001
From: Janis <janis.meister87@gmail.com>
Date: Sun, 12 Nov 2023 19:19:33 +0100
Subject: [PATCH] fix viewer font size

---
 README.md              | 2 +-
 package.json           | 2 +-
 src/Viewer.tsx         | 2 +-
 src/styles/Viewer.scss | 9 +++++++--
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 3c1de0f..2545fec 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ Try this instruction if you have problems with the quick instructions above.
 5. Enter the in step 1 generated URL into the URL field of the Browser Source
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/50b755f9-d4b4-469f-9136-e2b18f226547)
 
-6. Set the width and height to your desired size. Recommended is a ratio of 1:1 or 1:2 (e.g. 1500x3000 OR 1000x2000)
+6. Set the width and height to your desired size. Recommended is a width of 1000px and the height is determined of how many clients are expected (play around with these values)
 
 7. You should now receive a notification in TeamSpeak5 that the app is allowed to connect to your TeamSpeak5 client. Allow it. (If you don't get a notification, restart TeamSpeak5 and OBS -> try again)  
    ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)
diff --git a/package.json b/package.json
index 91c480a..2b6d7fd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ts5-obs-overlay",
   "private": false,
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Overlay for OBS to show the current talking clients in your TeamSpeak 5 Channel",
   "author": "DerTyp7",
   "homepage": "https://dertyp7.github.io/ts5-obs-overlay/#",
diff --git a/src/Viewer.tsx b/src/Viewer.tsx
index d7705ff..672ce7d 100644
--- a/src/Viewer.tsx
+++ b/src/Viewer.tsx
@@ -16,7 +16,7 @@ export default function Viewer({
     remoteAppPort: remoteAppPort,
     auth: {
       identifier: "de.tealfire.obs",
-      version: "2.0.6",
+      version: "2.0.7",
       name: "TS5 OBS Overlay",
       description: "A OBS overlay for TS5 by DerTyp7",
     },
diff --git a/src/styles/Viewer.scss b/src/styles/Viewer.scss
index 0b3a269..a8ed941 100644
--- a/src/styles/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -7,6 +7,10 @@
   flex-direction: column;
   padding: 0.5rem;
 
+  h1 {
+    font-size: 5vw;
+  }
+
   h1,
   p {
     background-color: #2f313680;
@@ -34,14 +38,15 @@
 
     // icon styles
     svg {
-      width: 2.1rem;
+      width: 5vw;
       aspect-ratio: 1/1;
       margin-right: 0.5rem;
+      filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
     }
 
     // client name styles
     p {
-      font-size: 1.4rem;
+      font-size: 5vw;
     }
   }
 }