From d55e4dfe2966d13d23afabd2ba9377c667cf38e4 Mon Sep 17 00:00:00 2001 From: gingervitis Date: Sun, 14 Feb 2021 01:30:42 -0800 Subject: [PATCH] misc cleanup --- web/components/config/edit-page-content.tsx | 6 +-- web/pages/_app.tsx | 2 +- web/pages/access-tokens.tsx | 18 ++++---- web/pages/config-public-details.tsx | 4 +- web/pages/config-server-details.tsx | 2 +- web/pages/config-social-items.tsx | 2 +- web/pages/config-storage.tsx | 2 +- web/pages/config-video.tsx | 4 +- web/pages/help.tsx | 9 ++-- web/pages/upgrade.tsx | 41 +++++++++--------- web/pages/viewer-info.tsx | 1 + web/pages/webhooks.tsx | 29 +++++-------- web/styles/ant-overrides.scss | 46 ++++++++++++++++++--- web/styles/config.scss | 29 ------------- web/styles/form-misc-elements.scss | 5 +-- web/styles/globals.scss | 24 ++++------- web/styles/main-layout.scss | 2 +- web/styles/pages.scss | 13 ++++++ web/styles/variables.scss | 2 - 19 files changed, 116 insertions(+), 125 deletions(-) delete mode 100644 web/styles/config.scss create mode 100644 web/styles/pages.scss diff --git a/web/components/config/edit-page-content.tsx b/web/components/config/edit-page-content.tsx index ee12a403d..0f07b45cf 100644 --- a/web/components/config/edit-page-content.tsx +++ b/web/components/config/edit-page-content.tsx @@ -104,13 +104,13 @@ export default function EditPageContent() { markdownClass: 'markdown-editor-pane', }} /> - +
- {hasChanged ? ( + {hasChanged && ( - ) : null} + )}
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index 06c93ac67..fad9a31e8 100644 --- a/web/pages/_app.tsx +++ b/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'; diff --git a/web/pages/access-tokens.tsx b/web/pages/access-tokens.tsx index f259ea50c..ffcba58bc 100644 --- a/web/pages/access-tokens.tsx +++ b/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.

- + +

+ +

); } @@ -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) { diff --git a/web/pages/config-public-details.tsx b/web/pages/config-public-details.tsx index 0798871b8..f6b6896e1 100644 --- a/web/pages/config-public-details.tsx +++ b/web/pages/config-public-details.tsx @@ -11,9 +11,7 @@ const { Title } = Typography; export default function PublicFacingDetails() { return (
- - General Settings - + General Settings

The following are displayed on your site to describe your stream and its content.{' '} Learn more. diff --git a/web/pages/config-server-details.tsx b/web/pages/config-server-details.tsx index b9c9008d6..7592a8c3a 100644 --- a/web/pages/config-server-details.tsx +++ b/web/pages/config-server-details.tsx @@ -7,7 +7,7 @@ const { Title } = Typography; export default function ConfigServerDetails() { return (

- + <Title> Server Settings

diff --git a/web/pages/config-social-items.tsx b/web/pages/config-social-items.tsx index c7ae8f9c8..12dd692ff 100644 --- a/web/pages/config-social-items.tsx +++ b/web/pages/config-social-items.tsx @@ -7,7 +7,7 @@ const { Title } = Typography; export default function ConfigSocialThings() { return (

- Social Items + Social Items
diff --git a/web/pages/config-storage.tsx b/web/pages/config-storage.tsx index e0f4a4e39..8d5a7c2f3 100644 --- a/web/pages/config-storage.tsx +++ b/web/pages/config-storage.tsx @@ -7,7 +7,7 @@ const { Title } = Typography; export default function ConfigStorageInfo() { return ( <> - + <Title> Storage

diff --git a/web/pages/config-video.tsx b/web/pages/config-video.tsx index ec1fe6b32..d5a9eba62 100644 --- a/web/pages/config-video.tsx +++ b/web/pages/config-video.tsx @@ -9,9 +9,7 @@ const { Title } = Typography; export default function ConfigVideoSettings() { return (

- - Video configuration - + Video configuration

Before changing your video configuration{' '} visit the video documentation to learn diff --git a/web/pages/help.tsx b/web/pages/help.tsx index 0affc08ed..c4e504678 100644 --- a/web/pages/help.tsx +++ b/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: , @@ -144,7 +143,7 @@ export default function Help(props: Props) { ]; return ( -

+
How can we help you? diff --git a/web/pages/upgrade.tsx b/web/pages/upgrade.tsx index a0e7e2c32..dfe46afae 100644 --- a/web/pages/upgrade.tsx +++ b/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) => - {text}, + title: 'Name', + dataIndex: 'name', + key: 'name', + render: (text, entry) => {text}, }, { - 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 + return
; } - 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() { {release.name}{new Date(release.created_at).toDateString()} - {release.body}

Downloads

+ {release.body} +

Downloads

); } - diff --git a/web/pages/viewer-info.tsx b/web/pages/viewer-info.tsx index 5a3ece0e5..b54b08f47 100644 --- a/web/pages/viewer-info.tsx +++ b/web/pages/viewer-info.tsx @@ -114,6 +114,7 @@ export default function ViewersOverTime() { prefix={} /> + {online &&
row.clientID} />} diff --git a/web/pages/webhooks.tsx b/web/pages/webhooks.tsx index a232bef90..546152768 100644 --- a/web/pages/webhooks.tsx +++ b/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) {

Select the events that will be sent to this webhook.

- + +

+ +

); } diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss index 7872130ff..5ccaeae08 100644 --- a/web/styles/ant-overrides.scss +++ b/web/styles/ant-overrides.scss @@ -36,25 +36,36 @@ 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); -} -.ant-typography h2, -h2.ant-typography{ + font-size: 1.75em; color: var(--pink); } +.ant-typography h2, +h2.ant-typography { + font-size: 1.5em; +} + +.ant-typography h3, +h3.ant-typography { + font-size: 1.25em; +} + .ant-progress-text, @@ -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; } } -} \ No newline at end of file +} + + +// ANT CHECKBOX +.ant-checkbox-wrapper { + color: var(--white-75); + margin: .5em 0; +} +.ant-checkbox-group { + .ant-checkbox-group-item { + display: block; + } +} diff --git a/web/styles/config.scss b/web/styles/config.scss deleted file mode 100644 index e27398dc7..000000000 --- a/web/styles/config.scss +++ /dev/null @@ -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; -} diff --git a/web/styles/form-misc-elements.scss b/web/styles/form-misc-elements.scss index a038a336b..6ccd49ad5 100644 --- a/web/styles/form-misc-elements.scss +++ b/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); diff --git a/web/styles/globals.scss b/web/styles/globals.scss index 6480495fe..6601a0b14 100644 --- a/web/styles/globals.scss +++ b/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; diff --git a/web/styles/main-layout.scss b/web/styles/main-layout.scss index f3514a488..d36045c44 100644 --- a/web/styles/main-layout.scss +++ b/web/styles/main-layout.scss @@ -50,7 +50,7 @@ .main-content-container { - padding: 3em; + padding: 2em 3em 3em; } .footer-container { diff --git a/web/styles/pages.scss b/web/styles/pages.scss new file mode 100644 index 000000000..6481f0458 --- /dev/null +++ b/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%; + } + } +} diff --git a/web/styles/variables.scss b/web/styles/variables.scss index 16b9b0beb..78114fa0b 100644 --- a/web/styles/variables.scss +++ b/web/styles/variables.scss @@ -1,5 +1,3 @@ -// rename to variables.scss - :root { // colors --white: rgba(255,255,255,1);