fix(frontend): dark mode issues (#2382)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/(auth)/login/components/EmailLogin/components/EmailInput.tsx

@@ -1,30 +1,26 @@
 import { Fragment } from "react";
-import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
+import { Controller } from "react-hook-form";
 
-import Field from "@/lib/components/ui/Field";
-import { emailPattern } from "@/lib/config/patterns";
+import { TextInput } from "@/lib/components/ui/TextInput/TextInput";
 import { useAuthModes } from "@/lib/hooks/useAuthModes";
 
-import { EmailAuthContextType } from "../../../types";
-
 export const EmailInput = (): JSX.Element => {
-  const { register } = useFormContext<EmailAuthContextType>();
-  const { t } = useTranslation();
   const { password, magicLink } = useAuthModes();
   if (!password && !magicLink) {
     return <Fragment />;
   }
 
   return (
-    <Field
-      {...register("email", {
-        required: true,
-        pattern: emailPattern,
-      })}
-      placeholder={t("email", { ns: "login" })}
-      label={t("email", { ns: "translation" })}
-      inputClassName="py-1 mt-1 mb-3"
+    <Controller
+      name="email"
+      defaultValue=""
+      render={({ field }) => (
+        <TextInput
+          label="Email"
+          inputValue={field.value as string}
+          setInputValue={field.onChange}
+        />
+      )}
     />
   );
 };

frontend/app/(auth)/login/components/EmailLogin/components/PasswordLogin/PasswordLogin.tsx

@@ -1,10 +1,10 @@
 import { Fragment } from "react";
-import { useFormContext } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import { EmailAuthContextType } from "@/app/(auth)/login/types";
 import Button from "@/lib/components/ui/Button";
-import Field from "@/lib/components/ui/Field";
+import { TextInput } from "@/lib/components/ui/TextInput/TextInput";
 import { useAuthModes } from "@/lib/hooks/useAuthModes";
 
 import { usePasswordLogin } from "./hooks/usePasswordLogin";
@@ -13,7 +13,7 @@ export const PasswordLogin = (): JSX.Element => {
   const { t } = useTranslation(["login"]);
   const { password } = useAuthModes();
   const { handlePasswordLogin } = usePasswordLogin();
-  const { register, watch } = useFormContext<EmailAuthContextType>();
+  const { watch } = useFormContext<EmailAuthContextType>();
 
   if (!password) {
     return <Fragment />;
@@ -21,17 +21,22 @@ export const PasswordLogin = (): JSX.Element => {
 
   return (
     <div>
-      <Field
-        {...register("password", { required: true })}
-        placeholder={t("password", { ns: "login" })}
-        label={t("password", { ns: "login" })}
-        inputClassName="py-1 mt-1 mb-3"
-        type="password"
+      <Controller
+        name="password"
+        defaultValue=""
+        render={({ field }) => (
+          <TextInput
+            label="Password"
+            inputValue={field.value as string}
+            setInputValue={field.onChange}
+            crypted={true}
+          />
+        )}
       />
       <Button
         isLoading={watch("isPasswordSubmitting")}
         variant="secondary"
-        className="py-2 font-normal w-full mb-1"
+        className="py-2 font-normal w-full mb-1 mt-2"
         onClick={() => void handlePasswordLogin()}
       >
         {t("login")}

frontend/app/(auth)/login/page.module.scss

@@ -0,0 +1,46 @@
+@use "@/styles/Spacings.module.scss";
+@use "@/styles/Typography.module.scss";
+
+.login_page_wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .section {
+    max-width: 500px;
+    display: flex;
+    flex-direction: column;
+    row-gap: Spacings.$spacing03;
+
+    .logo_link {
+      display: flex;
+      justify-content: center;
+    }
+
+    .title {
+      @include Typography.Big;
+      text-align: center;
+
+      .primary_text {
+        color: var(--primary);
+      }
+    }
+
+    .form_container {
+      display: flex;
+      flex-direction: column;
+      gap: Spacings.$spacing03;
+    }
+
+    .divider {
+      text-transform: uppercase;
+    }
+
+    .restriction_message {
+      text-align: center;
+      font-size: Typography.$tiny;
+    }
+  }
+}

frontend/app/(auth)/login/page.tsx

@@ -5,17 +5,19 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import { QuivrLogo } from "@/lib/assets/QuivrLogo";
-import { Divider } from "@/lib/components/ui/Divider";
+import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
 import { useAuthModes } from "@/lib/hooks/useAuthModes";
 
 import { EmailLogin } from "./components/EmailLogin";
 import { GoogleLoginButton } from "./components/GoogleLogin";
 import { useLogin } from "./hooks/useLogin";
+import styles from "./page.module.scss";
 import { EmailAuthContextType } from "./types";
 
 const Main = (): JSX.Element => {
   useLogin();
-  const { googleSso, password, magicLink } = useAuthModes();
+  const { googleSso } = useAuthModes();
+  const { isDarkMode } = useUserSettingsContext();
 
   const methods = useForm<EmailAuthContextType>({
     defaultValues: {
@@ -26,30 +28,26 @@ const Main = (): JSX.Element => {
   const { t } = useTranslation(["translation", "login"]);
 
   return (
-    <div className="w-screen h-screen bg-ivory" data-testid="sign-in-card">
-      <main className="h-full flex flex-col items-center justify-center">
-        <section className="w-full md:w-1/2 lg:w-1/3 flex flex-col gap-2">
-          <Link href="/" className="flex justify-center">
-            <QuivrLogo size={80} color="black" />
-          </Link>
-          <p className="text-center text-4xl font-medium">
-            {t("talk_to", { ns: "login" })}{" "}
-            <span className="text-primary">Quivr</span>
-          </p>
-          <div className="mt-5 flex flex-col">
-            <FormProvider {...methods}>
-              <EmailLogin />
-            </FormProvider>
-            {googleSso && (password || magicLink) && (
-              <Divider text={t("or")} className="my-3 uppercase" />
-            )}
-            {googleSso && <GoogleLoginButton />}
-          </div>
-          <p className="text-[10px] text-center">
-            {t("restriction_message", { ns: "login" })}
-          </p>
-        </section>
-      </main>
+    <div className={styles.login_page_wrapper}>
+      <section className={styles.section}>
+        <Link href="/" className={styles.logo_link}>
+          <QuivrLogo size={80} color={isDarkMode ? "white" : "black"} />
+        </Link>
+        <p className={styles.title}>
+          {t("talk_to", { ns: "login" })}{" "}
+          <span className={styles.primary_text}>Quivr</span>
+        </p>
+        <div className={styles.form_container}>
+          <FormProvider {...methods}>
+            <EmailLogin />
+          </FormProvider>
+
+          {googleSso && <GoogleLoginButton />}
+        </div>
+        <p className={styles.restriction_message}>
+          {t("restriction_message", { ns: "login" })}
+        </p>
+      </section>
     </div>
   );
 };

frontend/app/(home)/page.tsx

@@ -1,60 +1,13 @@
 "use client";
-import Link from "next/link";
 import { Suspense } from "react";
-import { FormProvider, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
 
-import { QuivrLogo } from "@/lib/assets/QuivrLogo";
-import { Divider } from "@/lib/components/ui/Divider";
-import { useAuthModes } from "@/lib/hooks/useAuthModes";
-
-import { EmailLogin } from "../(auth)/login/components/EmailLogin";
-import { GoogleLoginButton } from "../(auth)/login/components/GoogleLogin";
-import { useLogin } from "../(auth)/login/hooks/useLogin";
-import { EmailAuthContextType } from "../(auth)/login/types";
+import Login from "../(auth)/login/page";
 
 const Main = (): JSX.Element => {
-  useLogin();
-  const { googleSso, password, magicLink } = useAuthModes();
-
-  const methods = useForm<EmailAuthContextType>({
-    defaultValues: {
-      email: "",
-      password: "",
-    },
-  });
-  const { t } = useTranslation(["translation", "login"]);
-
-  return (
-    <div className="w-screen h-screen bg-ivory" data-testid="sign-in-card">
-      <main className="h-full flex flex-col items-center justify-center">
-        <section className="w-full md:w-1/2 lg:w-1/3 flex flex-col gap-2">
-          <Link href="/" className="flex justify-center">
-            <QuivrLogo size={80} color="black" />
-          </Link>
-          <p className="text-center text-4xl font-medium">
-            {t("talk_to", { ns: "login" })}{" "}
-            <span className="text-primary">Quivr</span>
-          </p>
-          <div className="mt-5 flex flex-col">
-            <FormProvider {...methods}>
-              <EmailLogin />
-            </FormProvider>
-            {googleSso && (password || magicLink) && (
-              <Divider text={t("or")} className="my-3 uppercase" />
-            )}
-            {googleSso && <GoogleLoginButton />}
-          </div>
-          <p className="text-[10px] text-center">
-            {t("restriction_message", { ns: "login" })}
-          </p>
-        </section>
-      </main>
-    </div>
-  );
+  return <Login />;
 };
 
-const Login = (): JSX.Element => {
+const Home = (): JSX.Element => {
   return (
     <Suspense fallback="Loading...">
       <Main />
@@ -62,4 +15,4 @@ const Login = (): JSX.Element => {
   );
 };
 
-export default Login;
+export default Home;

frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainCatalogue/BrainCatalogue.module.scss

@@ -44,8 +44,12 @@
         }
 
         .brain_title {
-          font-size: Typography.$medium;
+          @include Typography.EllipsisOverflow;
+          font-size: Typography.$small;
           font-weight: 500;
+          width: 100%;
+          display: flex;
+          justify-content: center;
         }
 
         &:hover,

frontend/lib/components/ui/Tag/Tag.module.scss

@@ -10,7 +10,7 @@
   font-size: Typography.$tiny;
 
   &.primary {
-    background-color: var(--primary-1);
+    background-color: var(--background-special-1);
   }
 
   &.gold {

frontend/lib/components/ui/TextInput/TextInput.tsx

@@ -10,6 +10,7 @@ type TextInputProps = {
   simple?: boolean;
   onSubmit?: () => void;
   disabled?: boolean;
+  crypted?: boolean;
 };
 
 export const TextInput = ({
@@ -20,6 +21,7 @@ export const TextInput = ({
   simple,
   onSubmit,
   disabled,
+  crypted,
 }: TextInputProps): JSX.Element => {
   return (
     <div
@@ -31,7 +33,7 @@ export const TextInput = ({
     >
       <input
         className={styles.text_input}
-        type="text"
+        type={crypted ? "password" : "text"}
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
         placeholder={label}

frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx

@@ -18,12 +18,10 @@ export const UserSettingsProvider = ({
 }): JSX.Element => {
   const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
     if (typeof window !== "undefined") {
-      const localIsDarkMode = localStorage.getItem("isDarkMode");
-
-      return parseBoolean(localIsDarkMode);
+      return true;
     }
 
-    return false;
+    return true;
   });
 
   useEffect(() => {