Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

changed statusbar colors

Browse Source
This commit is contained in:
t1enne 2022-10-13 21:22:58 +02:00
parent ecfb4a4c53
commit 0ff49f1c32
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,5 +6,12 @@
height: 2rem; height: 2rem;
width: 100%; width: 100%;
padding: var(--content-padding); padding: var(--content-padding);
color: var(--theme-color-palette-5); color: var(--theme-color-components-text-on-light);
background-color: var(--component-background);
font-family: var(--theme-text-display-font-family);
font-weight: 600;
.right {
color: red;
}
} }

7
web/components/ui/Statusbar/Statusbar.tsx
View File

@ -1,7 +1,7 @@
import formatDistanceToNow from 'date-fns/formatDistanceToNow'; import formatDistanceToNow from 'date-fns/formatDistanceToNow';
import intervalToDuration from 'date-fns/intervalToDuration'; import intervalToDuration from 'date-fns/intervalToDuration';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { EyeOutlined } from '@ant-design/icons'; import { EyeFilled } from '@ant-design/icons';
import styles from './Statusbar.module.scss'; import styles from './Statusbar.module.scss';
export type StatusbarProps = { export type StatusbarProps = {
@ -45,9 +45,12 @@ export const Statusbar: FC<StatusbarProps> = ({
const duration = makeDurationString(new Date(lastConnectTime)); const duration = makeDurationString(new Date(lastConnectTime));
onlineMessage = online ? `Live for ${duration}` : 'Offline'; onlineMessage = online ? `Live for ${duration}` : 'Offline';
rightSideMessage = viewerCount > 0 && ( rightSideMessage = viewerCount > 0 && (
<div className={styles.right}>
<span> <span>
<EyeOutlined /> {viewerCount} <EyeFilled />
</span> </span>
<span>{` ${viewerCount}`}</span>
</div>
); );
} else if (!online) { } else if (!online) {
onlineMessage = 'Offline'; onlineMessage = 'Offline';