From b1f2e435aaf8dabd3bc4786634140d518bbfccc1 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Sun, 21 Apr 2024 13:03:01 +0800
Subject: [PATCH] Add ArrowRight icon to signUp and signIn buttons

A new `ArrowRight` icon from `lucide-react` library is introduced to the signUp and signIn buttons on the auth source code. CSS animation properties are applied to the icon for better interactiveness and user experience.
---
 .../auth/src/components/password-sign-in-form.tsx | 15 +++++++++++++--
 .../auth/src/components/password-sign-up-form.tsx | 13 ++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/features/auth/src/components/password-sign-in-form.tsx b/packages/features/auth/src/components/password-sign-in-form.tsx
index 7416b9917..afbcfe58d 100644
--- a/packages/features/auth/src/components/password-sign-in-form.tsx
+++ b/packages/features/auth/src/components/password-sign-in-form.tsx
@@ -3,6 +3,7 @@
 import Link from 'next/link';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { ArrowRight } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import type { z } from 'zod';
@@ -103,13 +104,23 @@ export const PasswordSignInForm: React.FC<{
 
         <Button
           data-test="auth-submit-button"
-          className={'w-full'}
+          className={'group w-full'}
           type="submit"
           disabled={loading}
         >
           <If
             condition={loading}
-            fallback={<Trans i18nKey={'auth:signInWithEmail'} />}
+            fallback={
+              <>
+                <Trans i18nKey={'auth:signInWithEmail'} />
+
+                <ArrowRight
+                  className={
+                    'zoom-in animate-in slide-in-from-left-2 fill-mode-both h-4 delay-500 duration-500'
+                  }
+                />
+              </>
+            }
           >
             <Trans i18nKey={'auth:signingIn'} />
           </If>
diff --git a/packages/features/auth/src/components/password-sign-up-form.tsx b/packages/features/auth/src/components/password-sign-up-form.tsx
index e4b6bc2e2..b3c7afd7a 100644
--- a/packages/features/auth/src/components/password-sign-up-form.tsx
+++ b/packages/features/auth/src/components/password-sign-up-form.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { ArrowRight } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -129,7 +130,17 @@ export const PasswordSignUpForm: React.FC<{
         >
           <If
             condition={loading}
-            fallback={<Trans i18nKey={'auth:signUpWithEmail'} />}
+            fallback={
+              <>
+                <Trans i18nKey={'auth:signUpWithEmail'} />
+
+                <ArrowRight
+                  className={
+                    'zoom-in animate-in slide-in-from-left-2 fill-mode-both h-4 delay-500 duration-500'
+                  }
+                />
+              </>
+            }
           >
             <Trans i18nKey={'auth:signingUp'} />
           </If>