Update components to use the new style/color names

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -15,21 +15,13 @@
     }
   }
   .message {
-    color: var(--color-owncast-gray-300);
+    color: var(--theme-text-primary);
 
     mark {
-      color: white;
+      padding-left: 0.35em;
-      padding: 0.1em 0.4em;
+      padding-right: 0.35em;
-      border-radius: 0.5em 0.3em;
+      color: var(--theme-text-highlight);
-      background: transparent;
+      background-color: var(--color-bg-highlight);
-      background-image: linear-gradient(
-        to right,
-        rgba(255, 225, 0, 0.1),
-        rgba(255, 225, 0, 0.358) 4%,
-        rgba(255, 225, 0, 0.3)
-      );
-      -webkit-box-decoration-break: clone;
-      box-decoration-break: clone;
     }
   }
 
@@ -56,7 +48,7 @@
     .customBorder {
       left: auto;
       right: 0px;
-      opacity: .85;
+      opacity: 0.85;
       &:after {
         left: 0px;
       }

web/components/common/StreamInfo/StreamInfo.module.scss

@@ -8,12 +8,6 @@
   margin-right: 1.5vw;
 }
 
-.pageContentSection {
-  // background-color: var(--theme-background-secondary);
-  border-radius: var(--theme-rounded-corners);
-  width: 100%;
-}
-
 .logoTitleSection {
   display: flex;
   align-items: center;
@@ -30,8 +24,11 @@
   }
 
   .subtitle {
-    font-size: 1.6vw;
+    margin-top: 0.35em;
-    font-weight: bold;
+    font-size: 1.5em;
+    font-weight: 300;
+    color: var(--theme-text-secondary);
+    text-transform: uppercase;
   }
 }
 
@@ -39,7 +36,7 @@
   &.root {
     position: relative;
     display: flex;
-    padding: 0 .3rem;
+    padding: 0 0.3rem;
     align-items: center;
     justify-content: space-between;
     .mobileInfo {
@@ -61,17 +58,32 @@
       .liveStatus {
         display: flex;
         align-items: center;
-        margin-left: .5rem;
+        margin-left: 0.5rem;
-        font-size: .8rem;
+        font-size: 0.8rem;
         gap: 4px;
         .liveCircle {
           border-radius: 50%;
           background-color: red;
-          width: .5rem;
+          width: 0.5rem;
-          height: .5rem;
+          height: 0.5rem;
         }
       }
     }
   }
 }
 
+.tagList {
+  font-family: var(--theme-text-display-font-family);
+  color: var(--theme-text-secondary);
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: inline-block;
+    margin: 0 0.7em 0 0;
+    font-weight: 600;
+  }
+}

web/components/common/StreamInfo/StreamInfo.tsx

@@ -56,10 +56,12 @@ export default function StreamInfo({ isMobile }: Props) {
         <div className={s.titleSection}>
           <div className={s.title}>{name}</div>
           <div className={s.subtitle}>
-            {title}
+            {title || 'Stream title or server description goes here'}
             <CategoryIcon tags={tags} />
           </div>
-          <div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>
+          <div className={s.tagList}>
+            {tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}
+          </div>
           <SocialLinks links={socialHandles} />
         </div>
       </div>

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
+              <TabPane tab="Chat" key="0" style={{ height: '100%' }}>
-                tab="Chat"
-                key="0"
-                className={s.pageContentSection}
-                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

@@ -1,3 +1,5 @@
+import s from './CustomPageContent.module.scss';
+
 interface Props {
   content: string;
 }
@@ -5,5 +7,5 @@ interface Props {
 export default function CustomPageContent(props: Props) {
   const { content } = props;
   // eslint-disable-next-line react/no-danger
-  return <div dangerouslySetInnerHTML={{ __html: content }} />;
+  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>
   );

web/components/video/player.scss

@@ -1,20 +1,20 @@
 /* Change all text and icon colors in the player. */
 .vjs-owncast.video-js {
-  color: var(--primary-color);
+  color: var(--theme-unknown-2);
 }
 
 .vjs-owncast .vjs-big-play-button {
   z-index: 10;
-  border-color: var(--primary-color) !important;
+  border-color: var(--theme-unknown) !important;
   border-radius: var(--theme-rounded-corners) !important;
 }
 
 .vjs-owncast .vjs-control-bar {
-  background-color: var(--theme-background) !important;
+  background-color: var(--theme-unknown) !important;
 }
 
 .vjs-airplay .vjs-icon-placeholder::before {
-  content: url("./airplay.png");
+  content: url('./airplay.png');
 }
 
 .vjs-quality-selector .vjs-icon-placeholder {
@@ -23,5 +23,5 @@
   font-style: normal;
 }
 .vjs-quality-selector .vjs-icon-placeholder::before {
-  content: "\f110";
+  content: '\f110';
 }

web/stories/CustomPageContent.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-useless-escape */
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import CustomPageContent from '../components/CustomPageContent';
+import CustomPageContent from '../components/ui/CustomPageContent/CustomPageContent';
 
 export default {
   title: 'owncast/Components/Custom page content',

web/styles/globals.scss

@@ -7,7 +7,6 @@ body {
   font-size: 16px;
   line-height: 1.5em;
   margin: 0;
-  padding: 0;
 
   color: var(--theme-text-primary);
   background-color: var(--theme-background-primary);
@@ -20,8 +19,8 @@ body {
   h5,
   h6,
   p {
-    margin: 0.7em 0 0 0;
     padding: 0;
+    color: var(--theme-text-primary);
   }
 
   h1,