fix: dark mode

This commit is contained in:
JohnMark Sill 2022-01-13 00:15:58 -06:00
parent b8cf5e4aed
commit 26c73d8e41
4 changed files with 8 additions and 9 deletions

View File

@ -2,10 +2,7 @@ import { h } from 'preact';
export function LiveChip({ className }) {
return (
<div
className={`inline relative px-2 py-1 rounded-full ${className}`}
style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)' }}
>
<div className={`inline relative px-2 py-1 rounded-full ${className}`}>
<div className='relative inline-block w-3 h-3 mr-2'>
<span class='flex h-3 w-3'>
<span

View File

@ -28,7 +28,9 @@ export function Tabs({ children, selectedIndex: selectedIndexProp, onChange, cla
}
export function TextTab({ selected, text, onClick }) {
const selectedStyle = selected ? 'text-black bg-white' : 'text-white bg-transparent';
const selectedStyle = selected
? 'text-white bg-blue-500 dark:text-black dark:bg-white'
: 'text-black dark:text-white bg-transparent';
return (
<button onClick={onClick} className={`rounded-full px-4 py-2 ${selectedStyle}`}>
<span>{text}</span>

View File

@ -13,7 +13,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
const [scrollActive, setScrollActive] = useState(true);
useEffect(() => {
if (events && timelineOffset) {
if (events && events.length > 0 && timelineOffset) {
const firstEvent = events[0];
if (firstEvent) {
setMarkerTime(longToDate(firstEvent.start_time));

View File

@ -115,16 +115,16 @@ export default function Camera({ camera }) {
};
return (
<div className='flex bg-gray-900 w-full h-full justify-center'>
<div className='flex bg-white dark:bg-black w-full h-full justify-center'>
<div className='relative max-w-screen-md flex-grow w-full'>
<div className='absolute top-0 text-white w-full'>
<div className='flex pt-4 pl-4 items-center w-full h-16 z10'>
{(playerType === 'live' || playerType === 'debug') && (
<Fragment>
<Heading size='xl' className='mr-2'>
<Heading size='xl' className='mr-2 text-black dark:text-white'>
{camera}
</Heading>
<LiveChip />
<LiveChip className='text-green-400 border-2 border-solid border-green-400 dark:border-transparent dark:text-white dark:bg-white bg-opacity-40 dark:bg-opacity-10' />
</Fragment>
)}
</div>