misc cleanup

web/components/config/edit-page-content.tsx

@@ -104,13 +104,13 @@ export default function EditPageContent() {
           markdownClass: 'markdown-editor-pane',
         }}
       />
-
+      <br />
       <div className="page-content-actions">
-        {hasChanged ? (
+        {hasChanged && (
           <Button type="primary" onClick={handleSave}>
             Save
           </Button>
-        ) : null}
+        )}
         <FormStatusIndicator status={submitStatus} />
       </div>
     </div>

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>
   );
 }

web/styles/ant-overrides.scss

@@ -36,27 +36,38 @@ h5.ant-typography,
 .ant-typography h4,
 .ant-typography h5 {
   color: var(--white);
-  font-weight: 500;
+  font-weight: 400;
+  margin: .5em 0;
 }
 .ant-typography.ant-typography-secondary {
   color: var(--white);
   font-weight: 400;
 }
 .ant-typography {
+  font-weight: 300;
+  color: var(--white-75);
   a {
     color: var(--owncast-purple);
   }
 }
+
 .ant-typography h1,
 h1.ant-typography {
-  color: var(--white);
+  font-size: 1.75em;
+  color: var(--pink);
 }
 .ant-typography h2,
-h2.ant-typography{
-  color: var(--pink);
+h2.ant-typography {
+  font-size: 1.5em;
+}
+
+.ant-typography h3,
+h3.ant-typography {
+  font-size: 1.25em;
 }
 
 
+
 .ant-progress-text,
 .ant-progress-circle .ant-progress-text {
   color: var(--default-text-color);
@@ -184,6 +195,15 @@ h2.ant-typography{
 
 
 // ANT INPUT
+input.ant-input,
+textarea.ant-input {
+  background-color: var(--textfield-bg);
+  color: var(--white-88);
+  border-color: var(--black);
+  &::placeholder {
+    color: var(--owncast-purple-50);
+  }
+}
 .ant-input-affix-wrapper,
 .ant-input-number {
   background-color: var(--textfield-bg);
@@ -201,6 +221,7 @@ h2.ant-typography{
     }
   }
 }
+.ant-input:hover,
 .ant-input-number:hover,
 .ant-input-affix-wrapper:hover {
   border-color: var(--owncast-purple);
@@ -209,6 +230,7 @@ h2.ant-typography{
     border-color: var(--owncast-purple);
   }
 }
+.ant-input,
 .ant-input-number:focus,
 .ant-input-affix-wrapper:focus, 
 .ant-input-affix-wrapper-focused {
@@ -421,4 +443,16 @@ textarea.ant-input {
       opacity: .75;
     }
   }
-}
+}
+
+
+// ANT CHECKBOX
+.ant-checkbox-wrapper {
+  color: var(--white-75);
+  margin: .5em 0;
+}
+.ant-checkbox-group {
+  .ant-checkbox-group-item {
+    display: block;
+  }
+}

web/styles/config.scss

@@ -1,29 +0,0 @@
-
-
-// todo: put these somewhere else
-
-
-
-.edit-page-content {
-  .page-content-actions {
-    margin-top: 1em;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-
-    .status-message  {
-      margin-left: 1em;
-    }
-  }
-}
-
-
-
-
-.segment-tip {
-  width: 10em;
-  text-align: center;
-  margin: auto;
-  display: inline-block;
-}

web/styles/form-misc-elements.scss

@@ -39,9 +39,6 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
 */
 .field-container {
   padding: .85em 0 .5em;
-  // &:nth-child(even) {
-  //   background-color: rgba(0,0,0,.25);
-  // }
 }
 
 
@@ -50,7 +47,7 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
   width: 90%;
   margin: auto;
   padding: 1em 2em .75em;
-  background-color: var(--black-35);
+  background-color: var(--owncast-purple-25);
   border-radius: 1em;
   .ant-slider-rail {
     background-color: var(--black);

web/styles/globals.scss

@@ -25,8 +25,12 @@ a {
 * {
   box-sizing: border-box;
 }
-p {
+
+p,
+p.description,
+.ant-typography {
   font-weight: 300;
+  margin: 1em 0;
   color: var(--white-75); 
 }
 pre {
@@ -52,10 +56,7 @@ code {
   width: 2rem;
 }
 
-p.description {
-  margin: 1em 0;
-  color: var(--white-75); 
-}
+
 
 
 .line-chart-container {
@@ -64,18 +65,7 @@ p.description {
   border: 1px solid var(--gray-dark);
 }
 
-h2.ant-typography.page-title,
-h3.ant-typography.page-title
- {
-  font-weight: 400;
-  font-size: 1.5em;
-  color: var(--nav-selected-text);
-}
-h2.section-title,
-h3.section-title {
-  font-weight: 400;
-  font-size: 1.25em;
-}
+
 
 .form-module {
   margin: 1em 0;

web/styles/main-layout.scss

@@ -50,7 +50,7 @@
 
 
   .main-content-container {
-    padding: 3em;
+    padding: 2em 3em 3em;
   }
 
   .footer-container {

web/styles/pages.scss

@@ -0,0 +1,13 @@
+// misc styling for various /pages
+
+
+.help-page {
+
+  .ant-result-image {
+    height: 100px;
+    svg {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}

web/styles/variables.scss

@@ -1,5 +1,3 @@
-// rename to variables.scss
-
 :root {
   // colors
   --white: rgba(255,255,255,1);