LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

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

Browse Source
This commit is contained in:
Gabe Kangas 2022-05-26 22:23:43 -07:00
parent da0a2f5f5d
commit db184c74dd
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
9 changed files with 37 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/ui/Content/Content.tsx
View File

@ -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>

2
web/components/ui/OfflineBanner/OfflineBanner.tsx
View File

@ -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>

2
web/components/ui/Statusbar/Statusbar.module.scss
View File

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

7
web/pages/_app.tsx
View File

@ -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/markdown-editor.scss';
// import '../styles/ant-overrides.scss';
// import '../styles/markdown-editor.scss';
import '../styles/main-layout.scss';

4
web/style-definitions/tokens/color/antd-overrides.yaml
View File

@ -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:

2
web/style-definitions/tokens/color/default-theme.yaml
View File

@ -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}'

4
web/style-definitions/tokens/color/owncast-colors.yaml
View File

@ -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:

17
web/styles/theme.less
View File

@ -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-secondary: #16151f; // A secondary background color used in sections and controls.
@theme-background: #202232; // The main background color of the page.
@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-secondary: #16151f;
@color-owncast-background: #202232;
@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;

17
web/styles/variables.css
View File

@ -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-secondary: #16151f; /* A secondary background color used in sections and controls. */
--theme-background: #202232; /* The main background color of the page. */
--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-secondary: #16151f;
--color-owncast-background: #202232;
--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;
}