Privacy page restyling (#22)

components/form/FormErrorMessage.tsx

@@ -0,0 +1,25 @@
+import { useFormField } from '@hooks/useFormField';
+import { XCircle } from 'lucide-react';
+import * as React from 'react';
+
+export const FormErrorMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(() => {
+  const { error, formMessageId } = useFormField();
+  const body = error?.message;
+
+  return (
+    body && (
+      <div
+        id={formMessageId}
+        className='flex items-center justify-center gap-2 text-sm text-red-500 duration-200 animate-in fade-in slide-in-from-top-1'
+      >
+        <XCircle className='h-4 w-4' />
+        <span>{body}</span>
+      </div>
+    )
+  );
+});
+
+FormErrorMessage.displayName = 'FormErrorMessage';

components/form/FormMessage.tsx

@@ -1,28 +0,0 @@
-import { useFormField } from '@hooks/useFormField';
-import { cn } from '@utils/cn';
-import * as React from 'react';
-
-export const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-
-  return (
-    <>
-      {!body ? null : (
-        <p
-          ref={ref}
-          id={formMessageId}
-          className={cn('text-sm font-medium text-destructive', className)}
-          {...props}
-        >
-          {body}
-        </p>
-      )}
-    </>
-  );
-});
-
-FormMessage.displayName = 'FormMessage';