From 13f72077d67b8e81c2e533cbd94ad75d5277bf46 Mon Sep 17 00:00:00 2001
From: Munadil <155079796+Munadil16@users.noreply.github.com>
Date: Tue, 24 Sep 2024 03:27:53 +0530
Subject: [PATCH] fix: Quality selector bg issue in light mode (#1282)

---
 src/app/globals.css                          | 3 +--
 src/components/QualitySelectorControllBar.ts | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 6ad3b0ae0..d4227f86e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -129,10 +129,9 @@
 }
 .vjs-quality-selector .vjs-custom-dropup-menu li {
   padding: 0.5rem 1rem;
-  color: #fff;
 }
 .vjs-quality-selector .vjs-custom-dropup-menu li:hover {
-  background: #444;
+  border-radius: inherit;
 }
 
 /* Custom Tooltip Styling */
diff --git a/src/components/QualitySelectorControllBar.ts b/src/components/QualitySelectorControllBar.ts
index fdf57883e..1d7283688 100644
--- a/src/components/QualitySelectorControllBar.ts
+++ b/src/components/QualitySelectorControllBar.ts
@@ -24,9 +24,9 @@ class QualitySelectorControllBar extends videojs.getComponent('Button') {
 
     dropUpMenu.innerHTML = `
       <ul class="bg-white dark:bg-gray-800 shadow-lg rounded-md mt-1">
-        <li class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-black dark:text-white" data-quality="1080"">1080p</li>
-        <li class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-black dark:text-white" data-quality="720"">720p</li>
-        <li class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-black dark:text-white" data-quality="360"">360p</li>
+        <li class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-black dark:text-white" data-quality="1080">1080p</li>
+        <li class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-black dark:text-white" data-quality="720">720p</li>
+        <li class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-black dark:text-white" data-quality="360">360p</li>
       </ul>
     `;