hella cleanup - index page items; use more Row/Cols to reduce custom css layout

web/pages/chat.tsx

@@ -202,7 +202,7 @@ export default function Chat() {
 
   return (
     <div className="chat-messages">
-      <Title level={2}>Chat Messages</Title>
+      <Title>Chat Messages</Title>
       <p>Manage the messages from viewers that show up on your stream.</p>
       <div className={bulkDivClasses}>
         <span className="label">Check multiple messages to change their visibility to: </span>

web/pages/config-video.tsx

@@ -16,13 +16,13 @@ export default function ConfigVideoSettings() {
         how it impacts your stream performance.
       </p>
 
-      <Row gutter={16}>
-        <Col xl={12}>
+      <Row gutter={[16, 16]}>
+        <Col md={24} lg={12}>
           <div className="form-module variants-table-module">
             <VideoVariantsTable />
           </div>
         </Col>
-        <Col xl={12}>
+        <Col md={24} lg={12}>
           <div className="form-module latency-module">
             <VideoLatency />
           </div>

web/pages/hardware-info.tsx

@@ -1,5 +1,5 @@
 import { BulbOutlined, LaptopOutlined, SaveOutlined } from '@ant-design/icons';
-import { Row } from 'antd';
+import { Row, Typography } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../utils/apis';
 import Chart from '../components/chart';
@@ -67,6 +67,8 @@ export default function HardwareInfo() {
 
   return (
     <div>
+      <Typography.Title>Hardware Info</Typography.Title>
+      <br />
       <div>
         <Row gutter={[16, 16]} justify="space-around">
           <StatisticItem

web/pages/index.tsx

@@ -1,24 +1,13 @@
-/*
-Will display an overview with the following datasources:
-1. Current broadcaster.
-2. Viewer count.
-3. Video settings.
-
-TODO: Link each overview value to the sub-page that focuses on it.
-*/
-
 import React, { useState, useEffect, useContext } from 'react';
-import { Skeleton, Card, Statistic } from 'antd';
+import { Skeleton, Card, Statistic, Row, Col } from 'antd';
 import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
 import { formatDistanceToNow, formatRelative } from 'date-fns';
 import { ServerStatusContext } from '../utils/server-status-context';
-import StatisticItem from '../components/statistic';
 import LogTable from '../components/log-table';
 import Offline from './offline-notice';
 
 import { LOGS_WARN, fetchData, FETCH_INTERVAL } from '../utils/apis';
 import { formatIPAddress, isEmptyObject } from '../utils/format';
-import { UpdateArgs } from '../types/config-section';
 
 function streamDetailsFormatter(streamDetails) {
   return (
@@ -80,31 +69,34 @@ export default function Home() {
   }
 
   // map out settings
-  const videoQualitySettings = serverStatusData?.currentBroadcast?.outputSettings?.map(
-    (setting, index) => {
-      const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting;
+  const videoQualitySettings = serverStatusData?.currentBroadcast?.outputSettings?.map(setting => {
+    const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting;
 
-      const audioSetting = audioPassthrough
-        ? `${streamDetails.audioCodec || 'Unknown'}, ${streamDetails.audioBitrate} kbps`
-        : `${audioBitrate || 'Unknown'} kbps`;
+    const audioSetting = audioPassthrough
+      ? `${streamDetails.audioCodec || 'Unknown'}, ${streamDetails.audioBitrate} kbps`
+      : `${audioBitrate || 'Unknown'} kbps`;
 
-      const videoSetting = videoPassthrough
-        ? `${streamDetails.videoBitrate || 'Unknown'} kbps, ${streamDetails.framerate} fps ${
-            streamDetails.width
-          } x ${streamDetails.height}`
-        : `${videoBitrate || 'Unknown'} kbps, ${framerate} fps`;
+    const videoSetting = videoPassthrough
+      ? `${streamDetails.videoBitrate || 'Unknown'} kbps, ${streamDetails.framerate} fps ${
+          streamDetails.width
+        } x ${streamDetails.height}`
+      : `${videoBitrate || 'Unknown'} kbps, ${framerate} fps`;
 
-      let settingTitle = 'Outbound Stream Details';
-      settingTitle =
-        videoQualitySettings?.length > 1 ? `${settingTitle} ${index + 1}` : settingTitle;
-      return (
-        <Card title={settingTitle} type="inner" key={`${settingTitle}${index}`}>
-          <StatisticItem title="Outbound Video Stream" value={videoSetting} prefix={null} />
-          <StatisticItem title="Outbound Audio Stream" value={audioSetting} prefix={null} />
-        </Card>
-      );
-    },
-  );
+    return (
+      <div className="stream-details-item-container">
+        <Statistic
+          className="stream-details-item"
+          title="Outbound Video Stream"
+          value={videoSetting}
+        />
+        <Statistic
+          className="stream-details-item"
+          title="Outbound Audio Stream"
+          value={audioSetting}
+        />
+      </div>
+    );
+  });
 
   // inbound
   const { viewerCount, sessionPeakViewerCount } = serverStatusData;
@@ -118,57 +110,60 @@ export default function Home() {
   return (
     <div className="home-container">
       <div className="sections-container">
-        <div className="section online-status-section">
-          <Card title="Stream is online" type="inner">
-            <Statistic
-              title={`Stream started ${formatRelative(broadcastDate, Date.now())}`}
-              value={formatDistanceToNow(broadcastDate)}
-              prefix={<ClockCircleOutlined />}
-            />
-            <Statistic title="Viewers" value={viewerCount} prefix={<UserOutlined />} />
-            <Statistic
-              title="Peak viewer count"
-              value={sessionPeakViewerCount}
-              prefix={<UserOutlined />}
-            />
+        <div className="online-status-section">
+          <Card size="small" type="inner" className="online-details-card">
+            <Row gutter={[16, 16]} align="middle">
+              <Col span={8} sm={24} md={8}>
+                <Statistic
+                  title={`Stream started ${formatRelative(broadcastDate, Date.now())}`}
+                  value={formatDistanceToNow(broadcastDate)}
+                  prefix={<ClockCircleOutlined />}
+                />
+              </Col>
+              <Col span={8} sm={24} md={8}>
+                <Statistic title="Viewers" value={viewerCount} prefix={<UserOutlined />} />
+              </Col>
+              <Col span={8} sm={24} md={8}>
+                <Statistic
+                  title="Peak viewer count"
+                  value={sessionPeakViewerCount}
+                  prefix={<UserOutlined />}
+                />
+              </Col>
+            </Row>
           </Card>
         </div>
 
-        <div className="section stream-details-section">
-          <div className="details outbound-details">{videoQualitySettings}</div>
+        <Row gutter={[16, 16]} className="section stream-details-section">
+          <Col className="outbound-details" span={12} sm={24} md={24} lg={12}>
+            <Card size="small" title="Outbound Stream Details" type="inner">
+              {videoQualitySettings}
+            </Card>
+          </Col>
 
-          <div className="details other-details">
-            <Card title="Inbound Stream Details" type="inner">
-              <StatisticItem
+          <Col className="inbound-details" span={12} sm={24} md={24} lg={12}>
+            <Card size="small" title="Inbound Stream Details" type="inner">
+              <Statistic
+                className="stream-details-item"
                 title="Input"
                 value={`${encoder} ${formatIPAddress(remoteAddr)}`}
-                prefix={null}
               />
-              <StatisticItem
+              <Statistic
+                className="stream-details-item"
                 title="Inbound Video Stream"
                 value={streamDetails}
                 formatter={streamDetailsFormatter}
-                prefix={null}
               />
-              <StatisticItem
+              <Statistic
+                className="stream-details-item"
                 title="Inbound Audio Stream"
                 value={streamAudioDetailString}
-                prefix={null}
               />
             </Card>
-
-            <div className="server-detail">
-              <Card title="Server Config" type="inner">
-                <StatisticItem
-                  title="Directory registration enabled"
-                  value={configData.yp.enabled.toString()}
-                  prefix={null}
-                />
-              </Card>
-            </div>
-          </div>
-        </div>
+          </Col>
+        </Row>
       </div>
+      <br />
       <LogTable logs={logsData} pageSize={5} />
     </div>
   );

web/pages/offline-notice.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { Result, Card } from 'antd';
+import { Result, Card, Row, Col } from 'antd';
 import {
   MessageTwoTone,
   QuestionCircleTwoTone,
@@ -55,22 +55,23 @@ export default function Offline({ logs = [] }) {
 
   return (
     <>
-      <div className="offline-content">
-        <div className="logo-section">
+      <Row gutter={[16, 16]} className="offline-content">
+        <Col span={12} xs={24} sm={24} md={24} lg={12} className="logo-section">
           <Result
             icon={<OwncastLogo />}
             title="No stream is active."
             subTitle="You should start one."
           />
-        </div>
-        <div className="list-section">
+        </Col>
+
+        <Col span={12} xs={24} sm={24} md={24} lg={12} className="list-section">
           {data.map(item => (
-            <Card key={item.title}>
+            <Card key={item.title} size="small" bordered={false}>
               <Meta avatar={item.icon} title={item.title} description={item.content} />
             </Card>
           ))}
-        </div>
-      </div>
+        </Col>
+      </Row>
       <LogTable logs={logs} pageSize={5} />
     </>
   );

web/pages/viewer-info.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { Table, Row } from 'antd';
+import { Table, Row, Typography } from 'antd';
 import { formatDistanceToNow } from 'date-fns';
 import { UserOutlined } from '@ant-design/icons';
 import { SortOrder } from 'antd/lib/table/interface';
@@ -94,7 +94,9 @@ export default function ViewersOverTime() {
   ];
 
   return (
-    <div>
+    <>
+      <Typography.Title>Viewer Info</Typography.Title>
+      <br />
       <Row gutter={[16, 16]} justify="space-around">
         {online && (
           <StatisticItem
@@ -117,6 +119,6 @@ export default function ViewersOverTime() {
 
       <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
       {online && <Table dataSource={clients} columns={columns} rowKey={row => row.clientID} />}
-    </div>
+    </>
   );
 }