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):
2024-11-26 12:55:01 +03:00 · 2024-03-27 14:52:42 -07:00 · 2024-03-27 14:52:42 -07:00 · c89d596990
commit c89d596990
parent 83d184e7fb
9 changed files with 112 additions and 110 deletions
--- a/frontend/app/(auth)/login/components/EmailLogin/components/EmailInput.tsx
+++ b/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}
+        />
+      )}
    />
  );
 };
--- a/frontend/app/(auth)/login/components/EmailLogin/components/PasswordLogin/PasswordLogin.tsx
+++ b/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")}
--- a/frontend/app/(auth)/login/page.module.scss
+++ b/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;
+    }
+  }
+}
--- a/frontend/app/(auth)/login/page.tsx
+++ b/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" />
+    <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="text-center text-4xl font-medium">
+        <p className={styles.title}>
          {t("talk_to", { ns: "login" })}{" "}
-            <span className="text-primary">Quivr</span>
+          <span className={styles.primary_text}>Quivr</span>
        </p>
-          <div className="mt-5 flex flex-col">
+        <div className={styles.form_container}>
          <FormProvider {...methods}>
            <EmailLogin />
          </FormProvider>
-            {googleSso && (password || magicLink) && (
-              <Divider text={t("or")} className="my-3 uppercase" />
-            )}
+
          {googleSso && <GoogleLoginButton />}
        </div>
-          <p className="text-[10px] text-center">
+        <p className={styles.restriction_message}>
          {t("restriction_message", { ns: "login" })}
        </p>
      </section>
-      </main>
    </div>
  );
 };
--- a/frontend/app/(home)/page.tsx
+++ b/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;
--- a/frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainCatalogue/BrainCatalogue.module.scss
+++ b/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,
--- a/frontend/lib/components/ui/Tag/Tag.module.scss
+++ b/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 {
--- a/frontend/lib/components/ui/TextInput/TextInput.tsx
+++ b/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}
--- a/frontend/lib/context/UserSettingsProvider/User-settings.provider.tsx
+++ b/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(() => {