From ad667583bc5b42b9b43e35bded6aab2ba4672bb5 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 22 Mar 2024 10:55:59 -0600
Subject: [PATCH] Use opacity for both dark and light mode

---
 web/src/components/player/VideoControls.tsx | 2 +-
 web/src/views/events/EventView.tsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index a37da2ca9..b470ca9bd 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -106,7 +106,7 @@ export default function VideoControls({
 
   return (
     <div
-      className={`px-4 py-2 flex justify-between items-center gap-8 text-white z-50 bg-black bg-opacity-60 rounded-lg ${className ?? ""}`}
+      className={`px-4 py-2 flex justify-between items-center gap-8 text-white z-50 bg-secondary-foreground/60 dark:bg-secondary/60 rounded-lg ${className ?? ""}`}
     >
       {video && features.volume && (
         <div className="flex justify-normal items-center gap-2">
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index ec4ce5359..15c795713 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -802,7 +802,7 @@ function MotionReview({
       </div>
 
       <VideoControls
-        className="absolute bottom-16 left-1/2 -translate-x-1/2 bg-secondary"
+        className="absolute bottom-16 left-1/2 -translate-x-1/2"
         features={{
           volume: false,
           seek: true,