From 04db8261e53e5d5198b2984d8a27d5e6db450bac Mon Sep 17 00:00:00 2001
From: martapanc <marta.panc@gmail.com>
Date: Sun, 18 Feb 2024 12:14:25 +0100
Subject: [PATCH] feat: adjust form spacing

---
 src/components/molecules/ContactForm/ContactForm.tsx | 3 ++-
 src/components/molecules/ContactForm/Input.tsx       | 2 +-
 src/components/molecules/ContactForm/Select.tsx      | 2 +-
 src/components/molecules/ContactForm/TextArea.tsx    | 7 ++++---
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/molecules/ContactForm/ContactForm.tsx b/src/components/molecules/ContactForm/ContactForm.tsx
index 97476cb..c7149c1 100644
--- a/src/components/molecules/ContactForm/ContactForm.tsx
+++ b/src/components/molecules/ContactForm/ContactForm.tsx
@@ -172,9 +172,10 @@ const ContactForm = () => {
               id='message'
               label={t('contacts.fields.message.label')}
               placeholder={t('contacts.fields.message.placeholder')}
+              rows={6}
             />
 
-            <div className='mt-6 flex justify-end'>
+            <div className='mt-2 flex justify-end'>
               <ReCAPTCHA
                 sitekey={reCaptchaSiteKey}
                 ref={recaptchaRef}
diff --git a/src/components/molecules/ContactForm/Input.tsx b/src/components/molecules/ContactForm/Input.tsx
index 733e0b2..fb1f440 100644
--- a/src/components/molecules/ContactForm/Input.tsx
+++ b/src/components/molecules/ContactForm/Input.tsx
@@ -19,7 +19,7 @@ export const Input = ({
   const [_, meta] = useField(fieldProps);
 
   return (
-    <label htmlFor='firstName' className='mb-2 mt-6 flex flex-col font-bold'>
+    <label htmlFor={id} className='mb-2 mt-4 flex flex-col font-bold'>
       {label}
       <Field
         placeholder={placeholder}
diff --git a/src/components/molecules/ContactForm/Select.tsx b/src/components/molecules/ContactForm/Select.tsx
index 2a8b71f..e4d8449 100644
--- a/src/components/molecules/ContactForm/Select.tsx
+++ b/src/components/molecules/ContactForm/Select.tsx
@@ -21,7 +21,7 @@ export const Select = ({ id, label, options }: SelectProps) => {
   const { t } = useTranslation();
 
   return (
-    <label htmlFor={id} className='mb-2 mt-6 flex flex-col font-bold'>
+    <label htmlFor={id} className='mb-2 mt-4 flex flex-col font-bold'>
       {label}
       <Field
         as='select'
diff --git a/src/components/molecules/ContactForm/TextArea.tsx b/src/components/molecules/ContactForm/TextArea.tsx
index 0e079b6..521126c 100644
--- a/src/components/molecules/ContactForm/TextArea.tsx
+++ b/src/components/molecules/ContactForm/TextArea.tsx
@@ -6,14 +6,15 @@ export interface TextAreaProps {
   id: string;
   label: string;
   placeholder?: string;
+  rows?: number;
 }
 
-export const TextArea = ({ id, label, placeholder }: TextAreaProps) => {
+export const TextArea = ({ id, label, placeholder, rows }: TextAreaProps) => {
   const fieldProps = { id, name: id, label, placeholder };
   const [_, meta] = useField(fieldProps);
 
   return (
-    <label htmlFor='firstName' className='mb-2 mt-6 flex flex-col font-bold'>
+    <label htmlFor={id} className='mb-2 mt-4 flex flex-col font-bold'>
       {label}
       <Field
         as='textarea'
@@ -27,7 +28,7 @@ export const TextArea = ({ id, label, placeholder }: TextAreaProps) => {
             'ring-grey-400 dark:ring-slate-500': !meta.touched || !meta.error,
           },
         )}
-        rows={7}
+        rows={rows}
       />
       <div className='font-sm font-normal text-red-600'>
         {meta.touched && meta.error}