assorted cleanup

web/pages/components/log-table.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import { timeFormat } from "d3-time-format";
-import { Table, Tag} from "antd";
+import { Table, Tag, Typography } from "antd";
 import Linkify from "react-linkify";
 import { SortOrder } from "antd/lib/table/interface";
 
+const { Title } = Typography;
+
 function renderColumnLevel(text, entry) {
   let color = 'black';
 
@@ -28,6 +30,9 @@ interface Props {
 }
 
 export default function LogTable({ logs, pageSize }: Props) {
+  if (!logs.length) {
+    return null;
+  }
   const columns = [
     {
       title: "Level",
@@ -69,7 +74,8 @@ export default function LogTable({ logs, pageSize }: Props) {
   ];
 
   return (
-    <div>
+    <div className="logs-section">
+      <Title level={2}>Logs</Title>
       <Table
         size="middle"
         dataSource={logs}

web/pages/index.tsx

@@ -9,7 +9,7 @@ TODO: Link each overview value to the sub-page that focuses on it.
 */
 
 import React, { useState, useEffect, useContext } from "react";
-import { Row, Col, Skeleton, Result, List, Typography, Card, Statistic } from "antd";
+import { Skeleton, Typography, Card, Statistic } from "antd";
 import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons";
 import { formatDistanceToNow, formatRelative } from "date-fns";
 import { ServerStatusContext } from "../utils/server-status-context";
@@ -94,7 +94,7 @@ export default function Home() {
     settingTitle = (videoQualitySettings?.length > 1) ?
       `${settingTitle} ${index + 1}` : settingTitle;
     return (
-      <Card title={settingTitle} type="inner">
+      <Card title={settingTitle} type="inner" key={settingTitle}>
         <StatisticItem
           title="Outbound Video Stream"
           value={`${videoBitrate} kbps, ${framerate} fps`}
@@ -188,12 +188,7 @@ export default function Home() {
       </div>
       </div>
 
-      {logsData.length ? (
-        <>
-          <Title level={2}>Stream Logs</Title>
       <LogTable logs={logsData} pageSize={5} />
-        </>
-      ): null}
     </div>
   );
 }

web/pages/offline-notice.tsx

@@ -69,13 +69,7 @@ export default function Offline({ logs = [] }) {
         }
       </div>
 
-
-      {logs.length ? (
-        <>
-          <Title level={2}>Stream Logs</Title>
       <LogTable logs={logs} pageSize={5} />
-        </>
-      ): null}
     </div>
   );
 }

web/pages/update-server-config.tsx

@@ -82,15 +82,15 @@ function InstanceDetails({ config }) {
     },
     {
       name: "Logo",
-      value: instanceDetails.logo.large,
+      value: instanceDetails.logo?.large,
     },
     {
       name: "Tags",
-      value: instanceDetails.tags.join(", "),
+      value: instanceDetails.tags?.join(", "),
     },
     {
       name: "NSFW",
-      value: instanceDetails.nsfw.toString(),
+      value: instanceDetails.nsfw?.toString(),
     },
     {
       name: "Shows in Owncast directory",
@@ -150,9 +150,9 @@ export default function ServerConfig() {
       setConfig({ ...config, message: error.message });
     }
   };
-
+  useEffect(() => {
     getInfo();
-  
+  }, []);  
 
   return (
     <div>

web/pages/viewer-info.tsx

@@ -109,19 +109,16 @@ export default function ViewersOverTime() {
           title="Current viewers"
           value={viewerCount.toString()}
           prefix={<UserOutlined />}
-          color="#334"
         />
         <StatisticItem
           title="Peak viewers this session"
           value={sessionPeakViewerCount.toString()}
           prefix={<UserOutlined />}
-          color="#334"
         />
         <StatisticItem
           title="Peak viewers overall"
           value={overallPeakViewerCount.toString()}
           prefix={<UserOutlined />}
-          color="#334"
         />
       </Row>
       <div className="chart-container">

web/styles/home.scss

@@ -63,6 +63,7 @@
 
         .ant-card {
           width: 49%;
+          text-align: center;
         }
       }
       .ant-card-head {