update some home styles

web/pages/components/chart.tsx

@@ -1,5 +1,5 @@
 import { LineChart } from 'react-chartkick'
-import styles from '../../styles/styles.module.css';
+import styles from '../../styles/styles.module.scss';
 import 'chart.js';
 
 const defaultProps = {

web/pages/components/logo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import adminStyles from '../../styles/styles.module.css';
+import adminStyles from '../../styles/styles.module.scss';
 
 export default function Logo() {
   return (

web/pages/components/main-layout.tsx

@@ -21,7 +21,7 @@ import { parseSecondsToDurationString } from '../../utils/format'
 import OwncastLogo from './logo';
 import { ServerStatusContext } from '../../utils/server-status-context';
 
-import adminStyles from '../../styles/styles.module.css';
+import adminStyles from '../../styles/styles.module.scss';
 
 let performedUpgradeCheck = false;
 

web/pages/components/statistic.tsx

@@ -1,4 +1,4 @@
-import { Typography, Statistic, Card, Col, Progress} from "antd";
+import { Typography, Statistic, Card, Progress} from "antd";
 const { Text } = Typography;
 
 interface StatisticItemProps {
@@ -8,6 +8,7 @@ interface StatisticItemProps {
   color?: string,
   progress?: boolean,
   centered?: boolean,
+  formatter?: any,
 };
 const defaultProps = {
   title: '', 
@@ -16,6 +17,7 @@ const defaultProps = {
   color: '',
   progress: false,
   centered: false,
+  formatter: null,
 };
 
 
@@ -43,14 +45,15 @@ function ProgressView({ title, value, prefix, color }: StatisticItemProps) {
 }
 ProgressView.defaultProps = defaultProps;
 
-function StatisticView({ title, value, prefix }: StatisticItemProps) {
+function StatisticView({ title, value, prefix, formatter }: StatisticItemProps) {
   return (
     <Statistic
       title={title}
       value={value}
       prefix={prefix}
-  />
+      formatter={formatter}
-  )
+   />
+  );
 }
 StatisticView.defaultProps = defaultProps;
 

web/pages/index.tsx

@@ -14,7 +14,7 @@ GW: to do:
 */
 
 import React, { useState, useEffect, useContext } from "react";
-import { Skeleton, Typography, Card, Statistic } from "antd";
+import { Skeleton, Card, Statistic } from "antd";
 import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons";
 import { formatDistanceToNow, formatRelative } from "date-fns";
 import { ServerStatusContext } from "../utils/server-status-context";
@@ -29,6 +29,16 @@ import {
 } from "../utils/apis";
 import { formatIPAddress, isEmptyObject } from "../utils/format";
 
+function streamDetailsFormatter(streamDetails) {
+  return (
+    <ul className="statistics-list">
+      <li>{streamDetails.videoCodec} @ {streamDetails.videoBitrate} kbps</li>
+      <li>{streamDetails.framerate} fps</li>
+      <li>{streamDetails.width} x {streamDetails.height}</li>
+    </ul>
+  );
+}
+
 export default function Home() {
   const serverStatusData = useContext(ServerStatusContext);
   const { broadcaster, serverConfig: configData } = serverStatusData || {};
@@ -45,7 +55,6 @@ export default function Home() {
   };
   const getMoreStats = () => {
     getLogs();
-    // getConfig();
   }
   useEffect(() => {
     let intervalId = null;
@@ -74,12 +83,12 @@ export default function Home() {
     const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting;
     const audioSetting =
       audioPassthrough || audioBitrate === 0
-        ? `${streamDetails.audioCodec} ${streamDetails.audioBitrate} kpbs`
+        ? `${streamDetails.audioCodec}, ${streamDetails.audioBitrate} kbps`
         : `${audioBitrate} kbps`;
     const videoSetting =
       videoPassthrough || videoBitrate === 0
-        ? `${streamDetails.videoBitrate} kbps ${streamDetails.framerate}fps ${streamDetails.width}x${streamDetails.height}`
+        ? `${streamDetails.videoBitrate} kbps, ${streamDetails.framerate} fps ${streamDetails.width} x ${streamDetails.height}`
-        : `${videoBitrate} kbps ${framerate}fps`;
+        : `${videoBitrate} kbps, ${framerate} fps`;
     
     let settingTitle = 'Outbound Stream Details';
     settingTitle = (videoQualitySettings?.length > 1) ?
@@ -100,9 +109,11 @@ export default function Home() {
     );
   });
 
+
+  // inbound
   const { viewerCount, sessionMaxViewerCount } = serverStatusData;
-  const streamVideoDetailString = `${streamDetails.videoCodec} ${streamDetails.videoBitrate} kbps ${streamDetails.framerate}fps ${streamDetails.width}x${streamDetails.height}`;
+
-  const streamAudioDetailString = `${streamDetails.audioCodec} ${streamDetails.audioBitrate} kbps`;
+  const streamAudioDetailString = `${streamDetails.audioCodec}, ${streamDetails.audioBitrate} kbps`;
 
   const broadcastDate = new Date(broadcaster.time);
 
@@ -147,7 +158,8 @@ export default function Home() {
               />
               <StatisticItem
                 title="Inbound Video Stream"
-                value={streamVideoDetailString}
+                value={streamDetails}
+                formatter={streamDetailsFormatter}
                 prefix={null}
               />
               <StatisticItem

web/pages/logs.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import LogTable from "./components/log-table"
+import LogTable from "./components/log-table";
 
 import {
   LOGS_ALL,

web/pages/update-server-config.tsx

@@ -4,7 +4,7 @@ import { Table, Typography, Input } from 'antd';
 import { isEmptyObject } from '../utils/format';
 import KeyValueTable from "./components/key-value-table";
 import { ServerStatusContext } from '../utils/server-status-context';
-import adminStyles from '../styles/styles.module.css';
+import adminStyles from '../styles/styles.module.scss';
 
 const { Title } = Typography;
 const { TextArea } = Input;

web/styles/home.scss

@@ -1,20 +1,33 @@
 .home-container {
   max-width: 1000px;
 
+  .statistics-list {
+    li {
+      margin-left: -.5em;
+    }
+  }
+
   .section {
     margin: 1rem 0;
+
+    .ant-statistic-content {
+      font-size: 1rem;
+    }
   }
 
   .online-status-section {
     > .ant-card {
-      box-shadow: 0px 1px 1px 0px rgba(0, 22, 40, 0.1);
+      box-shadow: 0px 1px 10px 2px rgba(0, 22, 40, 0.1);
     }
 
     .ant-card-head {
-      background-color: var(--owncast-purple);
+      background-color: #40b246;
       border-color: #ccc;
       color:#fff;
-      
+      @media (prefers-color-scheme: dark) {
+        background-color: #2a762e;
+        border-bottom-color: black;
+      }
     }
     .ant-card-head-title {
       font-size: .88rem;
@@ -32,7 +45,7 @@
         text-align: center;
         margin: 0 1rem;
       }
-    }  
+    }
   }
 
 
@@ -52,6 +65,11 @@
       .ant-card-head {
         background-color: #ccd;
         color: black;
+        @media (prefers-color-scheme: dark) {
+          background-color: #000;
+          color: #ccd;
+        }
+
       }
     }
     .server-detail {
@@ -62,7 +80,7 @@
         align-items: flex-start;
 
         .ant-card {
-          width: 49%;
+          width: 45%;
           text-align: center;
         }
       }

web/styles/styles.module.scss

@@ -85,4 +85,4 @@
 
 .configSection {
   margin-bottom: 2em;
-}
+}