Fix dark theme in select option in chatbot

Protofy-xyz · Oct 10, 2024 · c92cd44 · c92cd44
1 parent 7553aa0
commit c92cd44
Showing 1 changed file with 14 additions and 8 deletions.
diff --git a/packages/protolib/src/components/chatbot/components/Navbar/Navbar.tsx b/packages/protolib/src/components/chatbot/components/Navbar/Navbar.tsx
@@ -58,7 +58,7 @@ export default function Navbar({
  <nav
  className={classnames(
  "absolute left-0 bottom-0 top-0 md:flex-grow-1 w-9/12 md:w-[260px] flex flex-col transition duration-500",
- "bg-[#f8f8f8] dark:bg-[#171717] text-black dark:text-white", // Cambiamos el fondo y el texto según el tema
+ "bg-[#f8f8f8] dark:bg-[#171717] text-black dark:text-white",
  {
  "translate-x-0": active,
  "-translate-x-[150%]": !active,
@@ -68,7 +68,7 @@ export default function Navbar({
  <div className="flex mb-2 items-center justify-between gap-2 p-2">
  <button
  type="button"
- className="border border-gray-300 dark:border-gray-500 p-2 w-full md:w-auto rounded-md text-left flex-grow flex bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800" // Ajustes para fondo claro y oscuro
+ className="border border-gray-300 dark:border-gray-500 p-2 w-full md:w-auto rounded-md text-left flex-grow flex bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800"
  onClick={addNewChat}
  >
  <span className="mr-2 text-xl">
@@ -78,7 +78,7 @@ export default function Navbar({
  </button>
  <button
  type="button"
- className="border h-10 w-10 border-gray-300 dark:border-gray-500 rounded-md p-2 hidden md:inline-block text-gray-800 dark:text-gray-200" // Cambios en el color del borde y texto
+ className="border h-10 w-10 border-gray-300 dark:border-gray-500 rounded-md p-2 hidden md:inline-block text-gray-800 dark:text-gray-200"
  onClick={() => setActive(false)}
  >
  <PanelLeft />
@@ -87,31 +87,37 @@ export default function Navbar({
  <div className="history overflow-y-auto h-[calc(100%-60px)]">
  <ChatHistory />
  </div>
- <div className="account font-bold z-20 bg-[#f8f8f8] dark:bg-[#171717] border-t border-gray-300 dark:border-gray-500 shadow"> {/* Cambios en el color del fondo y bordes */}
+ <div className="account font-bold z-20 bg-[#f8f8f8] dark:bg-[#171717] border-t border-gray-300 dark:border-gray-500 shadow">
  <div className="self-stretch mr-4 w-full mb-2">
  <select
  value={selectedModal}
  onChange={(e) => setModal(e.target.value as ModalList)}
- className="border border-gray-300 dark:border-gray-500 block w-full p-2.5 text-black dark:text-white bg-transparent" // Ajustes para tema claro y oscuro
+ className="border border-gray-300 dark:border-gray-500 block w-full p-2.5 text-black dark:text-white bg-white dark:bg-[#212121] focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-500"
  >
  {Object.keys(groupedModels).map((group) => (
  <optgroup
  label={group.toUpperCase()}
  key={group}
+ className="bg-white dark:bg-[#212121] text-black dark:text-white"
  >
  {groupedModels[group].map((modal) => (
- <option value={modal} key={modal}>
+ <option
+ value={modal}
+ key={modal}
+ className="bg-white dark:bg-[#212121] text-black dark:text-white"
+ >
  {modal}
  </option>
  ))}
  </optgroup>
  ))}
  </select>
+
  </div>
  <div className="[&>.options]:focus-within:visible">
  <button
  type="button"
- className="px-2 relative py-2 inline-flex w-full items-center hover:bg-gray-100 dark:hover:bg-gray-700 transition group bg-transparent text-black dark:text-white" // Ajuste para que el botón también respete los temas
+ className="px-2 relative py-2 inline-flex w-full items-center hover:bg-gray-100 dark:hover:bg-gray-700 transition group bg-transparent text-black dark:text-white"
  >
  <Avatar className="h-11 w-11" />
  <span className="p-2">{name}</span>
@@ -161,5 +167,5 @@ export default function Navbar({
  </Modal>
  </>
  );
- 
+
 }