From 26c73d8e417ee54fff36fac35d41be9fde1c52a1 Mon Sep 17 00:00:00 2001
From: JohnMark Sill <johnmarksilly@gmail.com>
Date: Thu, 13 Jan 2022 00:15:58 -0600
Subject: [PATCH] fix: dark mode

---
 web/src/components/LiveChip.jsx | 5 +----
 web/src/components/Tabs.jsx     | 4 +++-
 web/src/components/Timeline.jsx | 2 +-
 web/src/routes/Camera_V2.jsx    | 6 +++---
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/web/src/components/LiveChip.jsx b/web/src/components/LiveChip.jsx
index 08b4d5dae..e5861e05e 100644
--- a/web/src/components/LiveChip.jsx
+++ b/web/src/components/LiveChip.jsx
@@ -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
diff --git a/web/src/components/Tabs.jsx b/web/src/components/Tabs.jsx
index 271084ca6..800375c31 100644
--- a/web/src/components/Tabs.jsx
+++ b/web/src/components/Tabs.jsx
@@ -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>
diff --git a/web/src/components/Timeline.jsx b/web/src/components/Timeline.jsx
index c59a21c6f..33592bda0 100644
--- a/web/src/components/Timeline.jsx
+++ b/web/src/components/Timeline.jsx
@@ -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));
diff --git a/web/src/routes/Camera_V2.jsx b/web/src/routes/Camera_V2.jsx
index fbffdcb1b..5e2039d91 100644
--- a/web/src/routes/Camera_V2.jsx
+++ b/web/src/routes/Camera_V2.jsx
@@ -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>