From 14c6b3bed27777c3a913b5dc8ec2c88e837b5a9b Mon Sep 17 00:00:00 2001
From: Thilo Billerbeck <thilo.billerbeck@officerent.de>
Date: Tue, 29 Dec 2020 17:59:30 +0100
Subject: [PATCH] updated layout

---
 web/pages/help.tsx | 72 +++++++++++++++++++++++++++++++++-------------
 1 file changed, 52 insertions(+), 20 deletions(-)

diff --git a/web/pages/help.tsx b/web/pages/help.tsx
index ba8b21f7f..0d7344493 100644
--- a/web/pages/help.tsx
+++ b/web/pages/help.tsx
@@ -2,6 +2,10 @@ import { Button, Card, Col, Divider, Row } from 'antd'
 import Meta from 'antd/lib/card/Meta'
 import Title from 'antd/lib/typography/Title'
 import {
+    AlertOutlined,
+    AlertTwoTone,
+    ApiTwoTone,
+    BookOutlined,
     BugTwoTone,
     CameraTwoTone,
     DatabaseTwoTone,
@@ -10,68 +14,71 @@ import {
     FireFilled,
     FireOutlined,
     Html5TwoTone,
+    LinkOutlined,
     QuestionCircleFilled,
+    QuestionCircleTwoTone,
     SettingTwoTone,
     SlidersTwoTone,
     VideoCameraTwoTone
 } from '@ant-design/icons';
 import React from 'react'
+import Text from 'antd/lib/typography/Text';
 
 interface Props { }
 
 export default function Help(props: Props) {
     const questions = [
         {
-            icon: <SettingTwoTone />,
+            icon: <SettingTwoTone style={{ fontSize: '24px' }} />,
             title: "I want to configure my owncast instance",
             content: (
                 <div>
-                    <a href="https://owncast.online/docs/configuration/"  target="_blank" rel="noopener noreferrer">Learn more</a>
+                    <a href="https://owncast.online/docs/configuration/"  target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
                 </div>
             )
         },
         {
-            icon: <CameraTwoTone />,
+            icon: <CameraTwoTone style={{ fontSize: '24px' }} />,
             title: "I need help configuring my broadcasting software",
             content: (
                 <div>
-                    <a href="https://owncast.online/docs/broadcasting/"  target="_blank" rel="noopener noreferrer">Learn more</a>
+                    <a href="https://owncast.online/docs/broadcasting/"  target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
                 </div>
             )
         },
         {
-            icon: <Html5TwoTone />,
+            icon: <Html5TwoTone style={{ fontSize: '24px' }} />,
             title: "I want to embed my stream into another site",
             content: (
                 <div>
-                    <a href="https://owncast.online/docs/embed/"  target="_blank" rel="noopener noreferrer">Learn more</a>
+                    <a href="https://owncast.online/docs/embed/"  target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
                 </div>
             )
         },
         {
-            icon: <EditTwoTone />,
+            icon: <EditTwoTone style={{ fontSize: '24px' }} />,
             title: "I want to customize my website",
             content: (
                 <div>
-                    <a href="https://owncast.online/docs/website/"  target="_blank" rel="noopener noreferrer">Learn more</a>
+                    <a href="https://owncast.online/docs/website/"  target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
                 </div>
             )
         },
         {
-            icon: <SlidersTwoTone />,
+            icon: <SlidersTwoTone style={{ fontSize: '24px' }} />,
             title: "I want to tweak my encoding",
             content: (
                 <div>
-                    <a href="https://owncast.online/docs/encoding/"  target="_blank" rel="noopener noreferrer">Learn more</a>
+                    <a href="https://owncast.online/docs/encoding/"  target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
                 </div>
             )
         },
         {
-            icon: <DatabaseTwoTone />,
+            icon: <DatabaseTwoTone style={{ fontSize: '24px' }} />,
             title: "I want to offload my video to an external storage provider",
             content: (
                 <div>
-                    <a href="https://owncast.online/docs/encoding/"  target="_blank" rel="noopener noreferrer">Learn more</a>
+                    <a href="https://owncast.online/docs/encoding/"  target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
                 </div>
             )
         },
@@ -79,7 +86,7 @@ export default function Help(props: Props) {
 
     const otherResources = [
         {
-            icon: <BugTwoTone />,
+            icon: <BugTwoTone style={{ fontSize: '24px' }}  />,
             title: "I found a bug",
             content: (
                 <div>
@@ -87,20 +94,45 @@ export default function Help(props: Props) {
                     <a href="https://owncast.online/docs/encoding/" target="_blank" rel="noopener noreferrer"> Github Issues</a>
                 </div>
             )
+        },
+        {
+            icon: <QuestionCircleTwoTone style={{ fontSize: '24px' }}  />,
+            title: "I have a general question",
+            content: (
+                <div>
+                    Most general questions are answered in our 
+                    <a href="https://owncast.online/docs/encoding/" target="_blank" rel="noopener noreferrer"> FAQ</a>
+                </div>
+            )
+        },
+        {
+            icon: <ApiTwoTone style={{ fontSize: '24px' }}  />,
+            title: "I want to use the API",
+            content: (
+                <div>
+                    You can view the API documentation for either the 
+                    <a href="https://owncast.online/api/latest" target="_blank" rel="noopener noreferrer"> latest</a>
+                    or 
+                    <a href="https://owncast.online/api/development" target="_blank" rel="noopener noreferrer"> development</a>
+                    release.
+                </div>
+            )
         }
     ]
 
     return (
         <div>
-            <Title>How can we help you?</Title>
+            <Title style={{textAlign: 'center'}}>How can we help you?</Title>
             <Row gutter={[16, 16]} justify="space-around" align="middle">
-                <Col span={12}>
-                    <Title level={2}>Having issues with owncast?</Title>
-                    <Button href="https://owncast.online/docs/troubleshooting/" icon={<FireFilled/>} type="primary">Try Troubleshooting</Button>
+                <Col span={12} style={{textAlign: 'center'}}>
+                    <AlertOutlined style={{ fontSize: '64px' }}/>
+                    <Title level={2}>Troubleshooting</Title>
+                    <Button href="https://owncast.online/docs/troubleshooting/" icon={<LinkOutlined/>} type="primary">Read Troubleshoting</Button>
                 </Col>
-                <Col span={12}>
-                    <Title level={2}>Having any questions about owncast?</Title>
-                    <Button href="https://owncast.online/docs/faq/" icon={<QuestionCircleFilled/>} type="primary">Read our FAQ</Button>
+                <Col span={12} style={{textAlign: 'center'}}>
+                    <BookOutlined style={{ fontSize: '64px' }}/>
+                    <Title level={2}>Documentation</Title>
+                    <Button href="https://owncast.online/docs/faq/" icon={<LinkOutlined/>} type="primary">Read the Docs</Button>
                 </Col>
             </Row>
             <Divider />