Use some style values so it looks like this page is making progress

web/components/action-buttons/ExternalActionButtonRow.tsx

@@ -1,5 +1,6 @@
 import { ExternalAction } from '../interfaces/external-action.interface';
 import ExternalActionButton from './ExternalActionButton';
+import s from './ExternalActionButtons.module.scss';
 
 interface Props {
   actions: ExternalAction[];
@@ -9,7 +10,7 @@ export default function ExternalActionButtonRow(props: Props) {
   const { actions } = props;
 
   return (
-    <div>
+    <div className={`${s.row}`}>
       {actions.map(action => (
         <ExternalActionButton key={action.id} action={action} />
       ))}

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

@@ -23,6 +23,14 @@
     grid-template-rows: 1fr var(--header-h);
 }
 
+.pageContentSection {
+  background-color: var(--theme-background-secondary);
+  border-radius: var(--theme-rounded-corners);
+  margin: 1vw;
+  padding: 1vw;
+  width: 100%;
+}
+
 @media (min-width: 768px) {
     .mobileChat {
         display: none;

web/components/ui/Content/Content.tsx

@@ -54,13 +54,14 @@ export default function FooterComponent() {
         />
         <div className={`${s.lowerRow}`}>
           <Tabs defaultActiveKey="1" type="card">
-            <TabPane tab="About" key="1">
+            <TabPane tab="About" key="1" className={`${s.pageContentSection}`}>
               <CustomPageContent content={extraPageContent} />
             </TabPane>
-            <TabPane tab="Followers" key="2">
+            <TabPane tab="Followers" key="2" className={`${s.pageContentSection}`}>
               <FollowerCollection total={total} followers={followers} />
             </TabPane>
           </Tabs>
+
           {chatOpen && (
             <div className={`${s.mobileChat}`}>
               <ChatContainer messages={messages} state={chatState} />

web/components/ui/Sidebar/Sidebar.module.scss

@@ -1,5 +1,5 @@
 .root {
-  background-color: var(--gray-700);
+  background-color: var(--theme-background-secondary);
   display: none;
 }
 

web/components/video/Player.module.scss

@@ -0,0 +1,5 @@
+.player {
+  height: 90vh;
+  width: 100%;
+  background-color: green;
+}

web/components/video/player.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import videojs from 'video.js';
+import s from './Player.module.scss';
 
 require('video.js/dist/video-js.css');
 
@@ -47,11 +48,7 @@ export function VideoJS(props) {
 
   return (
     <div data-vjs-player>
-      <video
-        ref={videoRef}
-        className="video-js vjs-big-play-centered"
-        style={{ width: '100%', height: '100%' }}
-      />
+      <video ref={videoRef} className={`video-js vjs-big-play-centered ${s.player}`} />
     </div>
   );
 }

web/pages/_app.tsx

@@ -2,7 +2,7 @@
 import '../styles/variables.css';
 import '../styles/global.less';
 import '../styles/globals.scss';
-// import '../styles/ant-overrides.scss';
+import '../styles/ant-overrides.scss';
 import '../styles/markdown-editor.scss';
 
 import '../styles/main-layout.scss';

web/style-definitions/tokens/color/antd-overrides.yaml

@@ -11,7 +11,7 @@ link-color:
 popover-background:
   value: "var(--theme-background)"
 background-color-light:
-  value: "{color.owncast.purple.100.value}"
+  value: "var(--theme-background-secondary)"
 
 # These values require explicit colors and cannot take css variables.
 primary-color: 

web/style-definitions/tokens/color/default-theme.yaml

@@ -1,16 +1,31 @@
 # These are the variables used in the user interface.
 # They can be overwritten to customize the look and feel.
 # We should write some documentation on how to do that when the time comes.
+# The fewer there are the better as it'll be easier to customize and document.
 
 theme:
   primary-color:
     value: "{color.owncast.purple.500.value}"
+    comment: "The primary color of the application used for rendering controls."
   text-color:
     value: "{color.owncast.gray.300.value}"
+    comment: "The color of the text in the application."
   text-color-secondary:
     value: "{color.owncast.gray.500.value}"
   link-color:
     value: "{color.owncast.purple.500.value}"
+  font-family:
+    value: "{font.owncast.family.value}"
+  background:
+    value: "{color.owncast.background.value}"
+    comment: "The main background color of the page."
+  background-secondary:
+    value: "{color.owncast.background-secondary.value}"
+    comment: "A secondary background color used in sections and controls."
+  rounded-corners:
+    value: "5px"
+    comment: "The radius of rounded corners."
+
   success-color:
     value: "{color.owncast.green.500.value}"
   info-color:
@@ -18,9 +33,4 @@ theme:
   warning-color:
     value: "{color.owncast.orange.500.value}"
   error-color:
-    value: "{color.owncast.red.500.value}"
-  font-family:
-    value: "{font.owncast.family.value}"
-  background:
-    value: "{color.owncast.background.value}"
-  
+    value: "{color.owncast.red.500.value}"

web/style-definitions/tokens/color/owncast-colors.yaml

@@ -70,22 +70,22 @@ color:
       blue:
         value: "rgba(32, 134, 225, 1)"
 
-    background-light:
-      value: "rgba(27, 26, 38, 1)"
     background:
-      value: "rgba(23, 21, 35, 1)"
+      value: "rgba(27, 26, 38, 1)"
+    background-secondary:
+      value: "rgba(22, 21, 31, 1)"
       
 font:
   owncast:      
     family:
       value: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
         'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol', 'Noto Color Emoji';"
+        'Segoe UI Symbol', 'Noto Color Emoji'"
 
 # Values used in the admin and should be migrated to variables or removed.
 # See ant-overrides.scss.
 owncast-purple:
-  value: "{color.owncast.logo.purple}"
+  value: "{color.owncast.logo.purple.value}"
 owncast-purple-25: 
   value: "rgba(120, 113, 255, 0.25)"
 owncast-purple-50:
@@ -95,18 +95,18 @@ online-color:
 offline-color:
   value: "#999"
 pink:
-  value: "{color.owncast.logo.pink}"
+  value: "{color.owncast.logo.pink.value}"
 purple:
-  value: "{color.owncast.logo.purple}"
+  value: "{color.owncast.purple.500.value}"
 blue:
-  value: "{color.owncast.logo.blue}"
+  value: "{color.owncast.logo.blue.value}"
 white-88:
-  value: "{color.owncast.gray.500}"
+  value: "{color.owncast.gray.500.value}"
 purple-dark:
-  value: "rgba(28, 26, 59, 1)"
+  value: "{color.owncast.purple.900.value}"
 default-link-color:
-  value: "{color.owncast.logo.pink}"
+  value: "{color.owncast.purple.700.value}"
 default-bg-color:
-  value: "black"
+  value: "{color.owncast.background.value}"
 default-text-color:
-  value: "rgba(255, 255, 255, 0.88)"
+  value: "{color.owncast.gray.100.value}"

web/styles/ant-overrides.scss

@@ -52,14 +52,14 @@ h5.ant-typography,
   }
 }
 
-.ant-typography h1,
-h1.ant-typography {
-  font-size: 1.75em;
-  color: var(--pink);
-  &:first-of-type {
-    margin-top: 0;
-  }
-}
+// .ant-typography h1,
+// h1.ant-typography {
+//   font-size: 1.75em;
+//   color: var(--pink);
+//   &:first-of-type {
+//     margin-top: 0;
+//   }
+// }
 .ant-typography h2,
 h2.ant-typography {
   font-size: 1.5em;

web/styles/globals.scss

@@ -2,7 +2,7 @@
 
 :root {
   // chat variables
-  --header-h: 64px;
+  // --header-h: 64px;
   --chat-w: 300px;
   --chat-input-h: 40.5px;
   }

web/styles/theme.less

@@ -1,12 +1,12 @@
 
 // Do not edit directly
-// Generated on Sat, 07 May 2022 06:21:28 GMT
+// Generated on Sat, 07 May 2022 17:24:18 GMT
 
 @text-color: var(--theme-text-color);
 @text-color-secondry: var(--theme-text-color-secondary);
 @link-color: var(--theme-link-color);
 @popover-background: var(--theme-background);
-@background-color-light: #f4ebff;
+@background-color-light: var(--theme-background-secondary);
 @primary-color: #9e77ed;
 @info-color: #667085;
 @success-color: #12b76a;
@@ -16,16 +16,18 @@
 @green-base: #12b76a;
 @red-base: #f04438;
 @orange-base: #f79009;
-@theme-primary-color: #9e77ed;
-@theme-text-color: #d0d5dd;
+@theme-primary-color: #9e77ed; // The primary color of the application used for rendering controls.
+@theme-text-color: #d0d5dd; // The color of the text in the application.
 @theme-text-color-secondary: #667085;
 @theme-link-color: #9e77ed;
+@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@theme-background: #1b1a26; // The main background color of the page.
+@theme-background-secondary: #16151f; // A secondary background color used in sections and controls.
+@theme-rounded-corners: 5px; // The radius of rounded corners.
 @theme-success-color: #12b76a;
 @theme-info-color: #d6bbfb;
 @theme-warning-color: #f79009;
 @theme-error-color: #f04438;
-@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';;
-@theme-background: #171523;
 @color-owncast-purple-100: #f4ebff;
 @color-owncast-purple-300: #d6bbfb;
 @color-owncast-purple-500: #9e77ed;
@@ -54,19 +56,19 @@
 @color-owncast-logo-purple: #7871ff;
 @color-owncast-logo-pink: #c98bfe;
 @color-owncast-logo-blue: #2086e1;
-@color-owncast-background-light: #1b1a26;
-@color-owncast-background: #171523;
-@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';;
+@color-owncast-background: #1b1a26;
+@color-owncast-background-secondary: #16151f;
+@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 @owncast-purple: #7871ff;
 @owncast-purple-25: rgba(120, 113, 255, 0.25);
 @owncast-purple-50: rgba(120, 113, 255, 0.5);
 @online-color: #73dd3f;
 @offline-color: #999;
 @pink: #c98bfe;
-@purple: #7871ff;
+@purple: #9e77ed;
 @blue: #2086e1;
 @white-88: #667085;
-@purple-dark: rgba(28, 26, 59, 1);
-@default-link-color: #c98bfe;
-@default-bg-color: black;
-@default-text-color: rgba(255, 255, 255, 0.88);
+@purple-dark: #42307d;
+@default-link-color: #6941c6;
+@default-bg-color: #1b1a26;
+@default-text-color: #f2f4f7;

web/styles/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 07 May 2022 06:21:28 GMT
+ * Generated on Sat, 07 May 2022 17:24:18 GMT
  */
 
 :root {
@@ -8,7 +8,7 @@
   --text-color-secondry: var(--theme-text-color-secondary);
   --link-color: var(--theme-link-color);
   --popover-background: var(--theme-background);
-  --background-color-light: #f4ebff;
+  --background-color-light: var(--theme-background-secondary);
   --primary-color: #9e77ed;
   --info-color: #667085;
   --success-color: #12b76a;
@@ -18,18 +18,18 @@
   --green-base: #12b76a;
   --red-base: #f04438;
   --orange-base: #f79009;
-  --theme-primary-color: #9e77ed;
-  --theme-text-color: #d0d5dd;
+  --theme-primary-color: #9e77ed; /* The primary color of the application used for rendering controls. */
+  --theme-text-color: #d0d5dd; /* The color of the text in the application. */
   --theme-text-color-secondary: #667085;
   --theme-link-color: #9e77ed;
+  --theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --theme-background: #1b1a26; /* The main background color of the page. */
+  --theme-background-secondary: #16151f; /* A secondary background color used in sections and controls. */
+  --theme-rounded-corners: 5px; /* The radius of rounded corners. */
   --theme-success-color: #12b76a;
   --theme-info-color: #d6bbfb;
   --theme-warning-color: #f79009;
   --theme-error-color: #f04438;
-  --theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
-  --theme-background: #171523;
   --color-owncast-purple-100: #f4ebff;
   --color-owncast-purple-300: #d6bbfb;
   --color-owncast-purple-500: #9e77ed;
@@ -58,22 +58,20 @@
   --color-owncast-logo-purple: #7871ff;
   --color-owncast-logo-pink: #c98bfe;
   --color-owncast-logo-blue: #2086e1;
-  --color-owncast-background-light: #1b1a26;
-  --color-owncast-background: #171523;
-  --font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+  --color-owncast-background: #1b1a26;
+  --color-owncast-background-secondary: #16151f;
+  --font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --owncast-purple: #7871ff;
   --owncast-purple-25: rgba(120, 113, 255, 0.25);
   --owncast-purple-50: rgba(120, 113, 255, 0.5);
   --online-color: #73dd3f;
   --offline-color: #999;
   --pink: #c98bfe;
-  --purple: #7871ff;
+  --purple: #9e77ed;
   --blue: #2086e1;
   --white-88: #667085;
-  --purple-dark: rgba(28, 26, 59, 1);
-  --default-link-color: #c98bfe;
-  --default-bg-color: black;
-  --default-text-color: rgba(255, 255, 255, 0.88);
+  --purple-dark: #42307d;
+  --default-link-color: #6941c6;
+  --default-bg-color: #1b1a26;
+  --default-text-color: #f2f4f7;
 }