Update footer

web/components/ui/Content/Content.tsx

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

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

@@ -1,7 +1,32 @@
 .footer {
-  font-size: 0.85em;
+  display: flex;
-  font-weight: 500;
+  justify-content: space-between;
-  color: var(--theme-color-palette-1);
+  flex-direction: row;
-  background-color: transparent;
+  background-color: var(--theme-color-background-header);
-  padding: var(--content-padding);
+  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}>
+    <div className={s.footer}>
-      <a href="https://owncast.online">{version}</a>
+      <div className={s.text}>
-    </Footer>
+        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>
   );
 }