Fix onboarding inputs in dark mode

Mintplex-Labs · Nov 18, 2024 · d987b3c · d987b3c
1 parent af3c4f5
commit d987b3c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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