fix(login): resolve stuck transition when switching login forms (#2779)

src/components/Login/index.tsx

@@ -201,24 +201,17 @@ const Login = () => {
                 <CSSTransition
                   key={mediaServerLogin ? 'ms' : 'local'}
                   nodeRef={loginRef}
-                  addEndListener={(done) => {
+                  timeout={{ enter: 300, exit: 150 }}
-                    loginRef.current?.addEventListener(
-                      'transitionend',
-                      done,
-                      false
-                    );
-                  }}
                   onEntered={() => {
                     document
                       .querySelector<HTMLInputElement>('#email, #username')
                       ?.focus();
                   }}
                   classNames={{
-                    appear: 'opacity-0',
-                    appearActive: 'transition-opacity duration-500 opacity-100',
                     enter: 'opacity-0',
-                    enterActive: 'transition-opacity duration-500 opacity-100',
+                    enterActive: 'transition-opacity duration-300 opacity-100',
-                    exitActive: 'transition-opacity duration-0 opacity-0',
+                    exit: 'opacity-100',
+                    exitActive: 'transition-opacity duration-150 opacity-0',
                   }}
                 >
                   <div ref={loginRef} className="button-container">