From a4748cfc33b05b4ff9b70e3c42fbebff8fd70952 Mon Sep 17 00:00:00 2001
From: Jannik <jannik@outlook.com>
Date: Fri, 26 Feb 2021 22:50:20 +0100
Subject: [PATCH 1/2] fix: set thumbnail image to fixed size and fix label
 color

---
 web/components/main-layout.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/components/main-layout.tsx b/web/components/main-layout.tsx
index 57f0b01a3..efa5e6178 100644
--- a/web/components/main-layout.tsx
+++ b/web/components/main-layout.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import Head from 'next/head';
 import { differenceInSeconds } from 'date-fns';
 import { useRouter } from 'next/router';
-import { Layout, Menu, Popover, Alert } from 'antd';
+import { Layout, Menu, Popover, Alert, Typography } from 'antd';
 
 import {
   SettingOutlined,
@@ -91,10 +91,16 @@ export default function MainLayout(props) {
     ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time)))
     : '';
   const currentThumbnail = online ? (
-    <img src="/thumbnail.jpg" className="online-thumbnail" alt="current thumbnail" />
+    <img
+      src="http://localhost:8080/thumbnail.jpg"
+      className="online-thumbnail"
+      alt="current thumbnail"
+      style={{ width: "10rem" }}
+      />
   ) : null;
   const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
   const statusMessage = online ? `Online ${streamDurationString}` : 'Offline';
+  const popoverTitle = <Typography.Text>Thumbnail</Typography.Text>;
 
   const statusIndicator = (
     <div className="online-status-indicator">
@@ -103,7 +109,7 @@ export default function MainLayout(props) {
     </div>
   );
   const statusIndicatorWithThumb = online ? (
-    <Popover content={currentThumbnail} title="Thumbnail" trigger="hover">
+    <Popover content={currentThumbnail} title={popoverTitle} trigger="hover">
       {statusIndicator}
     </Popover>
   ) : (

From 9027814a0e704f0c8b0c68b69b63ce4b1415c290 Mon Sep 17 00:00:00 2001
From: jeyemwey <jeyemwey@users.noreply.github.com>
Date: Fri, 26 Feb 2021 21:52:49 +0000
Subject: [PATCH 2/2] Prettified Code!

---
 web/components/main-layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/main-layout.tsx b/web/components/main-layout.tsx
index efa5e6178..2ec9ef396 100644
--- a/web/components/main-layout.tsx
+++ b/web/components/main-layout.tsx
@@ -95,8 +95,8 @@ export default function MainLayout(props) {
       src="http://localhost:8080/thumbnail.jpg"
       className="online-thumbnail"
       alt="current thumbnail"
-      style={{ width: "10rem" }}
-      />
+      style={{ width: '10rem' }}
+    />
   ) : null;
   const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
   const statusMessage = online ? `Online ${streamDurationString}` : 'Offline';