From 9f034f7dcc280a12339abb049471815dc8d5b5ca Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Thu, 11 Jul 2024 13:58:17 -0400
Subject: [PATCH] improve dark mode of select and edit popup

---
 frontend/src/components/select-and-edit/EditPopup.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx
index 09192b3..9538de9 100644
--- a/frontend/src/components/select-and-edit/EditPopup.tsx
+++ b/frontend/src/components/select-and-edit/EditPopup.tsx
@@ -118,7 +118,7 @@ const EditPopup: React.FC<EditPopupProps> = ({
 
   return (
     <div
-      className="absolute bg-white p-4 border border-gray-300 rounded shadow-lg w-60"
+      className="absolute bg-white dark:bg-gray-800 p-4 border border-gray-300 dark:border-gray-600 rounded shadow-lg w-60"
       style={{ top: popupPosition.y, left: popupPosition.x }}
     >
       <Textarea
@@ -126,6 +126,7 @@ const EditPopup: React.FC<EditPopupProps> = ({
         value={updateText}
         onChange={(e) => setUpdateText(e.target.value)}
         placeholder="Tell the AI what to change about this element..."
+        className="dark:bg-gray-700 dark:text-white"
         onKeyDown={(e) => {
           if (e.key === "Enter") {
             e.preventDefault();
@@ -134,7 +135,12 @@ const EditPopup: React.FC<EditPopupProps> = ({
         }}
       />
       <div className="flex justify-end mt-2">
-        <Button onClick={() => onUpdate(updateText)}>Update</Button>
+        <Button
+          className="dark:bg-gray-700 dark:text-white"
+          onClick={() => onUpdate(updateText)}
+        >
+          Update
+        </Button>
       </div>
     </div>
   );