Update footer

web/components/ui/Content/Content.tsx

@@ -110,67 +110,68 @@ export default function ContentComponent() {
   });
 
   return (
-    <Content className={rootClassName}>
-      <div className={s.leftContent}>
-        <Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
+    <div>
+      <Content className={rootClassName}>
+        <div className={s.leftContent}>
+          <Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
 
-        <div className={s.topSection}>
-          {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
-          {!online && (
-            <OfflineBanner
-              name={name}
-              text={
-                offlineMessage || 'Please follow and ask to get notified when the stream is live.'
-              }
+          <div className={s.topSection}>
+            {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
+            {!online && (
+              <OfflineBanner
+                name={name}
+                text={
+                  offlineMessage || 'Please follow and ask to get notified when the stream is live.'
+                }
+              />
+            )}
+            <StatusBar
+              online={online}
+              lastConnectTime={lastConnectTime}
+              lastDisconnectTime={lastDisconnectTime}
+              viewerCount={viewerCount}
             />
-          )}
-          <StatusBar
-            online={online}
-            lastConnectTime={lastConnectTime}
-            lastDisconnectTime={lastDisconnectTime}
-            viewerCount={viewerCount}
-          />
-        </div>
-        <div className={s.midSection}>
-          <div className={s.buttonsLogoTitleSection}>
-            <ActionButtonRow>
-              {externalActionButtons}
-              <FollowButton size="small" />
-              <NotifyReminderPopup
-                visible={showNotifyReminder}
-                notificationClicked={() => setShowNotifyPopup(true)}
-                notificationClosed={() => disableNotifyReminderPopup()}
-              >
-                <NotifyButton onClick={() => setShowNotifyPopup(true)} />
-              </NotifyReminderPopup>
-            </ActionButtonRow>
+          </div>
+          <div className={s.midSection}>
+            <div className={s.buttonsLogoTitleSection}>
+              <ActionButtonRow>
+                {externalActionButtons}
+                <FollowButton size="small" />
+                <NotifyReminderPopup
+                  visible={showNotifyReminder}
+                  notificationClicked={() => setShowNotifyPopup(true)}
+                  notificationClosed={() => disableNotifyReminderPopup()}
+                >
+                  <NotifyButton onClick={() => setShowNotifyPopup(true)} />
+                </NotifyReminderPopup>
+              </ActionButtonRow>
 
-            <Modal
-              title="Notify"
-              visible={showNotifyPopup}
-              afterClose={() => disableNotifyReminderPopup()}
-              handleCancel={() => disableNotifyReminderPopup()}
-            >
-              <BrowserNotifyModal />
-            </Modal>
+              <Modal
+                title="Notify"
+                visible={showNotifyPopup}
+                afterClose={() => disableNotifyReminderPopup()}
+                handleCancel={() => disableNotifyReminderPopup()}
+              >
+                <BrowserNotifyModal />
+              </Modal>
+            </div>
+          </div>
+          <div className={s.lowerHalf}>
+            <ContentHeader
+              name={name}
+              title={streamTitle}
+              summary={summary}
+              tags={tags}
+              links={socialHandles}
+              logo="/logo"
+            />
           </div>
-        </div>
-        <div className={s.lowerHalf}>
-          <ContentHeader
-            name={name}
-            title={streamTitle}
-            summary={summary}
-            tags={tags}
-            links={socialHandles}
-            logo="/logo"
-          />
-        </div>
 
-        <div className={s.lowerSection}>
-          <Tabs defaultActiveKey="0" style={{ height: '100%' }}>
-            {isChatVisible && isMobile && (
-              <TabPane tab="Chat" key="0" style={{ height: '100%' }}>
-                {/* <div style={{ position: 'relative', height: '100%' }}>
+          <div className={s.lowerSection}>
+            <Tabs defaultActiveKey="0" style={{ height: '100%' }}>
+              {isChatVisible && isMobile && (
+                <TabPane tab="Chat" key="0" style={{ height: '100%' }}>
+                  {/* <div style={{ position: 'relative', height: '100%' }}>
                   <div className={s.mobileChat}>
                     <ChatContainer
                       messages={messages}
@@ -181,19 +182,20 @@ export default function ContentComponent() {
                     />
                   </div>
                 </div> */}
+                </TabPane>
+              )}
+              <TabPane tab="About" key="2" className={s.pageContentSection}>
+                <CustomPageContent content={extraPageContent} />
               </TabPane>
-            )}
-            <TabPane tab="About" key="2" className={s.pageContentSection}>
-              <CustomPageContent content={extraPageContent} />
-            </TabPane>
-            <TabPane tab="Followers" key="3" className={s.pageContentSection}>
-              <FollowerCollection />
-            </TabPane>
-          </Tabs>
-          {!isMobile && <Footer version={version} />}
+              <TabPane tab="Followers" key="3" className={s.pageContentSection}>
+                <FollowerCollection />
+              </TabPane>
+            </Tabs>
+          </div>
         </div>
-      </div>
-      {isChatVisible && !isMobile && <Sidebar />}
-    </Content>
+        {isChatVisible && !isMobile && <Sidebar />}
+      </Content>
+      {!isMobile && <Footer version={version} />}
+    </div>
   );
 }

web/components/ui/Footer/Footer.module.scss

@@ -1,7 +1,32 @@
 .footer {
-  font-size: 0.85em;
-  font-weight: 500;
-  color: var(--theme-color-palette-1);
-  background-color: transparent;
-  padding: var(--content-padding);
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  background-color: var(--theme-color-background-header);
+  width: 100%;
+  color: var(--theme-color-components-text-on-dark);
+  font-family: var(--theme-text-body-font-family);
+
+  padding: 0.6em;
+  font-size: 0.8rem;
+  font-weight: 600;
+  opacity: 0.7;
+  border-top: 1px solid rgba(214, 211, 211, 0.5);
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+
+  a {
+    color: var(--theme-text-secondary);
+  }
+
+  .links {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    .item {
+      margin-left: 1.2em;
+    }
+  }
 }

web/components/ui/Footer/Footer.tsx

@@ -1,8 +1,5 @@
-import { Layout } from 'antd';
 import s from './Footer.module.scss';
 
-const { Footer } = Layout;
-
 interface Props {
   version: string;
 }
@@ -11,8 +8,27 @@ export default function FooterComponent(props: Props) {
   const { version } = props;
 
   return (
-    <Footer className={s.footer}>
-      <a href="https://owncast.online">{version}</a>
-    </Footer>
+    <div className={s.footer}>
+      <div className={s.text}>
+        Powered by <a href="https://owncast.online">{version}</a>
+      </div>
+      <div className={s.links}>
+        <div className={s.item}>
+          <a href="https://owncast.online/docs" target="_blank" rel="noreferrer">
+            Documentation
+          </a>
+        </div>
+        <div className={s.item}>
+          <a href="https://owncast.online/help" target="_blank" rel="noreferrer">
+            Contribute
+          </a>
+        </div>
+        <div className={s.item}>
+          <a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
+            Source
+          </a>
+        </div>
+      </div>
+    </div>
   );
 }