Update components to use the new style/color names

web/components/ui/Content/Content.module.scss

@@ -1,9 +1,9 @@
 .root {
   display: grid;
   grid-template-columns: 1fr auto;
+  padding: 0.7em;
 }
 
-
 .leftCol {
   display: flex;
   flex-direction: column;

web/components/ui/Content/Content.tsx

@@ -16,7 +16,7 @@ import {
   isMobileAtom,
 } from '../../stores/ClientConfigStore';
 import { ClientConfig } from '../../../interfaces/client-config.model';
-import CustomPageContent from '../../CustomPageContent';
+import CustomPageContent from '../CustomPageContent/CustomPageContent';
 import OwncastPlayer from '../../video/OwncastPlayer';
 import FollowerCollection from '../../FollowersCollection';
 import s from './Content.module.scss';
@@ -152,12 +152,7 @@ export default function ContentComponent() {
         <div className={s.lowerHalf}>
           <Tabs defaultActiveKey="0" style={{ height: '100%' }}>
             {isChatVisible && isMobile && (
-              <TabPane
-                tab="Chat"
-                key="0"
-                className={s.pageContentSection}
-                style={{ height: '100%' }}
-              >
+              <TabPane tab="Chat" key="0" style={{ height: '100%' }}>
                 <div style={{ position: 'relative', height: '100%' }}>
                   <div className={s.mobileChat}>
                     <ChatContainer

web/components/ui/CustomPageContent/CustomPageContent.module.scss

@@ -0,0 +1,20 @@
+.customPageContent {
+  font-size: 16px;
+  line-height: 1.5em;
+  margin: 0;
+  padding: 0;
+
+  color: var(--theme-text);
+  background-color: var(--theme-background-secondary);
+  padding: 0.175em 1em;
+
+  hr {
+    margin: 1.35em 0;
+    border: 0;
+    border-top: solid 1px var(--theme-text-secondary);
+  }
+
+  div.summary {
+    font-size: 18px;
+  }
+}

web/components/ui/CustomPageContent/CustomPageContent.tsx

@@ -0,0 +1,11 @@
+import s from './CustomPageContent.module.scss';
+
+interface Props {
+  content: string;
+}
+
+export default function CustomPageContent(props: Props) {
+  const { content } = props;
+  // eslint-disable-next-line react/no-danger
+  return <div className={s.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />;
+}

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

@@ -0,0 +1,5 @@
+.footer {
+  font-size: 0.85em;
+  font-weight: 500;
+  color: var(--theme-text-secondary);
+}

web/components/ui/Footer/Footer.tsx

@@ -1,4 +1,5 @@
 import { Layout } from 'antd';
+import s from './Footer.module.scss';
 
 const { Footer } = Layout;
 
@@ -10,7 +11,7 @@ export default function FooterComponent(props: Props) {
   const { version } = props;
 
   return (
-    <Footer style={{ textAlign: 'center', height: '64px' }}>
+    <Footer className={s.footer}>
       <a href="https://owncast.online">{version}</a>
     </Footer>
   );