From d987b3c796aa351d11505709ccaea8a5d370d68d Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Mon, 18 Nov 2024 14:27:36 -0800
Subject: [PATCH] Fix onboarding inputs in dark mode

---
 frontend/src/components/EditingChatBubble/index.jsx |  4 +++-
 frontend/src/index.css                              | 11 +++++++++++
 frontend/src/pages/OnboardingFlow/Steps/index.jsx   | 10 ++++++++--
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/EditingChatBubble/index.jsx b/frontend/src/components/EditingChatBubble/index.jsx
index b78a6716a0..feabd4c6ee 100644
--- a/frontend/src/components/EditingChatBubble/index.jsx
+++ b/frontend/src/components/EditingChatBubble/index.jsx
@@ -16,7 +16,9 @@ export default function EditingChatBubble({
 
   return (
     <div>
-      <p className={`text-xs text-white light:text-black/80 ${isUser ? "text-right" : ""}`}>
+      <p
+        className={`text-xs text-white light:text-black/80 ${isUser ? "text-right" : ""}`}
+      >
         {isUser ? t("common.user") : t("appearance.message.assistant")}
       </p>
       <div
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e46834c182..25a2de074f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -112,6 +112,17 @@
   border-color: var(--theme-sidebar-border);
 }
 
+/*
+This is to override the default border color for the select and input elements
+in the onboarding flow when the theme is not light. This only applies to the
+onboarding flow since its background is dark and is the same fill as the inputs.
+*/
+[data-layout="onboarding"] > * select:not([data-theme="light"]),
+[data-layout="onboarding"] > * input:not([data-theme="light"]),
+[data-layout="onboarding"] > * textarea:not([data-theme="light"]) {
+  border: 1px solid #ffffff;
+}
+
 html,
 body {
   padding: 0;
diff --git a/frontend/src/pages/OnboardingFlow/Steps/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/index.jsx
index 1a6852e64b..bc222b8261 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/index.jsx
@@ -37,7 +37,10 @@ export function OnboardingLayout({ children }) {
 
   if (isMobile) {
     return (
-      <div className="w-screen h-screen overflow-y-auto bg-theme-bg-primary overflow-hidden">
+      <div
+        data-layout="onboarding"
+        className="w-screen h-screen overflow-y-auto bg-theme-bg-primary overflow-hidden"
+      >
         <div className="flex flex-col">
           <div className="w-full relative py-10 px-2">
             <div className="flex flex-col w-fit mx-auto gap-y-1 mb-[55px]">
@@ -87,7 +90,10 @@ export function OnboardingLayout({ children }) {
   }
 
   return (
-    <div className="w-screen overflow-y-auto bg-theme-bg-primary flex justify-center overflow-hidden">
+    <div
+      data-layout="onboarding"
+      className="w-screen overflow-y-auto bg-theme-bg-primary flex justify-center overflow-hidden"
+    >
       <div className="flex w-1/5 h-screen justify-center items-center">
         {backBtn.showing && (
           <button