changed statusbar colors

web/components/ui/Statusbar/Statusbar.module.scss

@@ -6,5 +6,12 @@
   height: 2rem;
   width: 100%;
   padding: var(--content-padding);
-  color: var(--theme-color-palette-5);
+  color: var(--theme-color-components-text-on-light);
+  background-color: var(--component-background);
+  font-family: var(--theme-text-display-font-family);
+  font-weight: 600;
+  
+  .right {
+    color: red;
+  }
 }

web/components/ui/Statusbar/Statusbar.tsx

@@ -1,7 +1,7 @@
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import intervalToDuration from 'date-fns/intervalToDuration';
 import { FC, useEffect, useState } from 'react';
-import { EyeOutlined } from '@ant-design/icons';
+import { EyeFilled } from '@ant-design/icons';
 import styles from './Statusbar.module.scss';
 
 export type StatusbarProps = {
@@ -45,9 +45,12 @@ export const Statusbar: FC<StatusbarProps> = ({
     const duration = makeDurationString(new Date(lastConnectTime));
     onlineMessage = online ? `Live for  ${duration}` : 'Offline';
     rightSideMessage = viewerCount > 0 && (
-      <span>
-        <EyeOutlined /> {viewerCount}
-      </span>
+      <div className={styles.right}>
+        <span>
+          <EyeFilled />
+        </span>
+        <span>{` ${viewerCount}`}</span>
+      </div>
     );
   } else if (!online) {
     onlineMessage = 'Offline';