fix: add layout and minor updates

apps/web/src/components/forms/forgot-password.tsx

@@ -3,14 +3,13 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -44,33 +43,18 @@ export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
   const { mutateAsync: forgotPassword } = trpc.profile.forgotPassword.useMutation();
 
   const onFormSubmit = async ({ email }: TForgotPasswordFormSchema) => {
-    try {
-      await forgotPassword({ email });
+    await forgotPassword({ email }).catch(() => null);
 
-      toast({
-        title: 'Reset email sent',
-        description: 'Your password reset mail has been sent successfully.',
-        duration: 5000,
-      });
+    toast({
+      title: 'Reset email sent',
+      description:
+        'A password reset email has been sent, if you have an account you should see it in your inbox shortly.',
+      duration: 5000,
+    });
 
-      reset();
-      router.push('/check-email');
-    } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: 'An error occurred',
-          description: err.message,
-          variant: 'destructive',
-        });
-      } else {
-        toast({
-          title: 'An unknown error occurred',
-          variant: 'destructive',
-          description:
-            'We encountered an unknown error while attempting to send your email. Please try again later.',
-        });
-      }
-    }
+    reset();
+
+    router.push('/check-email');
   };
 
   return (
@@ -79,17 +63,16 @@ export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
-        <Label htmlFor="email" className="text-slate-500">
+        <Label htmlFor="email" className="text-muted-foreground">
           Email
         </Label>
 
         <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
 
-        {errors.email && <span className="mt-1 text-xs text-red-500">{errors.email.message}</span>}
+        <FormErrorMessage className="mt-1.5" error={errors.email} />
       </div>
 
-      <Button size="lg" disabled={isSubmitting} className="dark:bg-documenso dark:hover:opacity-90">
-        {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+      <Button size="lg" loading={isSubmitting}>
         Reset Password
       </Button>
     </form>

apps/web/src/components/forms/password.tsx

@@ -88,7 +88,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
-        <Label htmlFor="password" className="text-slate-500">
+        <Label htmlFor="password" className="text-muted-foreground">
           Password
         </Label>
 
@@ -106,7 +106,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
       </div>
 
       <div>
-        <Label htmlFor="repeated-password" className="text-slate-500">
+        <Label htmlFor="repeated-password" className="text-muted-foreground">
           Repeat Password
         </Label>
 

apps/web/src/components/forms/profile.tsx

@@ -89,7 +89,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
-        <Label htmlFor="full-name" className="text-slate-500">
+        <Label htmlFor="full-name" className="text-muted-foreground">
           Full Name
         </Label>
 
@@ -99,7 +99,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
       </div>
 
       <div>
-        <Label htmlFor="email" className="text-slate-500">
+        <Label htmlFor="email" className="text-muted-foreground">
           Email
         </Label>
 
@@ -107,7 +107,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
       </div>
 
       <div>
-        <Label htmlFor="signature" className="text-slate-500">
+        <Label htmlFor="signature" className="text-muted-foreground">
           Signature
         </Label>
 

apps/web/src/components/forms/reset-password.tsx

@@ -3,7 +3,6 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -11,6 +10,7 @@ import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -22,7 +22,7 @@ export const ZResetPasswordFormSchema = z
   })
   .refine((data) => data.password === data.repeatedPassword, {
     path: ['repeatedPassword'],
-    message: "Password don't match",
+    message: "Passwords don't match",
   });
 
 export type TResetPasswordFormSchema = z.infer<typeof ZResetPasswordFormSchema>;
@@ -92,7 +92,7 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
-        <Label htmlFor="password" className="flex justify-between text-slate-500">
+        <Label htmlFor="password" className="text-muted-foreground">
           <span>Password</span>
         </Label>
 
@@ -106,13 +106,11 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
           {...register('password')}
         />
 
-        {errors.password && (
-          <span className="mt-1 text-xs text-red-500">{errors.password.message}</span>
-        )}
+        <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
 
       <div>
-        <Label htmlFor="repeatedPassword" className="flex justify-between text-slate-500">
+        <Label htmlFor="repeatedPassword" className="text-muted-foreground">
           <span>Repeat Password</span>
         </Label>
 
@@ -126,13 +124,10 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
           {...register('repeatedPassword')}
         />
 
-        {errors.repeatedPassword && (
-          <span className="mt-1 text-xs text-red-500">{errors.repeatedPassword.message}</span>
-        )}
+        <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
       </div>
 
-      <Button size="lg" disabled={isSubmitting} className="dark:bg-documenso dark:hover:opacity-90">
-        {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+      <Button size="lg" loading={isSubmitting}>
         Reset Password
       </Button>
     </form>

apps/web/src/components/forms/signin.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect } from 'react';
 
-import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -15,6 +14,7 @@ import { z } from 'zod';
 import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -114,21 +114,18 @@ export const SignInForm = ({ className }: SignInFormProps) => {
       onSubmit={handleSubmit(onFormSubmit)}
     >
       <div>
-        <Label htmlFor="email" className="text-slate-500">
+        <Label htmlFor="email" className="text-muted-forground">
           Email
         </Label>
 
         <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
 
-        {errors.email && <span className="mt-1 text-xs text-red-500">{errors.email.message}</span>}
+        <FormErrorMessage className="mt-1.5" error={errors.email} />
       </div>
 
       <div>
-        <Label htmlFor="password" className="flex justify-between text-slate-500">
+        <Label htmlFor="password" className="text-muted-forground">
           <span>Password</span>
-          <Link className="text-xs text-slate-500" href="/forgot-password">
-            Forgot?
-          </Link>
         </Label>
 
         <Input
@@ -141,9 +138,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           {...register('password')}
         />
 
-        {errors.password && (
-          <span className="mt-1 text-xs text-red-500">{errors.password.message}</span>
-        )}
+        <FormErrorMessage className="mt-1.5" error={errors.password} />
       </div>
 
       <Button size="lg" disabled={isSubmitting} className="dark:bg-documenso dark:hover:opacity-90">