misc cleanup

web/pages/_app.tsx

@@ -17,7 +17,7 @@ import '../styles/config-public-details.scss';
 
 import '../styles/home.scss';
 import '../styles/chat.scss';
-import '../styles/config.scss';
+import '../styles/pages.scss';
 
 import { AppProps } from 'next/app';
 import ServerStatusProvider from '../utils/server-status-context';

web/pages/access-tokens.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd';
-import { DeleteOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';
-const { Title, Paragraph, Text } = Typography;
+import { DeleteOutlined } from '@ant-design/icons';
 
 import format from 'date-fns/format';
 
 import { fetchData, ACCESS_TOKENS, DELETE_ACCESS_TOKEN, CREATE_ACCESS_TOKEN } from '../utils/apis';
 
+const { Title, Paragraph } = Typography;
+
 const availableScopes = {
   CAN_SEND_SYSTEM_MESSAGES: {
     name: 'System messages',
@@ -87,9 +88,12 @@ function NewTokenModal(props) {
         Select the permissions this access token will have. It cannot be edited after it's created.
       </p>
       <Checkbox.Group options={scopes} value={selectedScopes} onChange={onChange} />
-      <Button type="text" size="small" onClick={selectAll}>
-        Select all
-      </Button>
+
+      <p>
+        <Button type="primary" onClick={selectAll}>
+          Select all
+        </Button>
+      </p>
     </Modal>
   );
 }
@@ -162,7 +166,7 @@ export default function AccessTokens() {
     try {
       const result = await fetchData(DELETE_ACCESS_TOKEN, {
         method: 'POST',
-        data: { token: token },
+        data: { token },
       });
       getAccessTokens();
     } catch (error) {
@@ -174,7 +178,7 @@ export default function AccessTokens() {
     try {
       const newToken = await fetchData(CREATE_ACCESS_TOKEN, {
         method: 'POST',
-        data: { name: name, scopes: scopes },
+        data: { name, scopes },
       });
       setTokens(tokens.concat(newToken));
     } catch (error) {

web/pages/config-public-details.tsx

@@ -11,9 +11,7 @@ const { Title } = Typography;
 export default function PublicFacingDetails() {
   return (
     <div className="config-public-details-page">
-      <Title level={2} className="page-title">
-        General Settings
-      </Title>
+      <Title>General Settings</Title>
       <p className="description">
         The following are displayed on your site to describe your stream and its content.{' '}
         <a href="https://owncast.online/docs/website/">Learn more.</a>

web/pages/config-server-details.tsx

@@ -7,7 +7,7 @@ const { Title } = Typography;
 export default function ConfigServerDetails() {
   return (
     <div className="config-server-details-form">
-      <Title level={2} className="page-title">
+      <Title>
         Server Settings
       </Title>
       <p className="description">

web/pages/config-social-items.tsx

@@ -7,7 +7,7 @@ const { Title } = Typography;
 export default function ConfigSocialThings() {
   return (
     <div className="config-social-items">
-      <Title level={2}>Social Items</Title>
+      <Title>Social Items</Title>
 
       <EditSocialLinks />
     </div>

web/pages/config-storage.tsx

@@ -7,7 +7,7 @@ const { Title } = Typography;
 export default function ConfigStorageInfo() {
   return (
     <>
-      <Title level={2} className="page-title">
+      <Title>
         Storage
       </Title>
       <p className="description">

web/pages/config-video.tsx

@@ -9,9 +9,7 @@ const { Title } = Typography;
 export default function ConfigVideoSettings() {
   return (
     <div className="config-video-variants">
-      <Title level={2} className="page-title">
-        Video configuration
-      </Title>
+      <Title>Video configuration</Title>
       <p className="description">
         Before changing your video configuration{' '}
         <a href="https://owncast.online/docs/encoding">visit the video documentation</a> to learn

web/pages/help.tsx

@@ -2,9 +2,7 @@ import { Button, Card, Col, Divider, Result, Row } from 'antd';
 import Meta from 'antd/lib/card/Meta';
 import Title from 'antd/lib/typography/Title';
 import {
-  AlertOutlined,
   ApiTwoTone,
-  BookOutlined,
   BugTwoTone,
   CameraTwoTone,
   DatabaseTwoTone,
@@ -17,9 +15,10 @@ import {
 } from '@ant-design/icons';
 import React from 'react';
 
-interface Props {}
 
-export default function Help(props: Props) {
+
+
+export default function Help() {
   const questions = [
     {
       icon: <SettingTwoTone style={{ fontSize: '24px' }} />,
@@ -144,7 +143,7 @@ export default function Help(props: Props) {
   ];
 
   return (
-    <div>
+    <div className="help-page">
       <Title style={{ textAlign: 'center' }}>How can we help you?</Title>
       <Row gutter={[16, 16]} justify="space-around" align="middle">
         <Col xs={24} lg={12} style={{ textAlign: 'center' }}>

web/pages/upgrade.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
-import ReactMarkdown from "react-markdown";
-import { Table, Typography } from "antd";
-import { getGithubRelease } from "../utils/apis";
+import React, { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Table, Typography } from 'antd';
+import { getGithubRelease } from '../utils/apis';
 
 const { Title } = Typography;
 
@@ -10,32 +10,29 @@ function AssetTable(assets) {
 
   const columns = [
     {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
-      render: (text, entry) =>
-        <a href={entry.browser_download_url}>{text}</a>,
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      render: (text, entry) => <a href={entry.browser_download_url}>{text}</a>,
     },
     {
-      title: "Size",
-      dataIndex: "size",
-      key: "size",
-      render: (text) => (`${(text/1024/1024).toFixed(2)} MB`),
+      title: 'Size',
+      dataIndex: 'size',
+      key: 'size',
+      render: text => `${(text / 1024 / 1024).toFixed(2)} MB`,
     },
   ];
 
-  return <Table dataSource={data} columns={columns} rowKey="id" size="large" pagination={false} />
+  return <Table dataSource={data} columns={columns} rowKey="id" size="large" pagination={false} />;
 }
 
-
 export default function Logs() {
   const [release, setRelease] = useState({
-    html_url: "",
-    name: "",
+    html_url: '',
+    name: '',
     created_at: null,
-    body: "",
+    body: '',
     assets: [],
-
   });
 
   const getRelease = async () => {
@@ -43,7 +40,7 @@ export default function Logs() {
       const result = await getGithubRelease();
       setRelease(result);
     } catch (error) {
-      console.log("==== error", error);
+      console.log('==== error', error);
     }
   };
 
@@ -61,9 +58,9 @@ export default function Logs() {
         <a href={release.html_url}>{release.name}</a>
       </Title>
       <Title level={5}>{new Date(release.created_at).toDateString()}</Title>
-      <ReactMarkdown>{release.body}</ReactMarkdown><h3>Downloads</h3>
+      <ReactMarkdown>{release.body}</ReactMarkdown>
+      <h3>Downloads</h3>
       <AssetTable {...release.assets} />
     </div>
   );
 }
-

web/pages/viewer-info.tsx

@@ -114,6 +114,7 @@ export default function ViewersOverTime() {
           prefix={<UserOutlined />}
         />
       </Row>
+
       <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
       {online && <Table dataSource={clients} columns={columns} rowKey={row => row.clientID} />}
     </div>

web/pages/webhooks.tsx

@@ -1,24 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import {
-  Table,
-  Tag,
-  Space,
-  Button,
-  Modal,
-  Checkbox,
-  Input,
-  Typography,
-  Tooltip,
-  Select,
-} from 'antd';
-import { DeleteOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';
+import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
 import { isValidUrl } from '../utils/urls';
 
-const { Title, Paragraph, Text } = Typography;
-const { Option } = Select;
-
 import { fetchData, DELETE_WEBHOOK, CREATE_WEBHOOK, WEBHOOKS } from '../utils/apis';
 
+const { Title, Paragraph } = Typography;
+
 const availableEvents = {
   CHAT: { name: 'Chat messages', description: 'When a user sends a chat message', color: 'purple' },
   USER_JOINED: { name: 'User joined', description: 'When a user joins the chat', color: 'green' },
@@ -96,9 +84,12 @@ function NewWebhookModal(props) {
 
       <p>Select the events that will be sent to this webhook.</p>
       <Checkbox.Group options={events} value={selectedEvents} onChange={onChange} />
-      <Button type="text" size="small" onClick={selectAll}>
-        Select all
-      </Button>
+
+      <p>
+        <Button type="primary" onClick={selectAll}>
+          Select all
+        </Button>
+      </p>
     </Modal>
   );
 }