#7308 fix : use "hidden" css property to toggle b/w Login & Forgot Pa…

…ssword (#7323)

* fix : use "hidden" css property to toggle b/w Login & Forgot Password page

* suggestions from code review

---------

Co-authored-by: Vibhu1710 <vibhu@tartanhq.com>
Co-authored-by: rithviknishad <mail@rithviknishad.dev>

src/Components/Auth/Login.tsx

@@ -13,6 +13,7 @@ import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import { useAuthContext } from "../../Common/hooks/useAuthUser";
 import FiltersCache from "../../Utils/FiltersCache";
+import { classNames } from "../../Utils/utils";
 
 export const Login = (props: { forgot?: boolean }) => {
   const { signIn } = useAuthContext();
@@ -276,12 +277,10 @@ export const Login = (props: { forgot?: boolean }) => {
 
             <div className="relative flex h-full w-full items-center">
               <div
-                className={
-                  "w-full transition-all " +
-                  (!forgotPassword
-                    ? "visible -translate-x-0 opacity-100"
-                    : "invisible -translate-x-5 opacity-0")
-                }
+                className={classNames(
+                  "w-full transition-all",
+                  forgotPassword && "hidden",
+                )}
               >
                 <div className="mb-8 w-[300px] text-4xl font-black text-primary-600">
                   {t("auth_login_title")}
@@ -353,12 +352,10 @@ export const Login = (props: { forgot?: boolean }) => {
               </div>
 
               <div
-                className={
-                  "absolute w-full transition-all " +
-                  (forgotPassword
-                    ? "visible translate-x-0 opacity-100"
-                    : "invisible translate-x-5 opacity-0")
-                }
+                className={classNames(
+                  "w-full transition-all",
+                  !forgotPassword && "hidden",
+                )}
               >
                 <button
                   onClick={() => {