mirror of
https://github.com/cpvalente/ontime.git
synced 2026-09-03 21:39:08 +00:00
style: user feedback tweaks
This commit is contained in:
@@ -31,6 +31,10 @@
|
|||||||
grid-area: playback;
|
grid-area: playback;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
color: $gray-700;
|
color: $gray-700;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $ui-white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeNow {
|
.timeNow {
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { millisToString } from 'ontime-utils';
|
|||||||
|
|
||||||
import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
|
import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
|
||||||
import { useTimer } from '../../../common/hooks/useSocket';
|
import { useTimer } from '../../../common/hooks/useSocket';
|
||||||
|
import { cx } from '../../../common/utils/styleUtils';
|
||||||
import { formatTime } from '../../../common/utils/time';
|
import { formatTime } from '../../../common/utils/time';
|
||||||
|
|
||||||
import styles from './StatusBar.module.scss';
|
import styles from './StatusBar.module.scss';
|
||||||
@@ -58,7 +59,9 @@ export default function StatusBar(props: StatusBarProps) {
|
|||||||
const elapsedTime = millisToString(timer.elapsed);
|
const elapsedTime = millisToString(timer.elapsed);
|
||||||
|
|
||||||
const PlaybackIconComponent = useMemo(() => {
|
const PlaybackIconComponent = useMemo(() => {
|
||||||
return <PlaybackIcon state={playback} skipTooltip className={styles.playbackIcon} />;
|
const isPlaying = playback === Playback.Play || playback === Playback.Roll;
|
||||||
|
const classes = cx([styles.playbackIcon, isPlaying ? styles.active : null]);
|
||||||
|
return <PlaybackIcon state={playback} skipTooltip className={classes} />;
|
||||||
}, [playback]);
|
}, [playback]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user