From cdfaed19991c0f73ae5ff3344c2983f00f6be292 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Thu, 27 Apr 2023 15:20:19 -0300
Subject: [PATCH] style(dropdownComponent): add dark mode support to dropdown
 button background color

---
 .../components/dropdownComponent/index.tsx    | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 1bd163310..aad367adb 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -4,18 +4,27 @@ import { Fragment, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 
-export default function Dropdown({value, options, onSelect}:DropDownComponentType) {
-  let [internalValue,setInternalValue] = useState(value===""||!value?"Choose an option":value)
+export default function Dropdown({
+  value,
+  options,
+  onSelect,
+}: DropDownComponentType) {
+  let [internalValue, setInternalValue] = useState(
+    value === "" || !value ? "Choose an option" : value
+  );
   return (
     <>
-      <Listbox value={internalValue} onChange={(value)=>{
-        setInternalValue(value)
-        onSelect(value)
-      }}>
+      <Listbox
+        value={internalValue}
+        onChange={(value) => {
+          setInternalValue(value);
+          onSelect(value);
+        }}
+      >
         {({ open }) => (
           <>
             <div className="relative mt-1">
-              <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
+              <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
                 <span className="block w-max truncate">{internalValue}</span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <ChevronUpDownIcon