From f6eeee24638d3c8fce90453ce19c54f002f3c580 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 16 May 2022 23:20:56 -0700
Subject: [PATCH] Use icon instead of the word viewers

---
 web/components/ui/Statusbar/Statusbar.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/components/ui/Statusbar/Statusbar.tsx b/web/components/ui/Statusbar/Statusbar.tsx
index 1b5b2bf21..41f093545 100644
--- a/web/components/ui/Statusbar/Statusbar.tsx
+++ b/web/components/ui/Statusbar/Statusbar.tsx
@@ -1,6 +1,7 @@
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import intervalToDuration from 'date-fns/intervalToDuration';
 import { useEffect, useState } from 'react';
+import { EyeOutlined } from '@ant-design/icons';
 import s from './Statusbar.module.scss';
 
 interface Props {
@@ -35,13 +36,15 @@ export default function Statusbar(props: Props) {
   const { online, lastConnectTime, lastDisconnectTime, viewerCount } = props;
 
   let onlineMessage = '';
-  let rightSideMessage = '';
+  let rightSideMessage: any;
   if (online && lastConnectTime) {
     const duration = makeDurationString(new Date(lastConnectTime));
     onlineMessage = online ? `Live for  ${duration}` : 'Offline';
-    rightSideMessage = `${viewerCount > 0 ? `${viewerCount}` : 'No'} ${
-      viewerCount === 1 ? 'viewer' : 'viewers'
-    }`;
+    rightSideMessage = (
+      <span>
+        <EyeOutlined /> {viewerCount}
+      </span>
+    );
   } else {
     onlineMessage = 'Offline';
     if (lastDisconnectTime) {