Fix Popover style in dark mode

indigo-iam · Nov 15, 2024 · 46205f2 · 46205f2
1 parent 5c5a7bb
commit 46205f2
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/src/app/(pages)/requests/components/GroupRequests/Options/ConfirmButton.tsx b/src/app/(pages)/requests/components/GroupRequests/Options/ConfirmButton.tsx
@@ -23,7 +23,7 @@ export default function ConfirmButton(props: Readonly<ConfirmButtonProps>) {
     <>
       <button
         type="button"
-        className="popover-option text-primary"
+        className="popover-option"
         onClick={open}
       >
         Approve Group Request

diff --git a/src/app/(pages)/requests/components/RegistrationRequests/Options/ConfirmButton.tsx b/src/app/(pages)/requests/components/RegistrationRequests/Options/ConfirmButton.tsx
@@ -23,7 +23,7 @@ export default function ConfirmButton(props: Readonly<ConfirmButtonProps>) {
     <>
       <button
         type="button"
-        className="popover-option text-primary"
+        className="popover-option"
         onClick={open}
       >
         Accept User

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -90,7 +90,7 @@
   }
 
   .popover-option {
-    @apply whitespace-nowrap bg-gray-100 p-2 hover:bg-gray-200/50;
+    @apply whitespace-nowrap p-2 text-start hover:bg-gray-200/50;
   }
 
   .combobox {

diff --git a/src/components/Options/index.tsx b/src/components/Options/index.tsx
@@ -14,7 +14,7 @@ export default function Options(props: Readonly<OptionsProps>) {
       </PopoverButton>
       <PopoverPanel
         anchor="bottom"
-        className="flex flex-col rounded-lg bg-gray-50 shadow"
+        className="flex flex-col rounded-lg bg-gray-50 shadow dark:bg-white/10 dark:backdrop-blur-lg"
       >
         {children}
       </PopoverPanel>