Comment out the old ant overrides and try to make colors match design

web/components/ui/Content/Content.tsx

@@ -88,13 +88,17 @@ export default function ContentComponent() {
         <div className={s.buttonsLogoTitleSection}>
           <ActionButtonRow>
             {externalActionButtons}
-            <Button icon={<HeartFilled />}>Follow</Button>
+            <Button type="primary" icon={<HeartFilled />}>
+              Follow
+            </Button>
             <NotifyReminderPopup
               visible
               notificationClicked={() => {}}
               notificationClosed={() => {}}
             >
-              <Button icon={<NotificationFilled />}>Notify</Button>
+              <Button type="primary" icon={<NotificationFilled />}>
+                Notify
+              </Button>
             </NotifyReminderPopup>
           </ActionButtonRow>
 

web/components/ui/OfflineBanner/OfflineBanner.tsx

@@ -21,7 +21,7 @@ export default function OfflineBanner({ name, text }: Props) {
         <div>{text}</div>
 
         <div className={s.footer}>
-          <Button onClick={handleShowNotificationModal}>
+          <Button type="primary" onClick={handleShowNotificationModal}>
             <NotificationFilled />
             Notify when Live
           </Button>

web/components/ui/Statusbar/Statusbar.module.scss

@@ -6,5 +6,5 @@
   justify-content: space-between;
   height: 30px;
   width: 100%;
-  background-color: black;
+  background-color: var(--theme-background-secondary);
 }

web/pages/_app.tsx

@@ -1,9 +1,12 @@
+// All these imports are almost exclusively for the Admin.
+// We should not be loading them for the main frontend UI.
+
 // order matters!
 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/markdown-editor.scss';
 
 import '../styles/main-layout.scss';
 

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

@@ -12,10 +12,12 @@ popover-background:
   value: '{color.owncast.purple.700.value}'
 background-color-light:
   value: 'var(--theme-background-secondary)'
+layout-body-background:
+  value: 'var(--theme-background)'
 
 # These values require explicit colors and cannot take css variables.
 primary-color:
-  value: '{color.owncast.purple.500.value}'
+  value: '{color.owncast.purple.700.value}'
 info-color:
   value: '{color.owncast.gray.500.value}'
 success-color:

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

@@ -5,7 +5,7 @@
 
 theme:
   primary-color:
-    value: '{color.owncast.purple.500.value}'
+    value: '{color.owncast.purple.700.value}'
     comment: 'The primary color of the application used for rendering controls.'
   text-color:
     value: '{color.owncast.gray.300.value}'

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

@@ -71,9 +71,9 @@ color:
         value: 'rgba(32, 134, 225, 1)'
 
     background:
-      value: 'rgba(27, 26, 38, 1)'
+      value: 'rgba(32, 34, 50, 1.0)'
     background-secondary:
-      value: 'rgba(22, 21, 31, 1)'
+      value: '#282A30'
 
 font:
   owncast:

web/styles/theme.less

@@ -1,13 +1,14 @@
 
 // Do not edit directly
-// Generated on Wed, 18 May 2022 00:35:52 GMT
+// Generated on Fri, 27 May 2022 05:16:28 GMT
 
 @text-color: var(--theme-text-color);
 @text-color-secondary: var(--theme-text-color-secondary);
 @link-color: var(--theme-link-color);
 @popover-background: #6941c6;
 @background-color-light: var(--theme-background-secondary);
-@primary-color: #9e77ed;
+@layout-body-background: var(--theme-background);
+@primary-color: #6941c6;
 @info-color: #667085;
 @success-color: #12b76a;
 @warning-color: #f79009;
@@ -16,13 +17,13 @@
 @green-base: #12b76a;
 @red-base: #f04438;
 @orange-base: #f79009;
-@theme-primary-color: #9e77ed; // The primary color of the application used for rendering controls.
+@theme-primary-color: #6941c6; // 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: #202232; // The main background color of the page.
-@theme-background-secondary: #16151f; // A secondary background color used in sections and controls.
+@theme-background-secondary: #282a30; // A secondary background color used in sections and controls.
 @theme-rounded-corners: 5px; // The radius of rounded corners used in places.
 @theme-success-color: #12b76a;
 @theme-info-color: #d6bbfb;
@@ -56,8 +57,8 @@
 @color-owncast-logo-purple: #7871ff;
 @color-owncast-logo-pink: #c98bfe;
 @color-owncast-logo-blue: #2086e1;
-@color-owncast-background: #1b1a26;
+@color-owncast-background: #202232;
-@color-owncast-background-secondary: #16151f;
+@color-owncast-background-secondary: #282a30;
 @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);
@@ -70,5 +71,5 @@
 @white-88: #667085;
 @purple-dark: #42307d;
 @default-link-color: #6941c6;
-@default-bg-color: #1b1a26;
+@default-bg-color: #202232;
 @default-text-color: #f2f4f7;

web/styles/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 May 2022 00:35:52 GMT
+ * Generated on Fri, 27 May 2022 05:16:28 GMT
  */
 
 :root {
@@ -9,7 +9,8 @@
   --link-color: var(--theme-link-color);
   --popover-background: #6941c6;
   --background-color-light: var(--theme-background-secondary);
-  --primary-color: #9e77ed;
+  --layout-body-background: var(--theme-background);
+  --primary-color: #6941c6;
   --info-color: #667085;
   --success-color: #12b76a;
   --warning-color: #f79009;
@@ -18,15 +19,15 @@
   --green-base: #12b76a;
   --red-base: #f04438;
   --orange-base: #f79009;
-  --theme-primary-color: #9e77ed; /* The primary color of the application used for rendering controls. */
+  --theme-primary-color: #6941c6; /* 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: #202232; /* The main background color of the page. */
-  --theme-background-secondary: #16151f; /* A secondary background color used in sections and controls. */
+  --theme-background-secondary: #282a30; /* A secondary background color used in sections and controls. */
   --theme-rounded-corners: 5px; /* The radius of rounded corners used in places. */
   --theme-success-color: #12b76a;
   --theme-info-color: #d6bbfb;
@@ -60,8 +61,8 @@
   --color-owncast-logo-purple: #7871ff;
   --color-owncast-logo-pink: #c98bfe;
   --color-owncast-logo-blue: #2086e1;
-  --color-owncast-background: #1b1a26;
+  --color-owncast-background: #202232;
-  --color-owncast-background-secondary: #16151f;
+  --color-owncast-background-secondary: #282a30;
   --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';
@@ -76,6 +77,6 @@
   --white-88: #667085;
   --purple-dark: #42307d;
   --default-link-color: #6941c6;
-  --default-bg-color: #1b1a26;
+  --default-bg-color: #202232;
   --default-text-color: #f2f4f7;
 }